ArcgisForJs快速入门-编程知识

文章目录

0.引言
1.前端代码编辑工具
2.使用ArcgisForJs创建一个简单应用
3.切片地图服务图层
4.动态地图服务图层
5.地图事件

0.引言

ArcGIS API for JavaScript是一款由Esri公司开发的用于创建WebGIS应用的JavaScript库。它允许开发者通过调用ArcGIS Server的REST API，将地图资源和其它资源（如ArcGIS Online）嵌入到Web应用中。ArcGIS API for JavaScript提供了丰富的功能，包括页面布局、地图图层、空间坐标转换、要素符号、专题图、属性查询、空间分析、三维场景、小部件、渲染器等。本文介绍如何快速入门ArcgisForJs。

1.前端代码编辑工具

（1）ArcgisForJs沙盒
ArcgisForJs的代码编写和测试在沙盒中进行。
ArcgisForJs沙盒可以访问： https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=map_create
在这里插入图片描述
（2）代码笔
CodePen（代码笔）一款前端所见即所得的工具，我们可以在线编辑制作前端页面，所见即所得。同时网站提供所有常见的 js、css 库，并且支持流行技术（如 SASS），免去了我们自建平台的麻烦。编辑器网址： https://codepen.io/pen/
在这里插入图片描述

2.使用ArcgisForJs创建一个简单应用

创建任何GIS地图应用程序，都需要遵循一些步骤。假如想让地图成为应用程序的一部分，那么就需要按照这些步骤来执行。需要遵循以下步骤：①创建页面HTML代码；②引用ArcGIS API for JavaScript和样式表；③加载模块；④确保DOM可用；⑤创建地图；⑥定义页面内容；⑦页面样式。
（1）主要代码

<!DOCTYPE html>
<html>  
<head>  <title>Create a Map</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  <link rel="stylesheet" href="https://js.arcgis.com/3.45/dijit/themes/claro/claro.css">  <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css">  <style>  html, body, #mapDiv {  padding: 0;  margin: 0;  height: 100%;  }  </style>  <script src="https://js.arcgis.com/3.45/"></script>  <script>  dojo.require("esri.map");  function init(){  var map = new esri.Map("mapDiv", {  basemap: "topo-vector",  center: [-122.45, 37.75],  zoom: 13  });  }  dojo.ready(init);  </script>  </head>  
<body class="claro">  <div id="mapDiv"></div>  
</body>  
</html>

（2）结果显示
在这里插入图片描述

3.切片地图服务图层

ArcGISTiledMapServiceLayer类使用在当引用ArcGIS Server暴露的切片（缓存）地图服务时。这种类型的对象使用已经缓存过的切片地图集合，所以性能得以改善。
（1）主要代码

<!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>Tiled map service</title>  <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css">  <style>  html, body, #map {  height: 100%; width: 100%; margin: 0; padding: 0;  }  </style>  <script src="https://js.arcgis.com/3.45/"></script>  <script>  var map;  require(["esri/map",  "esri/layers/ArcGISTiledMapServiceLayer",  "esri/geometry/Point",  "esri/SpatialReference",  "dojo/domReady!"],  function(Map, ArcGISTiledMapServiceLayer, Point, SpatialReference) {  map = new Map("map", {  center: new Point(1714791.187457787, 2194882.166227445, new SpatialReference({ wkid: 5936 }))  });  var tiled = new ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/arcgis/rest/services/Polar/Arctic_Imagery/MapServer");  map.addLayer(tiled);  }  );  </script>  </head>  <body>  <div id="map"></div>  </body>  
</html>

（2）结果显示
在这里插入图片描述

4.动态地图服务图层

ArcGISDynamicMapService类用来动态创建ArcGIS Server地图服务。
（1）主要代码

<!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>Create Map and add a dynamic layer</title>  <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css"/>  <style>  html, body, #mapDiv{  padding: 0;  margin: 0;  height: 100%;  }  </style>  <script src="https://js.arcgis.com/3.45/"></script>  <script>  var map;  require([  "esri/map",  "esri/layers/ArcGISDynamicMapServiceLayer",  "esri/layers/ImageParameters"  ], function (  Map, ArcGISDynamicMapServiceLayer, ImageParameters) {  map = new Map("mapDiv", {  sliderOrientation : "horizontal"  });  var imageParameters = new ImageParameters();  imageParameters.format = "jpeg"; // default is PNG8.  //Takes a URL to a non cached map service.  var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer", {  "imageParameters" : imageParameters  });  map.addLayer(dynamicMapServiceLayer);  });  </script>  </head>  <body>  <div id="mapDiv"></div>  </body>  
</html>

（2）结果显示
在这里插入图片描述

5.地图事件

在编程世界里，事件是发生在应用程序中的动作。通常，这些事件通过终端用户触发，包括鼠标单击、鼠标拖拽和键盘动作，但是它还包括数据的发送和接收、组件修改和其他操作。
（1）主要代码

<!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>Select with feature layer</title>  <link rel="stylesheet" href="https://js.arcgis.com/3.45/dijit/themes/tundra/tundra.css">  <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css">  <style>  html, body, #mapDiv {  padding: 0;  margin: 0;  height: 100%;  }  #messages{  background-color: #fff;  box-shadow: 0 0 5px #888;  font-size: 1.1em;  max-width: 15em;  padding: 0.5em;  position: absolute;  right: 20px;  top: 20px;  z-index: 40;  }  </style>  <script src="https://js.arcgis.com/3.45/"></script>  <script>  var map;  require([  "esri/map", "esri/layers/FeatureLayer",  "esri/tasks/query", "esri/geometry/Circle",  "esri/graphic", "esri/symbols/SimpleMarkerSymbol",  "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",  "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"  ], function(  Map, FeatureLayer,  Query, Circle,  Graphic, SimpleMarkerSymbol,  SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,  esriConfig, Color, dom  ) {  map = new Map("mapDiv", {  basemap: "streets-vector",  center: [-95.249, 38.954],  zoom: 14,  slider: false  });  // Add the census block points in on demand mode. An outfield is specified since it is used when calculating   the total population falling within the one mile radius.  var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{  outFields: ["POP2000"]  });  // Selection symbol used to draw the selected census block points within the buffer polygon  var symbol = new SimpleMarkerSymbol(  SimpleMarkerSymbol.STYLE_CIRCLE,  12,  new SimpleLineSymbol(  SimpleLineSymbol.STYLE_NULL,  new Color([247, 34, 101, 0.9]),  1  ),  new Color([207, 34, 171, 0.5])  );  featureLayer.setSelectionSymbol(symbol);  // Make unselected features invisible  var nullSymbol = new SimpleMarkerSymbol().setSize(0);  featureLayer.setRenderer(new SimpleRenderer(nullSymbol));  map.addLayer(featureLayer);  var circleSymb = new SimpleFillSymbol(  SimpleFillSymbol.STYLE_NULL,  new SimpleLineSymbol(  SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,  new Color([105, 105, 105]),  2  ), new Color([255, 255, 0, 0.25])  );  var circle;  // When the map is clicked create a buffer around the click point of the specified distance  map.on("click", function(evt){  circle = new Circle({  center: evt.mapPoint,  geodesic: true,  radius: 1,  radiusUnit: "esriMiles"  });  map.graphics.clear();  var graphic = new Graphic(circle, circleSymb);  map.graphics.add(graphic);  var query = new Query();  query.geometry = circle.getExtent();  // Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.  featureLayer.queryFeatures(query, selectInBuffer);  });  function selectInBuffer(response){  var feature;  var features = response.features;  var inBuffer = [];  // Filter out features that are not actually in buffer, since we got all points in the buffer's bounding box  for (var i = 0; i < features.length; i++) {  feature = features[i];  if(circle.contains(feature.geometry)){  inBuffer.push(feature.attributes[featureLayer.objectIdField]);  }  }  var query = new Query();  query.objectIds = inBuffer;  // Use an objectIds selection query (should not need to go to the server)  featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){  var totalPopulation = sumPopulation(results);  var r = "";  r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";  dom.byId("messages").innerHTML = r;  });  }  function sumPopulation(features) {  var popTotal = 0;  for (var x = 0; x < features.length; x++) {  popTotal = popTotal + features[x].attributes["POP2000"];  }  return popTotal;  }  });  </script>  </head>  <body>  <span id="messages">Click on the map to select census block points within 1 mile.</span>  <div id="mapDiv"></div>  </body>  
</html>

（2）结果显示
在这里插入图片描述

参考资料：
[1] 派普勒[著]张大伟[译]. 《JavaScript构建Web和ArcGIS Server应用实战》; 2015-12-01 [accessed 2024-01-28].
[2] hangge. CodePen - 一个在线的前端代码编辑工具（可用于制作测试页面、代码调试）; 2019-12-02 [accessed 2024-01-28].
[3] . ArcGIS Maps SDK for JavaScript; [accessed 2024-01-28].
[4] . ArcGIS API for JavaScript (legacy) 3.45; [accessed 2024-01-28].
[5] 祥哥哥咩~. arcgis for js图层graphic的鼠标悬浮事件; 2019-04-26 [accessed 2024-01-28].