地理信息系统（GIS）系列——ArcGIS 开发的各种示例
逑和蔼
1、BDVecLayer 图层调用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
.base-map-ano {
position: absolute;
right: 0pt;
top: 18pt;
background: #e6edf1;
border: #96aed1 1px solid;
padding: 4px 5px;
padding-left: 0px;
padding-top: 0px;
display: none;
font-weight: normal;
}
.base-map {
position: absolute;
right: 15pt;
top: 15pt;
background: #f0f0f0;
border: #96aed1 1px solid;
width: auto;
height: auto;
z-index: 99;
font: normal 11px "宋体",Arial;
color: #868686;
}
.base-map-switch {
padding: 4px 8px;
float: left;
}
.base-map-switch-active {
background: #e6edf1;
font-weight: bold;
color: #4d4d4d;
}
.base-map-switch:hover {
cursor: pointer;
}
.base-map-switch-center {
border: 1px #96aed1 solid;
border-top: none;
border-bottom: none;
}
</style>
<script type="text/javascript">
dojoConfig = {
parseOnLoad: true,
packages: [{
name: 'layer',
location: this.location.pathname.replace(/\/[^/]+$/, "") + "/js/layer"
}]
};
</script>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
var map;
require([
"esri/map",
"layer/BDVecLayer",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
"esri/SpatialReference",
"dojo/domReady!"
], function (
Map,
BDVecLayer,
FeatureLayer,
Point,
SpatialReference
) {
map = new Map("map", {
logo: false
});
var vecMap = new BDVecLayer();
map.addLayer(vecMap);
var pt = new Point(7038512.810510807, 2629489.7975553474, new SpatialReference({ wkid: 102100 }));
map.centerAndZoom(pt, 5);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
2、BDimgLayer 图层调用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
.base-map-ano {
position: absolute;
right: 0pt;
top: 18pt;
background: #e6edf1;
border: #96aed1 1px solid;
padding: 4px 5px;
padding-left: 0px;
padding-top: 0px;
display: none;
font-weight: normal;
}
.base-map {
position: absolute;
right: 15pt;
top: 15pt;
background: #f0f0f0;
border: #96aed1 1px solid;
width: auto;
height: auto;
z-index: 99;
font: normal 11px "宋体",Arial;
color: #868686;
}
.base-map-switch {
padding: 4px 8px;
float: left;
}
.base-map-switch-active {
background: #e6edf1;
font-weight: bold;
color: #4d4d4d;
}
.base-map-switch:hover {
cursor: pointer;
}
.base-map-switch-center {
border: 1px #96aed1 solid;
border-top: none;
border-bottom: none;
}
</style>
<script type="text/javascript">
dojoConfig = {
parseOnLoad: true,
packages: [{
name: 'layer',
location: this.location.pathname.replace(/\/[^/]+$/, "") + "/js/layer"
}]
};
</script>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
var map；
require([
"esri/map",
"layer/BDimgLayer",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
"esri/SpatialReference",
"dojo/domReady!"
], function (
Map,
BDimgLayer,
FeatureLayer,
Point,
SpatialReference
) {
map = new Map("map", {
logo: false
});
var vecMap = new BDimgLayer();
map.addLayer(vecMap);
var pt = new Point(7038512.810510807, 2629489.7975553474, new SpatialReference({ wkid: 102100 }));
map.centerAndZoom(pt, 5);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
3、jQuery 构建树形图层列表
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/soria/soria.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://js.arcgis.com/3.9/"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function () {
var map;
var layer, visible = [];
require([
"dojo/parser",
"dojo/_base/window",
"dojo/dom-style",
"dojo/topic",
"dijit/registry",
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/domReady!"
], function (
parser,
win,
domStyle,
topic,
registry,
Map,
ArcGISTiledMapServiceLayer,
ArcGISDynamicMapServiceLayer
) {
parser.parse();
map = new Map("mapDiv");
layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer")
map.addLayer(layer);
if (layer.loaded) {
buildLayerList(layer);
} else {
dojo.connect(layer, "onLoad", buildLayerList);
}
});
function getChildrenNodes(parentnodes, node) {
for (var i = parentnodes.length - 1; i >= 0; i--) {
var pnode = parentnodes[i];
// 如果是父子关系，为父节点增加子节点，退出for循环
if (pnode.id == node.pid) {
pnode.state = "closed";//关闭二级树
pnode.children.push(node);
return;
} else {
// 如果不是父子关系，删除父节点栈里当前的节点，
// 继续此次循环，直到确定父子关系或不存在退出for循环
parentnodes.pop();
}
}
}
// 树的构造
function buildLayerList(layer) {
// 构建图层树形结构
var layerinfos = layer.layerInfos;
// jquery-easyui的tree用到的tree_data.json数组
var treeList = [];
// 保存所有的父亲节点
var parentnodes = [];
// 增加一个根节点
var root = { "id": "rootnode", "text": "所有图层", "children": [] };
var node = {};
// alert(layerinfos.length);
if (layerinfos != null && layerinfos.length > 0) {
for (var i = 0, j = layerinfos.length; i < j; i++) {
var info = layerinfos[i];
if (info.defaultVisibility) {
visible.push(info.id);
}
// node为tree用到的json数据
node = {
"id": info.id,
"text": info.name,
"pid": info.parentLayerId,
"checked": info.defaultVisibility ? true : false,
"children": []
};
if (info.parentLayerId == -1) {
parentnodes.push(node);
root.children.push(node);
} else {
getChildrenNodes(parentnodes, node);
parentnodes.push(node);
}
}
}
treeList.push(root);
// jquery-easyui的树
$("#tt").tree({
data: treeList,
// 使节点增加选择框
checkbox: true,
// 更新显示选择的图层
onCheck: function (node, checked) {
var visible = [];
var nodes = $('#tt').tree("getChecked");
dojo.forEach(nodes, function (node) {
visible.push(node.id);
});
// 如果没有现实图层设置为-1
if (visible.length === 0) {
visible.push(-1);
}
layer.setVisibleLayers(visible);
}
});
}
});
</script>
</head>
<body class="soria">
<div>
<ul id="tt" style="margin-top:0;width:250px"></ul>
<div id="mapDiv">
</div>
</div>
</body>
</html>
4、SVG 绘制 Polygon
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
5、HTML5 datalist 标签
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</body>
</html>
6、HTML5 keygen 标签
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form action="Default.aspx" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
</body>
</html>
7、HTML5 output 标签
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
</body>
</html>
8、HTML5 input 新类型
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form>
选择周: <input type="week" name="year_week">
</form>
</body>
</html>
9、canvas 绘制矩形
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<canvas id="myCanvas" width="600" height="300" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
</body>
</html>
10、点击按钮获取当前坐标
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
}
else { x.innerHTML = "该浏览器不支持获取地理位置。"; }
}
function showPosition(position) {
x.innerHTML = "纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
</body>
</html>
11、定位要素并绘制要素
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="translucent-black">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Geolocation API</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
@-webkit-keyframes pulse {
0% {
opacity: 1.0;
}
45% {
opacity: .20;
}
100% {
opacity: 1.0;
}
}
@-moz-keyframes pulse {
0% {
opacity: 1.0;
}
45% {
opacity: .20;
}
100% {
opacity: 1.0;
}
}
#map_graphics_layer {
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: pulse;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: pulse;
}
</style>
<script src="https://js.arcgis.com/3.16compact/"> </script>
<script>
var map;
var graphic;
var currLocation;
var watchId;
require([
"esri/map",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/graphic",
"esri/Color",
"dojo/domReady!"
], function (
Map,
Point,
SimpleMarkerSymbol,
SimpleLineSymbol,
Graphic,
Color
) {
map = new Map("map", {
basemap: "oceans",
center: [-85.957, 17.140],
zoom: 2
});
map.on("load", initFunc);
function orientationChanged() {
if (map) {
// 地图返回原来位置
map.reposition();
// 设置地图大小
map.resize();
}
}
function initFunc(map) {
if (navigator.geolocation) {
// 获取当前位置
navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);
// 查看定位
watchId = navigator.geolocation.watchPosition(showLocation, locationError);
} else {
alert("Browser doesn't support Geolocation. Visit http://caniuse.com to see browser support for the Geolocation API.");
}
}
// 错误信息
function locationError(error) {
// error occurred so stop watchPosition
if (navigator.geolocation) {
navigator.geolocation.clearWatch(watchId);
}
switch (error.code) {
case error.PERMISSION_DENIED:
alert("Location not provided");
break;
case error.POSITION_UNAVAILABLE:
alert("Current location not available");
break;
case error.TIMEOUT:
alert("Timeout");
break;
default:
alert("unknown error");
break;
}
}
// 放大定位
function zoomToLocation(location) {
var pt = new Point(location.coords.longitude, location.coords.latitude);
addGraphic(pt);
map.centerAndZoom(pt, 12);
}
// 现实定位
function showLocation(location) {
// zoom to the users location and add a graphic
var pt = new Point(location.coords.longitude, location.coords.latitude);
if (!graphic) {
addGraphic(pt);
} else {
// move the graphic if it already exists
graphic.setGeometry(pt);
}
map.centerAt(pt);
}
// 添加位置图元
function addGraphic(pt) {
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([210, 105, 30, 0.5]),
8
),
new Color([210, 105, 30, 0.9])
);
graphic = new Graphic(pt, symbol);
map.graphics.add(graphic);
}
});
</script>
</head>
<body onorientationchange="orientationChanged();">
<div id="map" style="width:100%; height:100%;"></div>
</body>
</html>
12、HeatmapRenderer：热图渲染适配器
步骤：
- 绘制底图
- 获取热点数据 FeatureLayer，FeatureServer
- HeatmapRenderer
- 地图中添加热点数据
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>FeatureLayer using HeatmapRenderer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.16/"></script>
<script>
var map;
require([
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"esri/map",
"esri/renderers/HeatmapRenderer",
"dojo/domReady!"
], function (
InfoTemplate,
FeatureLayer,
Map,
HeatmapRenderer
){
// --------------------------------------------------------------------
// Formatting functions for attribute values in the InfoWindow//定义格式化信息
// Data is not what you expect, turn your dirty data into
// readable stuff in the infowindow
// --------------------------------------------------------------------
formatFatalities = function (value, key, data){
var result = value > 1 ? value + " people " : value + " person ";
return result;
}
formatGender = function (value, key, data){
var lookup = {1: "male", 2: "female", 8: "unknown", 9: "unknown"};
return lookup[value];
}
formatConditions = function (value, key, data){
var lookup = {0: "No Additional Atmospheric Conditions", 1: "Clear", 2: "Rain", 3: "Sleet, Hail (Freezing Rain or Drizzle)", 4: "Snow", 5: "Fog, Smog, Smoke", 6: "Severe Crosswinds", 7: "Blowing Sand, Soil, Dirt", 8: "Other", 10: "Cloudy", 11: "Blowing Snow", 98: "Not Reported", 99: "Unknown"};
if (value !== 1) {
return "Road conditions: " + lookup[value] + "<br>";
}
}
formatWorkZone = function (value, key, data){
var lookup = {0: "None", 1: "Construction", 2: "Maintenance", 3: "Utility", 4: "Work Zone, Type Unknown"};
if (value !== 0) {
return "Work Zone: " + lookup[value] + "<br>";
}
}
formatAlcoholTestResults = function (value, key, data){
// --------------------------------------------------------------------
// The field is a string and we only want values of 8 - 94 since the
// California legal limit is 0.08% BAC. If value is between 8 and 94
// then we will report that they were over the legal limit.
// --------------------------------------------------------------------
var isMatch = value.match(/\b(?!9[5-9])[0-9][0-9]\b|\b[8-9]{1}\b/m);
if (isMatch) {
return "Driver was over the legal limit for alcohol";
}
}
map = new Map("map", {
basemap: "gray",
center: [-119.11, 36.65],
zoom: 7,
minZoom: 7,
maxZoom: 9
});
var infoContentDesc = "<p>${numfatal:formatFatalities} died when a ${age} year old ${sex:formatGender} was involved in a fatal speeding accident.</p>";
var infoContentDetails = "${atmcond:formatConditions}${conszone:formatWorkZone}${alcres:formatAlcoholTestResults}";
var infoContent = infoContentDesc + infoContentDetails;
var infoTemplate = new InfoTemplate("Accident details", infoContent);
var serviceURL = "//services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/2012_CA_NHTSA/FeatureServer/0";
var heatmapFeatureLayerOptions = {
mode: FeatureLayer.MODE_SNAPSHOT,
infoTemplate: infoTemplate,
outFields: [
"atmcond",
"numfatal",
"conszone",
"age",
"alcres",
"sex"
]
};
var heatmapFeatureLayer = new FeatureLayer(serviceURL, heatmapFeatureLayerOptions);
var heatmapRenderer = new HeatmapRenderer();
heatmapFeatureLayer.setRenderer(heatmapRenderer);
map.addLayer(heatmapFeatureLayer);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
13、打印服务
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<style>
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
body{
background-color: #fff; overflow:hidden;
font-family: sans-serif;
}
label {
display: inline-block;
padding: 5px 5px 0 5px;
font-weight: 400;
font-size: 12pt;
}
.button {
width: 100%;
margin: 3px auto;
text-align: center;
}
#header {
padding-top: 4px;
padding-right: 15px;
color: #444;
font-size:16pt; text-align:right;font-weight:bold;
height:55px;
background: #fff;
border-bottom: 1px solid #444;
}
#subheader {
font-size:small;
color: #444;
text-align:right;
padding-right:20px;
}
#rightPane{
margin: 0;
padding: 10px;
background-color: #fff;
color: #421b14;
width: 180px;
}
.ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
#ds-h div { width: 100%; }
#ds-l div, #ds-r div { height: 100%; }
#ds-r div { right: 0; }
#ds .o1 { filter: alpha(opacity=10); opacity: .1; }
#ds .o2 { filter: alpha(opacity=8); opacity: .08; }
#ds .o3 { filter: alpha(opacity=6); opacity: .06; }
#ds .o4 { filter: alpha(opacity=4); opacity: .04; }
#ds .o5 { filter: alpha(opacity=2); opacity: .02; }
#ds .h1 { height: 1px; }
#ds .h2 { height: 2px; }
#ds .h3 { height: 3px; }
#ds .h4 { height: 4px; }
#ds .h5 { height: 5px; }
#ds .v1 { width: 1px; }
#ds .v2 { width: 2px; }
#ds .v3 { width: 3px; }
#ds .v4 { width: 4px; }
#ds .v5 { width: 5px; }
/* make all dijit buttons the same width */
.dijitButton .dijitButtonNode, #drawingWrapper, #printButton {
width: 160px;
}
.esriPrint {
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.16/"></script>
<script>
var app = {};
app.map = null; app.toolbar = null; app.tool = null; app.symbols = null; app.printer = null;
require([
"esri/map",
"esri/toolbars/draw",
"esri/dijit/Print",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/LayerDrawingOptions",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/graphic",
"esri/renderers/ClassBreaksRenderer",
"esri/config",
"dojo/_base/array",
"esri/Color",
"dojo/parser",
"dojo/query",
"dojo/dom",
"dojo/dom-construct",
"dijit/form/CheckBox",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map,
Draw,
Print,
ArcGISTiledMapServiceLayer,
ArcGISDynamicMapServiceLayer,
LayerDrawingOptions,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Graphic,
ClassBreaksRenderer,
esriConfig,
arrayUtils,
Color,
parser,
query,
dom,
domConstruct,
CheckBox,
Button
) {
parser.parse();
esriConfig.defaults.io.proxyUrl = "/proxy/";
app.map = new Map("map", {
center: [-90.733, 30.541],
zoom: 8
});
app.map.on("load", function() {
app.toolbar = new Draw(app.map);
app.toolbar.on("draw-end", addToMap);
});
// 打印对象
app.printer = new Print({
map: app.map,
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
}, dom.byId("printButton"));
app.printer.startup();
// 底图数据
var url = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";
var tiledLayer = new ArcGISTiledMapServiceLayer(url, { "id": "Ocean" });
app.map.addLayer(tiledLayer);
// 动态数据
var layer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer", {
id: "County Population",
opacity: 0.5
});
layer.setVisibleLayers([3]);
// 数据渲染
var layerDefs = [];
layerDefs[3] = "state_name = 'Louisiana'";
layer.setLayerDefinitions(layerDefs);
// 类专题
var renderer = new ClassBreaksRenderer(null, "pop2000");
var outline = new SimpleLineSymbol("solid", new Color([0,0,0,0.5]), 1);
var colors = [
new Color([255,255,178,0.5]),
new Color([254,204,92,0.5]),
new Color([253,141,60,0.5]),
new Color([240,59,32,0.5]),
new Color([189,0,38,0.5])
];
renderer.addBreak(0, 20000, new SimpleFillSymbol("solid", outline, colors[0]));
renderer.addBreak(20000, 50000, new SimpleFillSymbol("solid", outline, colors[1]));
renderer.addBreak(50000, 100000, new SimpleFillSymbol("solid", outline, colors[2]));
renderer.addBreak(10000, 1000000, new SimpleFillSymbol("solid", outline, colors[3]));
renderer.addBreak(1000000, 10000000, new SimpleFillSymbol("solid", outline, colors[4]));
var drawingOptions = new LayerDrawingOptions();
drawingOptions.renderer = renderer;
// set the drawing options for the relevant layer
// optionsArray index corresponds to layer index in the map service
var optionsArray = [];
optionsArray[3] = drawingOptions;
layer.setLayerDrawingOptions(optionsArray);
app.map.addLayer(layer);
// create a check box for each map layer
arrayUtils.forEach(["County Population", "Ocean"], function(id) {
new CheckBox({
id: "cb_" + id,
name: "cb_" + id,
checked: true,
onChange: function(bool) {
bool ?
app.map.getLayer(this.id.split("_")[1]).show() :
app.map.getLayer(this.id.split("_")[1]).hide();
}
}, domConstruct.create("input", {
id: "lyr_" + id
})).placeAt(dom.byId("layerToggle"));
// create a label for the check box
var label = domConstruct.create('label', {
"for": "cb_" + id,
"innerHTML": id
});
domConstruct.place(label, dom.byId("layerToggle"));
domConstruct.place(domConstruct.create("br"), dom.byId("layerToggle"));
});
// 点线面填充定义
app.symbols = {};
app.symbols.point = new SimpleMarkerSymbol("square", 10, new SimpleLineSymbol(), new Color([0, 255, 0, 0.75]));
app.symbols.polyline = new SimpleLineSymbol("solid", new Color([255, 128, 0]), 2);
app.symbols.polygon = new SimpleFillSymbol().setColor(new Color([255,255,0,0.25]));
app.symbols.circle = new SimpleFillSymbol().setColor(new Color([0, 0, 180, 0.25]));
// 绘图绑定事件
query(".drawing").forEach(function(btn) {
var button = new Button({
label: btn.innerHTML,
onClick: function() {
activateTool(this.id);
}
}, btn);
});
function activateTool(type) {
app.tool = type.replace("freehand", "");
app.toolbar.activate(type);
app.map.hideZoomSlider();
}
function addToMap(evt) {
app.toolbar.deactivate();
app.map.showZoomSlider();
var graphic = new Graphic(evt.geometry, app.symbols[app.tool]);
app.map.graphics.add(graphic);
}
});
</script>
</head>
<body class="nihilo">
<div id="mainWindow"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="header"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'top'">
Print Dijit: Out of the Box Printing for the ArcGIS API for JavaScript
<div id="subheader">Requires ArcGIS Server 10.1</div>
</div>
<div id="map" class="shadow"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
<div id="ds">
<div id="ds-h">
<div class="ds h1 o1"></div>
<div class="ds h2 o2"></div>
<div class="ds h3 o3"></div>
<div class="ds h4 o4"></div>
<div class="ds h5 o5"></div>
</div>
<div id="ds-r">
<div class="ds v1 o1"></div>
<div class="ds v2 o2"></div>
<div class="ds v3 o3"></div>
<div class="ds v4 o4"></div>
<div class="ds v5 o5"></div>
</div>
</div>
</div>
<div id="rightPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'">
<div id="printButton"></div>
<hr />
<div id="drawingWrapper">
Add some graphics:
<div id="point" class="drawing">Point</div>
<div id="freehandpolyline" class="drawing">Freehand Polyline</div>
<div id="freehandpolygon" class="drawing">Freehand Polygon</div>
<div id="circle" class="drawing">Circle</div>
</div>
<hr />
<div id="layerToggle">
Toggle Layers: <br />
</div>
</div>
</div>
</body>
</html>
14、自定义加载天地图
步骤：
- 配置环境，就是我们 JavaScript 加载包的环境
- 定义我们的天地图加载组件
- 在UI界面调用我们的组件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="http://localhost:13103/js/esri/css/esri.css">
<script type="text/javascript">
dojoConfig = {
parseOnLoad: true,
packages: [{ name: 'tdlib', location: this.location.pathname.replace(/\/[^/]+$/, "") + "/js/tdlib" }]
};
</script>
<script src="http://localhost:13103/js/init.js"></script>
<script>
var map;
require([
"esri/map",
"tdlib/TDTLayer",
"tdlib/TDTAnnoLayer",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/_base/Color",
"dojo/domReady!"
], function (
Map,
TDTLayer,
TDTAnnoLayer,
FeatureLayer,
Point,
SimpleFillSymbol,
SimpleLineSymbol,
Color
) {
map = new Map("map", { logo: false });
var basemap = new TDTLayer();
map.addLayer(basemap);
// 城市标注
var annolayer = new TDTAnnoLayer();
map.addLayer(annolayer);
var pt = new Point(103.847, 36.0473);
map.centerAndZoom(pt, 3);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
15、网络分析——路径范围分析
ServiceAreaTask
- 范围服务分析类，根据时间分析，可以到达的路径范围
ServiceAreaParameters
- 范围服务分析参数类
ServiceAreaSolveResult
- 返回结果类
步骤：
- 获取坐标点
- 使用时间组件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Basic Service Area</title>
<link rel="stylesheet" href="http://localhost:13103/js/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://localhost:13103/js/esri/css/esri.css">
<style>
body, html, #main {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
<script src="http://localhost:13103/js/init.js"></script>
<script>
var map, serviceAreaTask, params, clickpoint;
require([
"esri/map",
"esri/config",
"esri/tasks/ServiceAreaTask",
"esri/tasks/ServiceAreaParameters",
"esri/tasks/FeatureSet",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/geometry/Point",
"esri/graphic",
"dojo/parser",
"dojo/dom",
"dijit/registry",
"esri/Color",
"dojo/_base/array",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/HorizontalRule",
"dijit/form/HorizontalRuleLabels",
"dijit/form/HorizontalSlider",
"dojo/domReady!"
], function(
Map,
esriConfig,
ServiceAreaTask,
ServiceAreaParameters,
FeatureSet,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Point,
Graphic,
parser,
dom,
registry,
Color,
arrayUtils
) {
parser.parse();
// This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to
// replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
// for details on setting up a proxy page.
esriConfig.defaults.io.proxyUrl = "/proxy/";
map = new Map("map", {
basemap: "streets",
center: [-122.447, 37.781],
zoom: 15
});
map.on("click", mapClickHandler);
params = new ServiceAreaParameters();
// 数字范围值，时间值
params.defaultBreaks= [1];
params.outSpatialReference = map.spatialReference;
// 如果这是真的，分析结果将返回
// params.returnFacilities = false;
serviceAreaTask = new ServiceAreaTask("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Service Area");
registry.byId("hslider").on("change", updateHorizontalLabel);
updateHorizontalLabel();
// Create function that updates label when changed
function updateHorizontalLabel() {
// Get access to nodes/widgets we need to get/set values
// 获取部件
var hSlider = registry.byId("hslider");
var label = dom.byId("decValue");
// Update label
// 获取值
label.innerHTML = hSlider.get("value");
// 数字范围值
params.defaultBreaks = [ hSlider.value / 60 ];
if (clickpoint) {
mapClickHandler(clickpoint);
}
}
function mapClickHandler(evt) {
clickpoint = evt;
map.graphics.clear();
// define the symbology used to display the results and input point
var pointSymbol = new SimpleMarkerSymbol(
"diamond",
20,
new SimpleLineSymbol(
"solid",
new Color([88,116,152]), 2
),
new Color([88,116,152,0.45])
);
var inPoint = new Point(evt.mapPoint.x, evt.mapPoint.y, map.spatialReference);//点
var location = new Graphic(inPoint, pointSymbol);
// 添加到地图中
map.graphics.add(location);
var features = [];
features.push(location);
var facilities = new FeatureSet();
facilities.features = features;
params.facilities = facilities;
// 分析出区域
serviceAreaTask.solve(params,function(solveResult){
var polygonSymbol = new SimpleFillSymbol(
"solid",
new SimpleLineSymbol("solid", new Color([232,104,80]), 2),
new Color([232,104,80,0.25])
);
arrayUtils.forEach(solveResult.serviceAreaPolygons, function(serviceArea){
serviceArea.setSymbol(polygonSymbol);
map.graphics.add(serviceArea);
});
}, function(err){
console.log(err.message);
});
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0px;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<b>Click to find the service area polygon</b>
<div style="width: 400px; margin: 10px">
<ol data-dojo-type="dijit/form/HorizontalRuleLabels"
data-dojo-props="
container: 'topDecoration',
style: 'height: 1.2em; font-weight: bold; margin: 0 12px;'">
<li>0</li>
<li>0:20</li>
<li>0:40</li>
<li>1:00</li>
<li>1:20</li>
<li>1:40</li>
<li>2:00</li>
</ol>
<div data-dojo-type="dijit/form/HorizontalRule"
data-dojo-props="
container: 'topDecoration',
count: 7,
style: 'height: 5px; margin: 0 12px;'">
</div>
<input id="hslider" value="60" type="range"
data-dojo-type="dijit/form/HorizontalSlider"
data-dojo-props="
minimum: 0,
maximum: 120,
showButtons: false,
discreteValues: 25">
<div style="padding-top: 10px; text-align: center;">Travel time: <strong id="decValue"></strong> seconds</div>
</div>
</div>
<div id="map" dojotype="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
16、网络分析-最短路径分析
RouteTask
- 路径分析
RouteParameters
- 路径分析参数类
RouteResult
- 返回结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Simple Routing - RouteTask - 4.0</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#paneDiv {
position: absolute;
top: 10px;
left: 62px;
padding: 0 12px 0 12px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<script src="https://js.arcgis.com/4.0/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/tasks/RouteTask",
"esri/tasks/support/RouteParameters",
"esri/tasks/support/FeatureSet",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"esri/core/urlUtils",
"dojo/on",
"dojo/domReady!"
], function (
Map,
MapView,
Graphic,
GraphicsLayer,
RouteTask,
RouteParameters,
FeatureSet,
SimpleMarkerSymbol,
SimpleLineSymbol,
Color,
urlUtils,
on
) {
// proxy the route requests to avoid prompt for log in
urlUtils.addProxyRule({
urlPrefix: "route.arcgis.com",
proxyUrl: "/sproxy/"
});
// 路径服务
var routeTask = new RouteTask({
url: "https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"
});
// 停止和路线的结果将存储在这一层
var routeLyr = new GraphicsLayer();
// 开始的路径参数
var routeParams = new RouteParameters({
stops: new FeatureSet(),
// autocasts as new SpatialReference()
outSpatialReference: {
wkid: 3857
}
});
// 定义图标用来显示停止
var stopSymbol = new SimpleMarkerSymbol({
style: "cross",
size: 15,
// autocasts as new SimpleLineSymbol()
outline: {
width: 4
}
});
// 定义图标用来显示路线
var routeSymbol = new SimpleLineSymbol({
color: [0, 0, 255, 0.5],
width: 5
});
var map = new Map({
basemap: "streets",
// Add the route layer to the map
layers: [routeLyr]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-117.195, 34.057],
zoom: 14
});
on(view, "click", addStop);
function addStop(evt) {
// 添加一个点在地图上的位置单击
var stop = new Graphic({
geometry: evt.mapPoint,
symbol: stopSymbol
});
routeLyr.add(stop);
// 执行路由任务如果2个或更多停止输入
routeParams.stops.features.push(stop);
if (routeParams.stops.features.length >= 2) {
routeTask.solve(routeParams).then(showRoute);
}
}
// 将解决路由添加到地图图形
function showRoute(data) {
var routeResult = data.routeResults[0].route;
routeResult.symbol = routeSymbol;
routeLyr.add(routeResult);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="paneDiv">
<div></div>
</div>
</body>
</html>
17、轨迹回放
步骤：
- 定义ServiceAreaTask，ServiceAreaParameters，发布/NAServer/Service Area
- 获取参考点
- 根据我们的参数，设置时间（ServiceAreaParameters 时间数字）
- 开始分析
- 展现在地图中
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Simple Map</title>
<link rel="stylesheet" type="text/css" href="http://localhost:13103/js/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://localhost:13103/js//esri/css/esri.css" />
<script type="text/javascript" src="http://localhost:13103/js/init.js"></script>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("esri.toolbars.draw");
dojo.require("esri.graphic");
dojo.require("esri.layers.graphics");
dojo.require("esri.geometry");
var ptcount = "2768854.912601498,-1111489.0981985647/4079902.8217484932,-1091921.2189575648/6750918.338144982,-945162.1246500653/";
var list;
var defaultSymbol;
var myMap;
var icount;
var i = 0;
function ptcounntSplit() {
// 坐标点数组
list =ptcount.split("/");
// 坐标点的个数
icount=list.length;
}
function pPosition() {
var point = new esri.geometry.Point(2671015.5163964974, -1708309.4150490611, new esri.SpatialReference({ wkid: 102100 }));
var infoTemplate = new esri.InfoTemplate("<a href='javascript:showDetail()'>查看详情</a>");
var symbol = new esri.symbol.SimpleMarkerSymbol();
var graphic = new esri.Graphic(point, symbol, null, infoTemplate);
myMap.graphics.add(graphic);
myMap.centerAt(point);
}
function gocount() {
var pointSymbol = new esri.symbol.SimpleMarkerSymbol();
pointSymbol.setOutline= new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([255, 123,222]), 10);
pointSymbol.setSize(20);
pointSymbol.setColor(new dojo.Color([0, 255, 0, 0.25]));
var geometry = new esri.geometry.Point(list[i].substring(0, list[i].indexOf(',')), list[i].substring(list[i].indexOf(',') + 1, list[i].length), new esri.SpatialReference({ wkid: 102100 }));
var graphic = new esri.Graphic(geometry, pointSymbol);
myMap.graphics.add(graphic);
var extent =myMap.extent;
if(!extent.contains(graphic.geometry)) {
myMap.centerAt(geometry);
}
i++;
}
// 使用时间函数，进行轨迹回放
function gos() {
// 绘制点
gocount();
if (i <icount-1) {
setTimeout("gos()", "2000");
}
else {
clearTimeout("gos()");
}
}
function init() {
myMap = new esri.Map("mapDiv");
var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
myMap.addLayer(myTiledMapServiceLayer);
myMap.setZoom(4);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<table>
<tr>
<td>
<div id="mapDiv" style="width:1500px; height:800px;border:1px solid #000;"></div>
</td>
<td>
<input id="Button1" type="button" value="定位" onclick='pPosition()' />
<input id="Button2" type="button" value="回放" onclick=' ptcounntSplit(); gos()' />
</td>
</tr>
</table>
<div id="div1"></div>
<div id="div2">
</div>
</body>
</html>
18、饼图嵌入地图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼图专题图</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<link href="ChartInfoWindow.css" rel="stylesheet" />
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var dojoConfig = {
packages: [{
name: "CustomModules",
location: location.pathname.replace(/\/[^/]+$/, "") + "/js/CustomModules"
}]
};
</script>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/renderers/SimpleRenderer",
"esri/Color",
"CustomModules/ChartInfoWindow",
"CustomModules/CustomTheme",
"CustomModules/geometryUtils",
"dojo/_base/array",
"dojo/dom-construct",
"dojo/_base/window",
"dojox/charting/Chart",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/Tooltip",
"dojox/charting/plot2d/Pie",
"dojo/domReady!"
], function (
Map,
FeatureLayer,
ArcGISTiledMapServiceLayer,
SimpleLineSymbol,
SimpleFillSymbol,
SimpleRenderer,
Color,
ChartInfoWindow,
CustomTheme,
geometryUtils,
array,
domConstruct,
win,
Chart,
Highlight,
Tooltip
) {
var map = new Map("map", {
center: [-95.625, 39.243],
zoom: 4,
slider: false
});
var agoServiceURL = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);
map.addLayer(agoLayer);
var featureLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["STATE_NAME", "WHITE", "BLACK", "AMERI_ES", "ASIAN_PI", "OTHER"]
});
var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
var renderer = new SimpleRenderer(defaultSymbol);
featureLayer.setRenderer(renderer);
featureLayer.on("update-end", function (evt) {
var showFields = ["WHITE", "BLACK", "AMERI_ES", "ASIAN_PI", "OTHER"];
createChartInfoWindow(featureLayer, showFields);
});
map.addLayer(featureLayer);
function createChartInfoWindow(layer, showFields) {
var layerId = layer.id;
var featureSums = [];
array.forEach(layer.graphics, function (graphic) {
var sum = 0;
for (var i = 0, j = showFields.length; i < j; i++) {
sum += graphic.attributes[showFields[i]];
}
featureSums.push(sum);
});
var sumMax = -10000;
// 获取和的最大值
array.forEach(featureSums, function (featureSum) {
if (sumMax < featureSum) sumMax = featureSum;
});
array.forEach(layer.graphics, function (graphic, index) {
var infoWindow = new ChartInfoWindow({
domNode: domConstruct.create('div', null, document.getElementById('map'))
});
// 信息窗口
infoWindow.setMap(map);
// 图层中属性的和
var curSum = 0;
for (var i = 0, j = showFields.length; i < j; i++) {
curSum += layer.graphics[index].attributes[showFields[i]];
}
// 窗口的半径
var radius = 80 * curSum / sumMax;
var styleStr = "width:" + radius + "px;height:" + radius + "px";
// 创建饼图区域标签
var nodeChart = domConstruct.create("div", { id: 'nodeTest' + index, style: styleStr }, win.body());
// 创建饼图
var chart = makePieChart(nodeChart, layer.graphics[index].attributes, showFields);
// 设置宽度，高度
infoWindow.resize(radius + 2, radius + 2);
// 设置居中
infoWindow.align = "Center";
// 获取中心点
var labelPt = geometryUtils.getPolygonCenterPoint(graphic.geometry);
infoWindow.setContent(nodeChart);
infoWindow.__mcoords = labelPt;
infoWindow.show(map.toScreen(labelPt));
});
}
function makePieChart(node, attributes, showFields) {
var chart = new Chart(node, { margins: { l: 0, r: 0, t: 0, b: 0 } }).
setTheme(CustomTheme).
addPlot("default", { type: "Pie" });
var serieValues = [];
// 属性
var regionName = attributes["STATE_NAME"];
// 要显示字段的长度
var length = showFields.length;
for (var i = 0; i < length; i++) {
serieValues.push({ y: attributes[showFields[i]], legend: showFields[i], region: regionName });
}
// 添加信息到饼状图
chart.addSeries(showFields[i], serieValues, { stroke: { color: "black" } });
// 创建一个高亮显示
var anim1 = new Highlight(chart, "default", {
highlight: function (e) {
return "lightskyblue";
}
});
// 创建一个提示
var anim2 = new Tooltip(chart, "default", {
text: function (o) {
var fieldName = o.chart.series[0].data[o.x].legend;
return (o.chart.series[0].data[o.x].region + " " + fieldName + "：" + o.y);
}
});
chart.render();
return chart;
}
});
</script>
</head>
<body class="claro">
<div id="map"></div>
</body>
</html>
## ChartInfoWindow.js
define([
"dojo/_base/declare",
"esri/InfoWindowBase",
"esri/domUtils",
"esri/geometry/Point",
"dojo/_base/lang",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/dom-style",
"dojo/_base/array"
], function (
declare,
InfoWindowBase,
domUtils,
Point,
lang,
domClass,
domConstruct,
domStyle,
array
) {
return declare(
// 父类
InfoWindowBase, {
coords: null,
align: "Middle_Top",
constructor: function (parameters) {
lang.mixin(this, parameters);
isContentShowing = false;
domClass.add(this.domNode, "myInfoWindow");
this._content = domConstruct.create("div", { "class": "content" }, this.domNode);
this._eventConnections = [];
domUtils.hide(this.domNode);
this.isShowing = false;
},
setMap: function (map) {
this.inherited(arguments);
this._eventConnections.push(map.on("pan", lang.hitch(this, this.__onMapPan)));
this._eventConnections.push(map.on("extent-change", lang.hitch(this, this.__onMapExtChg)));
this._eventConnections.push(map.on("zoom-start", lang.hitch(this, this.__onMapZmStart)));
this._eventConnections.push(map.on("zoom", lang.hitch(this, this.onMapZm)));
},
setContent: function (content) {
this.place(content, this._content);
},
move: function (point, isDelta) {
if (isDelta) {
point = this.coords.offset(point.x, point.y);
}
else {
this.coords = point;
if (this.mapCoords) {
this.mapCoords = this.map.toMap(point);
}
}
this._adjustPosition(point);
},
__onMapPan: function (evt) {
this.move(evt.delta, true);
},
onMapZm: function (evt) {
var extent = evt.extent, zoomFactor = evt.zoomFactor, anchor = evt.anchor;
var x = (this.coords.x - anchor.x) * zoomFactor + anchor.x;
var y = (this.coords.y - anchor.y) * zoomFactor + anchor.y;
var newPostion = new Point(x - this.coords.x, y - this.coords.y);
this.move(newPostion, true);
},
__onMapZmStart: function () {},
__onMapExtChg: function (evt) {
var extent = evt.extent, delta = evt.delta, levelChange = evt.levelChange;
var map = this.map, mapPoint = this.mapCoords;
if (mapPoint) {
if (this.isShowing == true) {
this.show(mapPoint);
}
}
else {
var screenPoint;
if (levelChange) {
screenPoint = map.toScreen(this.__mcoords);
}
else {
screenPoint = this.coords.offset(
(delta && delta.x) || 0,
(delta && delta.y) || 0
);
}
if (this.isShowing == true) {
this.show(screenPoint);
}
}
},
show: function (location) {
if (location.spatialReference) {
this.mapCoords = location;
location = this.map.toScreen(location);
}
else {
this.mapCoords = null;
this.coords = location;
if (typeof (this.__mcoords) === "undefined") {
}
}
this._adjustPosition(location);
domUtils.show(this.domNode);
this.isShowing = true;
this.onShow();
},
hide: function () {
domUtils.hide(this.domNode);
this.isShowing = false;
this.onHide();
},
resize: function (width, height) {
domStyle.set(this._content, {
width: width + "px",
height: height + "px"
});
if (this.coords) {
this._adjustPosition(this.coords);
}
},
_adjustPosition: function (location) {
var width = domStyle.get(this._content, "width");
var height = domStyle.get(this._content, "height");
var left = "", top = "";
if (this.align == "Center") {
left = (location.x - width / 2) + "px";
top = (location.y - height / 2) + "px";
}
else {
left = (location.x - width / 2) + "px";
top = (location.y - height) + "px";
}
domStyle.set(this.domNode, {
left: left,
top: top
});
},
destroy: function () {
array.forEach(this._eventConnections, function (handle) {
handle.remove();
});
domConstruct.destroy(this.domNode);
this._closeButton = this._title = this._content = this._eventConnections = null;
}
}
);
});
## CustomTheme.js
define(["dojox/charting/Theme", "dojo/_base/Color"], function (Theme, Color) {
var CustomTheme = new Theme({
chart: {
stroke: null,
fill: "inherit"
},
plotarea: {
stroke: null,
fill: "transparent"
},
axis: {
stroke: null,
majorTick: {
color: "black",
width: 1,
length: 0
},
minorTick: {
color: "#666",
width: 1,
length: 0
},
font: "normal normal normal 0pt Tahoma",
fontColor: "#999",
fill: "transparent"
},
series: {
outline: { width: 10, color: "black" },
stroke: {width:1, color: "red"},
fill: new Color([0x3b, 0x44, 0x4b, 0.85]),
font: "normal normal normal 7pt Tahoma",
fontColor: "#717171"
},
marker: {
stroke: { width: 1, color: "black" },
fill: "#333",
font: "normal normal normal 7pt Tahoma",
fontColor: "black"
},
colors: [
Color.fromRgb("rgb(152,141,194)"),
Color.fromRgb("rgb(126,182,204)"),
Color.fromRgb("rgb(108,217,150)"),
Color.fromRgb("rgb(164,230,90)"),
Color.fromRgb("rgb(242,166,65)")
]
});
return CustomTheme;
});
## geometryUtils.js
define(["esri/geometry/Point", "esri/geometry/Extent"], function (Point, Extent) {
var geometryUtils = {};
/*
得到多边形的质心点
*/
geometryUtils.getPolygonCenterPoint = function (polygon) {
var momentX = 0;
var momentY = 0;
var weight = 0;
var ext = polygon.getExtent();
var p0 = new Point([ext.xmin, ext.ymin]);
for (var i = 0; i < polygon.rings.length; i++) {
var pts = polygon.rings[i];
for (var j = 0; j < pts.length - 1; j++) {
var p1 = polygon.getPoint(i, j);
var p2;
if (j == pts.length - 1) {
p2 = polygon.getPoint(i, 0);
}
else {
p2 = polygon.getPoint(i, j + 1);
}
var dWeight = (p1.x - p0.x) * (p2.y - p1.y) - (p1.x - p0.x) * (p0.y - p1.y) / 2 - (p2.x - p0.x) * (p2.y - p0.y) / 2 - (p1.x - p2.x) * (p2.y - p1.y) / 2;
weight = weight + dWeight;
var pTmp = new Point([(p1.x + p2.x) / 2, (p1.y + p2.y) / 2]);
var gravityX = p0.x + (pTmp.x - p0.x) * 2 / 3;
var gravityY = p0.y + (pTmp.y - p0.y) * 2 / 3;
momentX = momentX + gravityX * dWeight;
momentY = momentY + gravityY * dWeight;
}
}
return new Point(momentX / weight, momentY / weight, polygon.spatialReference);
};
return geometryUtils;
});
类似资料：