项目作者: 2037299560

项目描述 :
基于arcgis server js api的基础功能代码
高级语言:
项目地址: git://github.com/2037299560/webgis-.git
创建时间: 2020-06-22T08:44:19Z
项目社区:https://github.com/2037299560/webgis-

开源协议:

下载


webgis-基础代码

基于arcgis server js api的基础功能代码

第二章 Javascript API基础

Arcgis Server api for javascript 的 hello world示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>第一个JavaScript API应用</title>
  6. <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
  7. <style>
  8. html, body, #mapDiv {
  9. padding: 0;
  10. margin: 0;
  11. height: 100%;
  12. }
  13. </style>
  14. <script src="http://js.arcgis.com/3.9/"></script>
  15. <script type="text/javascript">
  16. require(
  17. ["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"], function (Map, ArcGISTiledMapServiceLayer) {
  18. // 以下是创建地图与加入底图的代码
  19. var map = new Map("mapDiv");
  20. var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
  21. var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL, { displayLevels: [0, 1, 2, 3, 4, 5, 6, 7] });
  22. map.addLayer(agoLayer);
  23. });
  24. </script>
  25. </head>
  26. <body class="tundra">
  27. <div id="mapDiv"></div>
  28. </body>
  29. </html>

关键点:

  • 引入css样式文件和 js api文件

  • 设置body标签的class

  • 设置html,body,以及自定义的id为mapDiv的元素的css样式

第三章 页面布局设计

布局小部件综合使用

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>页面布局</title>
  5. <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
  6. <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
  7. <style>
  8. html, body, #main{
  9. width: 100%;
  10. height: 100%;
  11. margin: 0;
  12. }
  13. </style>
  14. <script type="text/javascript">
  15. dojoConfig = {
  16. isDebug: true,
  17. async: true
  18. };
  19. </script>
  20. <script src="http://js.arcgis.com/3.9/"></script>
  21. <script type="text/javascript">
  22. require(["dojo/parser", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer",
  23. "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
  24. "dijit/layout/AccordionContainer", "dojo/domReady!"],
  25. function (parser, Map, ArcGISTiledMapServiceLayer) {
  26. parser.parse();
  27. var map = new Map("mapDiv");
  28. var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
  29. var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL, { displayLevels: [0, 1, 2, 3, 4, 5, 6, 7] });
  30. map.addLayer(agoLayer);
  31. });
  32. </script>
  33. </head>
  34. <body class="tundra">
  35. <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" id="main">
  36. <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"
  37. style="background-color: #b39b86; height: 10%;">
  38. 放置单位或公司标志、本应用系统名称等
  39. </div>
  40. <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:'true'"
  41. style="background-color: #acb386; width: 100px;">
  42. 一般为菜单
  43. </div>
  44. <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"
  45. style="background-color: #f5ffbf; padding: 10px;">
  46. </div>
  47. <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right', splitter:'true'"
  48. style="background-color: #acb386; width: 100px;">
  49. <div id="accordionContainer" data-dojo-type="dijit/layout/AccordionContainer"
  50. style="padding: 0px; overflow: hidden; z-index: 29;">
  51. <div data-dojo-type="dijit/layout/ContentPane" title="查询" style="overflow: hidden;">
  52. <div id="findServicesDiv">
  53. </div>
  54. </div>
  55. <div id="identifyResultsPane" data-dojo-type="dijit/layout/ContentPane" style="overflow: hidden;" title="查询结果">
  56. <div id="resultsDiv">
  57. </div>
  58. <br>
  59. </div>
  60. <div id="parcelResultsPane" data-dojo-type="dijit/layout/ContentPane" title="缓冲区分析">
  61. </div>
  62. <div data-dojo-type="dijit/layout/ContentPane" style="width: 100%" title="图层控制">
  63. <br>
  64. <div id="layerConfigDiv">
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:'true'"
  70. style="background-color: #b39b86; height: 50px;">
  71. 版权信息等
  72. </div>
  73. </div>
  74. </body>
  75. </html>

使用要点:

  • 要在require函数中引入相关模块
  • 在require函数中引入parser模块,并调用paser.parse()来解析页面中的dojo元素
  • 在body元素中设置相应布局部件的属性

第四章 地图与图层

第五章 空间参考系统与几何对象

绘制几何对象

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width,user-scalable=no">
  6. <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7. <title>Maps Toolbar</title>
  8. <link rel="stylesheet" href="https://js.arcgis.com/3.32/dijit/themes/nihilo/nihilo.css">
  9. <link rel="stylesheet" href="https://js.arcgis.com/3.32/esri/css/esri.css">
  10. <style>
  11. html, body, #mainWindow {
  12. font-family: sans-serif;
  13. height: 100%;
  14. width: 100%;
  15. }
  16. html, body {
  17. margin: 0;
  18. padding: 0;
  19. }
  20. #header {
  21. height: 80px;
  22. overflow: auto;
  23. padding: 0.5em;
  24. }
  25. </style>
  26. <script src="https://js.arcgis.com/3.32/"></script>
  27. <script>
  28. var map, toolbar, symbol, geomTask;
  29. require([
  30. "esri/map",
  31. "esri/toolbars/draw",
  32. "esri/graphic",
  33. "esri/symbols/SimpleMarkerSymbol",
  34. "esri/symbols/SimpleLineSymbol",
  35. "esri/symbols/SimpleFillSymbol",
  36. "dojo/parser", "dijit/registry",
  37. "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
  38. "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
  39. ], function(
  40. Map, Draw, Graphic,
  41. SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
  42. parser, registry
  43. ) {
  44. parser.parse();
  45. map = new Map("map", {
  46. basemap: "streets",
  47. center: [-15.469, 36.428],
  48. zoom: 3
  49. });
  50. map.on("load", createToolbar);
  51. registry.forEach(function(d) {
  52. if ( d.declaredClass === "dijit.form.Button" ) {
  53. d.on("click", activateTool);
  54. }
  55. });
  56. function activateTool() {
  57. var tool = this.label.toUpperCase().replace(/ /g, "_");
  58. toolbar.activate(Draw[tool]);
  59. map.hideZoomSlider();
  60. }
  61. function createToolbar(themap) {
  62. toolbar = new Draw(map);
  63. toolbar.on("draw-end", addToMap);
  64. }
  65. function addToMap(evt) {
  66. var symbol;
  67. toolbar.deactivate();
  68. map.showZoomSlider();
  69. switch (evt.geometry.type) {
  70. case "point":
  71. case "multipoint":
  72. symbol = new SimpleMarkerSymbol();
  73. break;
  74. case "polyline":
  75. symbol = new SimpleLineSymbol();
  76. break;
  77. default:
  78. symbol = new SimpleFillSymbol();
  79. break;
  80. }
  81. var graphic = new Graphic(evt.geometry, symbol);
  82. map.graphics.add(graphic);
  83. }
  84. });
  85. </script>
  86. </head>
  87. <body class="nihilo">
  88. <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
  89. <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
  90. <span>Draw:<br /></span>
  91. <button data-dojo-type="dijit/form/Button">Point</button>
  92. <button data-dojo-type="dijit/form/Button">Multi Point</button>
  93. <button data-dojo-type="dijit/form/Button">Line</button>
  94. <button data-dojo-type="dijit/form/Button">Polyline</button>
  95. <button data-dojo-type="dijit/form/Button">Polygon</button>
  96. <button data-dojo-type="dijit/form/Button">Freehand Polyline</button>
  97. <button data-dojo-type="dijit/form/Button">Freehand Polygon</button>
  98. <button data-dojo-type="dijit/form/Button">Arrow</button>
  99. <button data-dojo-type="dijit/form/Button">Triangle</button>
  100. <button data-dojo-type="dijit/form/Button">Circle</button>
  101. <button data-dojo-type="dijit/form/Button">Ellipse</button>
  102. </div>
  103. <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  104. </div>
  105. </body>
  106. </html>

几何绘图工具使用步骤

  1. 地图加载的时候创建绘图工具条
  2. 在绘图按钮的单机事件中激活对应的绘图工具(例如在”点”按钮的单击事件中激活绘制点的工具)
  3. 在工具条的绘制完毕事件中将绘制的几何图形添加到地图的graphics图层中

第六章 符号与图形

第七章 要素图层与专题图

范围专题图

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>范围专题图</title>
  6. <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
  7. <style>
  8. html, body, #map {
  9. height: 100%;
  10. margin: 0;
  11. }
  12. #info {
  13. position: absolute;
  14. right: 0;
  15. top: 0;
  16. font: 14px sans-serif;
  17. background: #fff;
  18. width: 160px;
  19. text-align: center;
  20. border-radius: 0 0 0 10px;
  21. }
  22. </style>
  23. <script src="http://js.arcgis.com/3.9/"></script>
  24. <script>
  25. var map;
  26. require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer",
  27. "esri/InfoTemplate", "esri/renderers/ClassBreaksRenderer", "esri/symbols/SimpleFillSymbol", "esri/dijit/Legend",
  28. "esri/Color", "dojo/domReady!"
  29. ], function (Map, ArcGISTiledMapServiceLayer, FeatureLayer,
  30. InfoTemplate, ClassBreaksRenderer, SimpleFillSymbol, Legend, Color
  31. ) {
  32. map = new Map("map");
  33. var baseMapUrl = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
  34. var baseMap = new ArcGISTiledMapServiceLayer(baseMapUrl);
  35. map.addLayer(baseMap);
  36. var layerUrl = "http://services.arcgis.com/BG6nSlhZSAWtExvp/ArcGIS/rest/services/Demographics_World_Simp/FeatureServer/0";
  37. var layer = new FeatureLayer(layerUrl, {
  38. infoTemplate: new InfoTemplate("${CNTRY_NAME}", "${*}"),
  39. mode: FeatureLayer.MODE_ONDEMAND,
  40. outFields: ["*"]
  41. });
  42. var symbol = new SimpleFillSymbol();
  43. symbol.setColor(new Color([150, 150, 150, 0.5]));
  44. var renderer = new ClassBreaksRenderer(symbol, "POP2007");
  45. renderer.addBreak(0, 10000000, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
  46. renderer.addBreak(10000000, 50000000, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
  47. renderer.addBreak(50000000, 100000000, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
  48. renderer.addBreak(100000000, 500000000, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
  49. renderer.addBreak(500000000, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
  50. layer.setRenderer(renderer);
  51. map.addLayer(layer);
  52. layer.on("load", function () {
  53. var legend = new Legend({
  54. map: map,
  55. layerInfos: [{
  56. layer: layer,
  57. title: "各国人口"
  58. }]
  59. }, "legend");
  60. legend.startup();
  61. });
  62. });
  63. </script>
  64. </head>
  65. <body>
  66. <div id="map"></div>
  67. <div id="info">
  68. <div id="legend"></div>
  69. </div>
  70. </body>
  71. </html>

使用步骤:

  1. 创建要素图层
  2. 创建对应渲染器,并设置渲染器的参数,主要用到了符号(例如 MarkerSymbol, LineSymbol, FillSymbol)
  3. 为要素图层设置渲染器:setRenderer(renderer)
  4. 将要素图层添加至map地图上:map.addLayer(featurelayer)

第八章 空间分析

图形查询属性

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>属性查询图形</title>
  6. <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
  7. <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
  8. <link rel="stylesheet" href="Layout.css" />
  9. <script src="http://js.arcgis.com/3.9/"></script>
  10. <script>
  11. var map, identifyTask, identifyParams;
  12. var pointSym, lineSym, polygonSym;
  13. var layer2results, layer1results, layer0results;
  14. require(["dojo/parser", "dijit/registry", "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolbars/draw",
  15. "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/Color",
  16. "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "esri/geometry/screenUtils",
  17. "dijit/form/Button", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/domReady!"],
  18. function (parser, registry, Map, ArcGISDynamicMapServiceLayer, Draw,
  19. SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color,
  20. IdentifyTask, IdentifyParameters, screenUtils) {
  21. parser.parse();
  22. map = new Map("mapDiv");
  23. var url = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer";
  24. var agoLayer = new ArcGISDynamicMapServiceLayer(url);
  25. map.addLayer(agoLayer);
  26. map.on("load", initIdentify);
  27. var redColor = new Color([255, 0, 0]);
  28. var halfFillYellow = new Color([255, 255, 0, 0.5]);
  29. pointSym = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 10,
  30. new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, redColor, 1),
  31. halfFillYellow);
  32. lineSym = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, redColor, 2);
  33. polygonSym = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
  34. new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, redColor, 2),
  35. halfFillYellow);
  36. map.infoWindow.on("show", function () {
  37. registry.byId("tabs").resize();
  38. });
  39. var tb = new Draw(map);
  40. tb.on("draw-end", doIdentify);
  41. registry.forEach(function (d) {
  42. if (d.declaredClass === "dijit.form.Button") {
  43. d.on("click", activateTool);
  44. }
  45. });
  46. function activateTool() {
  47. var tool = null;
  48. switch (this.label) {
  49. case "点":
  50. tool = "POINT";
  51. break;
  52. case "线":
  53. tool = "POLYLINE";
  54. break;
  55. case "多边形":
  56. tool = "POLYGON";
  57. break;
  58. }
  59. tb.activate(Draw[tool]);
  60. map.hideZoomSlider();
  61. }
  62. function initIdentify(evt) {
  63. // 实例化IdentifyTask
  64. identifyTask = new IdentifyTask(url);
  65. // IdentifyTask参数设置
  66. identifyParams = new IdentifyParameters();
  67. // 冗余范围
  68. identifyParams.tolerance = 3;
  69. // 返回地理元素
  70. identifyParams.returnGeometry = true;
  71. // 进行Identify的图层
  72. identifyParams.layerIds = [2, 1, 0];
  73. // 进行Identify的图层为全部
  74. identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
  75. // 设置infoWindow的大小
  76. evt.map.infoWindow.resize(415, 200);
  77. // 设置infoWindow的标题头
  78. evt.map.infoWindow.setTitle("Identify结果");
  79. evt.map.infoWindow.setContent(registry.byId("tabs").domNode);
  80. }
  81. // 进行Identify
  82. function doIdentify(evt) {
  83. // 清除上一次的高亮显示
  84. map.graphics.clear();
  85. // Identify的geometry
  86. identifyParams.geometry = evt.geometry;
  87. // Identify范围
  88. identifyParams.mapExtent = map.extent;
  89. identifyTask.execute(identifyParams, function (idResults) {
  90. addToMap(idResults, evt.geometry);
  91. });
  92. }
  93. // 在infoWindow中显示Identify结果
  94. function addToMap(idResults, geometry) {
  95. layer2results = { displayFieldName: null, features: [] };
  96. layer1results = { displayFieldName: null, features: [] };
  97. layer0results = { displayFieldName: null, features: [] };
  98. for (var i = 0, il = idResults.length; i < il; i++) {
  99. var idResult = idResults[i];
  100. if (idResult.layerId === 2) {
  101. if (!layer2results.displayFieldName) {
  102. layer2results.displayFieldName = idResult.displayFieldName;
  103. }
  104. layer2results.features.push(idResult.feature);
  105. } else if (idResult.layerId === 1) {
  106. if (!layer1results.displayFieldName) {
  107. layer1results.displayFieldName = idResult.displayFieldName;
  108. }
  109. layer1results.features.push(idResult.feature);
  110. } else if (idResult.layerId === 0) {
  111. if (!layer0results.displayFieldName) {
  112. layer0results.displayFieldName = idResult.displayFieldName;
  113. }
  114. layer0results.features.push(idResult.feature);
  115. }
  116. }
  117. registry.byId("layer2Tab").setContent(layerTabContent(layer2results, "layer2results"));
  118. registry.byId("layer1Tab").setContent(layerTabContent(layer1results, "layer1results"));
  119. registry.byId("layer0Tab").setContent(layerTabContent(layer0results, "layer0results"));
  120. // 设置infoWindow显示
  121. var firstPt;
  122. if (geometry.type == "point")
  123. firstPt = geometry;
  124. else
  125. firstPt = geometry.getPoint(0, 0);
  126. var screenPoint = screenUtils.toScreenPoint(map.extent, map.width, map.height, firstPt);
  127. map.infoWindow.show(screenPoint, map.getInfoWindowAnchor(screenPoint));
  128. }
  129. function layerTabContent(layerResults, layerName) {
  130. var content = "<i>选中要素数目为:" + layerResults.features.length + "</i>";
  131. switch (layerName) {
  132. case "layer2results":
  133. content += "<table border='1'><tr><th>ID</th><th>州名</th><th>面积</th></tr>";
  134. for (var i = 0, il = layerResults.features.length; i < il; i++) {
  135. content += "<tr><td>" + layerResults.features[i].attributes['FID'] + " <a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(显示)</a></td>";
  136. content += "<td>" + layerResults.features[i].attributes['STATE_NAME'] + "</td>";
  137. content += "<td>" + layerResults.features[i].attributes['AREA'] + "</td>";
  138. }
  139. content += "</tr></table>";
  140. break;
  141. case "layer1results":
  142. content += "<table border='1'><tr><th>ID</th><th>名称</th></tr>";
  143. for (var i = 0, il = layerResults.features.length; i < il; i++) {
  144. content += "<tr><td>" + layerResults.features[i].attributes['FID'] + " <a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(显示)</a></td>";
  145. content += "<td>" + layerResults.features[i].attributes['NAME'] + "</td>";
  146. }
  147. content += "</tr></table>";
  148. break;
  149. case "layer0results":
  150. content += "<table border='1'><tr><th>ID</th><th>名称</th><th>州名</th><th>人口</th></tr>";
  151. for (var i = 0, il = layerResults.features.length; i < il; i++) {
  152. content += "<tr><td>" + layerResults.features[i].attributes['FID'] + " <a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(显示)</a></td>";
  153. content += "<td>" + layerResults.features[i].attributes['CITY_NAME'] + "</td>";
  154. content += "<td>" + layerResults.features[i].attributes['STATE_NAME'] + "</td>";
  155. content += "<td>" + layerResults.features[i].attributes['POP1990'] + "</td>";
  156. }
  157. content += "</tr></table>";
  158. break;
  159. }
  160. return content;
  161. }
  162. });
  163. // 高亮显示选中元素
  164. function showFeature(feature) {
  165. map.graphics.clear();
  166. var symbol;
  167. // 将几何对象加入到地图中
  168. switch (feature.geometry.type) {
  169. case "point":
  170. symbol = pointSym;
  171. break;
  172. case "polyline":
  173. symbol = lineSym;
  174. break;
  175. case "polygon":
  176. symbol = polygonSym;
  177. break;
  178. }
  179. feature.setSymbol(symbol);
  180. map.graphics.add(feature);
  181. }
  182. </script>
  183. </head>
  184. <body class="claro">
  185. <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"
  186. style="width:100%; height:100%;">
  187. <!--标题区域-->
  188. <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:50px;">
  189. 属性查询图形
  190. </div>
  191. <!--中间地图区域-->
  192. <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"
  193. style="margin:5px;">
  194. </div>
  195. <!--右边为属性查询与结果显示区域-->
  196. <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'"
  197. style="width:35%;margin:5px;background-color:whitesmoke;">
  198. 输入查询文本
  199. <input id="searchText" value="KS" type="text" />
  200. <input id="findBtn" type="button" value="查 找" />
  201. <div id="contentsContainer"></div>
  202. </div>
  203. </div>
  204. </body>
  205. </html>

查询类工具使用步骤:

  1. 创建相应的工具(需要对应服务的url)
  2. 创建参数对象并填充参数(图形或者是文本参数)
  3. 使用对应的函数执行查询并处理结果

地理编码

  1. require(["dojo/on", "esri/map", "esri/geometry/Extent", "esri/SpatialReference", "esri/layers/ArcGISTiledMapServiceLayer", "esri/InfoTemplate",
  2. "esri/graphic", "esri/geometry/Multipoint", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/TextSymbol", "esri/Color", "esri/tasks/locator", "dojo/domReady!"],
  3. function (on, Map, Extent, SpatialReference, ArcGISTiledMapServiceLayer, InfoTemplate,
  4. Graphic, Multipoint, SimpleMarkerSymbol, TextSymbol, Color, Locator) {
  5. var extent = new Extent(-95.271, 38.933, -95.228, 38.976, new SpatialReference({ wkid: 4326 }))
  6. var map = new esri.Map("map", {
  7. extent: extent
  8. });
  9. var streetMap = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
  10. map.addLayer(streetMap);
  11. var locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
  12. //locator.on("address-to-locations-complete", showResults);
  13. on(document.getElementById("locateBtn"), "click", function () {
  14. locate();
  15. });
  16. function locate() {
  17. map.graphics.clear();
  18. var address = {
  19. SingleLine: document.getElementById("address").value
  20. };
  21. var options = {
  22. address: address,
  23. outFields: ["Loc_name"]
  24. };
  25. locator.addressToLocations(options, showResults);
  26. }
  27. function showResults(candidates) {
  28. var candidates;
  29. var symbol = new SimpleMarkerSymbol();
  30. var infoTemplate = new InfoTemplate("位置", "地址:${address}<br />得分:${score}<br />匹配源:${locatorName}");
  31. symbol.setStyle(SimpleMarkerSymbol.STYLE_DIAMOND);
  32. symbol.setColor(new Color([255, 0, 0, 0.75]));
  33. var points = new Multipoint(map.spatialReference);
  34. for (var i = 0, il = candidates.length; i < il; i++) {
  35. var candidate = candidates[i];
  36. if (candidate.score > 70) {
  37. var attributes = { address: candidate.address, score: candidate.score, locatorName: candidate.attributes.Loc_name };
  38. var graphic = new Graphic(candidate.location, symbol, attributes, infoTemplate);
  39. map.graphics.add(graphic);
  40. map.graphics.add(new Graphic(candidate.location, new TextSymbol(attributes.address).setOffset(0, 8)));
  41. points.addPoint(candidate.location);
  42. }
  43. }
  44. map.setExtent(points.getExtent().expand(3));
  45. }
  46. });

关键步骤:

  • 获取查询所需要的参数(比如目标地址,或者目标位置)
  • 使用参数进行查询

视域分析

  1. require(["dojo/parser", "esri/map", "esri/geometry/Extent", "esri/SpatialReference", "esri/layers/ArcGISTiledMapServiceLayer",
  2. "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/Color",
  3. "esri/tasks/Geoprocessor", "esri/tasks/LinearUnit", "esri/tasks/FeatureSet", "dojo/domReady!"],
  4. function (parser, Map, Extent, SpatialReference, ArcGISTiledMapServiceLayer,
  5. Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color,
  6. Geoprocessor, LinearUnit, FeatureSet) {
  7. parser.parse();
  8. var extent = new Extent(-122.7268, 37.4557, -122.1775, 37.8649, new SpatialReference({ wkid: 4326 }))
  9. var map = new esri.Map("map", {
  10. extent: extent
  11. });
  12. var streetMap = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
  13. map.addLayer(streetMap);
  14. var gp = new Geoprocessor("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Elevation/ESRI_Elevation_World/GPServer/Viewshed");
  15. gp.setOutputSpatialReference({ wkid: 102100 });
  16. map.on("click", computeViewShed);
  17. function computeViewShed(evt) {
  18. map.graphics.clear();
  19. var pointSymbol = new SimpleMarkerSymbol();
  20. pointSymbol.setSize(15);
  21. pointSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1));
  22. pointSymbol.setColor(new dojo.Color([0, 255, 0, 0.25]));
  23. var graphic = new Graphic(evt.mapPoint, pointSymbol);
  24. map.graphics.add(graphic);
  25. var features = [];
  26. features.push(graphic);
  27. var featureSet = new FeatureSet();
  28. featureSet.features = features;
  29. var vsDistance = new LinearUnit();
  30. vsDistance.distance = 15000;
  31. vsDistance.units = "esriMeters";
  32. var params = { "Input_Observation_Point": featureSet, "Viewshed_Distance": vsDistance };
  33. gp.execute(params, drawViewshed);
  34. }
  35. function drawViewshed(results, messages) {
  36. var polySymbol = new SimpleFillSymbol();
  37. polySymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 0, 0.5]), 1));
  38. polySymbol.setColor(new Color([255, 127, 0, 0.7]));
  39. var features = results[0].value.features;
  40. for (var f = 0, fl = features.length; f < fl; f++) {
  41. var feature = features[f];
  42. feature.setSymbol(polySymbol);
  43. map.graphics.add(feature);
  44. }
  45. }
  46. });