地理信息系统（GIS）系列——ArcGIS 开发的各种示例
2024-06-07 03:52:06
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);});// 如果没有现实图层设置为-1if (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 watchPositionif (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 graphicvar pt = new Point(location.coords.longitude, location.coords.latitude);if (!graphic) {addGraphic(pt);} else { // move the graphic if it already existsgraphic.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 servicevar optionsArray = [];optionsArray[3] = drawingOptions;layer.setLayerDrawingOptions(optionsArray);app.map.addLayer(layer);// create a check box for each map layerarrayUtils.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 boxvar 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 changedfunction 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 pointvar 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 inurlUtils.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 maplayers: [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.jsdefine(["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.jsdefine(["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.jsdefine(["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;
});
地理信息系统（GIS）系列——ArcGIS 开发的各种示例相关推荐
- 【地理信息系统GIS专业的10个发展方向：】
[地理信息系统GIS专业的10个发展方向:] 职业生涯规划中的路径选择,首先要知道自己在哪儿,要去哪儿--这是给自己的所在地和目的地定位.所在地的定位没什么问题,能考上大学的人,差不多都对自己的知识和 ...
- 地理信息系统 (GIS, Geographic Information System)
地理信息系统 (GIS, Geographic Information System) 是一种基于计算机的工具,它可以对在地球上存在的东西和发生的事件进行成图和分析. GIS 技术把地图这种独特的视觉 ...
- 地理信息系统学习笔记——地图开发相关介绍
最近看了一些地图开发的文章,在此做一下记录. 估计很大一部分人认为地图开发就是基于高德地图.百度地图.腾讯地图结合自己的业务进行二次开发,这只是一个方面.在这些地图上做的二次开发仅仅是方便用户导航到自 ...
- 计算机英语摘要,英语翻译摘要地理信息系统 (GIS,Geographic Information System) 是一种基于计算机的工具...
共回答了19个问题采纳率:78.9% the event which on the Earth it may to which have the thing and occurs to carry o ...
- 地理信息系统GIS和增强现实技术AR
阿里萨德博士 阿里萨德博士有着30年在科技.金融以及销售领域中的工作经验,在英国曼彻斯特大学完成其生物物理学博士学位后,以一名科学研究者的身份效力于美国斯坦福大学.在斯坦福大学研究期间发布了20多份科 ...
- 地理信息系统软件工程与应用开发实验报告
空间信息工程研究所 1 Arcpy简介 Python因其免费.开源性和跨平台等特点,成为ArcGIS地理处理中的脚本语言.在ArcGIS中使用脚本处理数据可以划分为两种基本方式:一种是将脚本添加到模型 ...
- 【地理信息系统GIS】教案（七章全）第七章：3S技术综合应用
文章目录 第一节 3S技术概述 第二节 GIS与RS的综合应用 第三节 GIS与GPS的综合应用 第四节 网络GIS的综合应用 第一节 3S技术概述 1．什么是"3S" 技术? 遥 ...
- GIS专业和计算机专业,地理信息系统(GIS)学校推荐与专业就业
"我想申请GIS!"咨询室里对面坐着的女孩这么告诉我.然而当我问及"你知道GIS是做什么的吗?",女孩摇了摇头.很多同学在出国留学准备过程中,因为专业的选择而苦 ...
- 【地理信息系统GIS】教案（七章全）第二章：地理信息系统数据结构及数据获取
文章目录 第一节 地理空间及其表达 第二节 空间数据采集 第三节 属性数据采集 第四节 空间数据格式转换 第五节 空间数据质量 第一节 地理空间及其表达 1.1 地理空间 地理空间上至大气电离层,下至 ...
- Delphi快速开发本机跨平台Google Maps谷歌地理信息系统GIS解决方案
如果您想在FMX和VCL应用程序中具有地图功能,则应通过TMSSoftware检出高级WebGMaps组件. WebGMaps具有什么功能? 通过设置WebGMaps组件,您可以轻松地在FMX或VCL ...
最新文章
- 钻井缸套排量_川庆钻探||合理化建议成果展示：用陶瓷代替金属，缸套使用寿命延长了10倍...
- DWZ(JUI) 教程 跨域请求 iframeNavTab
- 还不会ts？一文带你打开ts的大门
- 【转】05.Dicom 学习笔记-DICOM C-Echo 消息服务
- KAFKA SpringBoot2 Nacos 消息异步发送和消费消息（进阶篇）
- android标签打印,Android TSC热敏标签打印机打印
- Android编译系统介绍
- C3P0组件+DbUtils组件实现一个JdbcUtils工具类
- JTAG to AXI Master的API函数读写操作
- sip账号服务器,如何解决“sip账号未登录” ？
- ICG博弈_威佐夫博弈（Wythoff Game）及证明
- 转载]“无法打开Internet站点 已终止操作”的解决方法
- java程序员必备英语词汇_java程序员常用英文单词整理
- 《剑指offter》
- 大数据案例--电信日志分析系统
- Warren E Buffett
- Linux入门第三天——linux命令（二）
- 视频编解码之常见GOP结构
- 【Golang】欲入此Go先看Go的基本语法
- XShell 传输文件至Linux 状态显示错误