如何入门 ArcGIS JS？
ArcGIS JS入门
一、ArcGIS API for JavaScript简介
ArcGIS API for JavaScript是一款由Esri公司开发的用于创建WebGIS应用的JavaScript库，它允许开发者通过调用ArcGIS Server的REST API，将地图资源和其他资源（如ArcGIS Online）嵌入到Web应用中，ArcGIS API for JavaScript提供了丰富的功能，包括页面布局、地图图层、空间坐标转换、要素符号、专题图、属性查询、空间分析、三维场景、小部件和渲染器等。
二、开发环境准备
1. 前端代码编辑工具
ArcGIS for Js沙盒：可以在[https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=map_create](https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=map_create)访问。
CodePen：一款前端所见即所得的工具，支持在线编辑制作前端页面，并提供了所有常见的js、css库，同时支持流行技术如SASS。
2. 本地部署
离线配置：可以使用IIS、Nginx或Apache服务器进行本地部署，具体步骤可以参考官方文档。
跨域问题解决：如果遇到跨域问题，可以通过CORS解决法来处理。
三、基本使用
1. 创建一个简单应用
要创建一个GIS地图应用程序，需要遵循以下步骤：
1、创建页面HTML代码；
2、引用ArcGIS API for JavaScript和样式表；
3、加载模块；
4、确保DOM可用；
5、创建地图；
6、定义页面内容；
7、设置页面样式。
主要代码如下：
<!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. 切片地图服务图层
ArcGISTiledMapServiceLayer类用于引用ArcGIS Server暴露的切片（缓存）地图服务，这种类型的对象使用已经缓存过的切片地图集合，所以性能得以改善。
<!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: [-118, 34.5],
zoom: 8,
basemap: "topo"
});
var tiledLayer = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map.addLayer(tiledLayer);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>四、数据与视图分离
1. 数据与视图分离的概念
数据与视图分离是现代Web开发中的一种重要设计思想，它将界面展示和数据处理分开，从而提高了代码的可维护性和可扩展性，在ArcGIS API for JavaScript中，数据通常指的是地图的各种图层（如底图、高程图层、可操作图层等），而视图则是指这些数据如何在地图上展示（如弹窗、符号、渲染器等）。
2. Map类的基本属性
底图与高程图层：底图是地图的基础背景，可以是切片地图服务图层或其他类型的图层，高程图层用于表示地形的高度信息。
可操作图层：包括各种GIS服务和常用图层，如动态地图服务图层、要素图层等，这些图层可以进行交互操作，如点击、查询等。
3. View的基本属性
View的基本属性包括中心点、缩放级别、旋转角度等，通过设置这些属性，可以控制地图的显示范围和视角。
var view = new esri.views.SceneView({
container: "viewDiv",
map: map,
center: [-118, 34.5],
zoom: 13,
popup: {
autoOpenEnabled: false
}
});4. View的弹窗
弹窗是一种常见的用户交互方式，用于显示特定位置的信息，可以为不同的图层定制弹窗内容。
var layer = new ArcGISDynamicMapServiceLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services...",
id: "other-dynamic-map-layer"
});
layer.on("click", function(event) {
var popup = new Popup({
location: event.mapPoint,
title: "Location Information",
content: "This is a sample popup."
});
view.ui.add(popup, "top-right");
popup.startup();
});
map.add(layer);五、空间分析
1. Task类基础
Task类是一切分析的基础类，提供了执行各种GIS任务的方法，常见的Task类包括查询任务（QueryTask）、查找任务（FindTask）、地理处理任务（GeoprocessingTask）等。
var queryTask = new esri.tasks.QueryTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services...");
queryTask.execute(query).then(function(results) {
console.log(results);
});2. 基于几何引擎类的空间分析
几何引擎类提供了丰富的几何操作方法，如缓冲区分析、相交分析等，这些方法可以用于复杂的空间分析任务。
var bufferParams = new esri.geometry.support.BufferParameters(); bufferParams.geometries = [point]; bufferParams.distances = [1000]; // 1 kilometer buffer bufferParams.unit = esri.geometry.Units.KILOMETERS; bufferParams.outSpatialReference = view.spatialReference; view.graphics.addMany(results);
3. 网络分析简介
网络分析用于解决路径规划、最近设施等问题，ArcGIS API for JavaScript提供了NetworkAnalysisTask类来进行网络分析。
var naTask = new esri.tasks.NetworkAnalysisTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services...");
var params = new esri.tasks.Support.RouteParameters();
params.stops = [fromStop, toStop];
naTask.solve(params).then(function(results) {
console.log(results);
});4. 空间查询之Query/Find/Identity操作
空间查询用于根据空间关系筛选要素，常用的空间查询操作包括QueryTask、FindTask和IdentityOperation。
var query = new esri.tasks.support.Query();
query.where = "OBJECTID = 1";
queryTask.execute(query).then(function(results) {
console.log(results);
});六、符号与渲染
符号与渲染是地图可视化的重要组成部分，ArcGIS API for JavaScript提供了多种符号和渲染器，可以满足不同的可视化需求。
1. 二维与三维符号
二维符号用于平面地图上的要素展示，而三维符号则用于三维场景中的要素展示，通过设置不同的符号类型，可以实现多样化的视觉效果。
var simpleMarkerSymbol = {
type: "simple-marker", // autocasts as SimpleMarkerSymbol
color: null, // optional, defaults to Esri colors if not specified here or in style section below
size: "8px", // optional, defaults to "10px"
outline: { // optional
color: [255, 0, 0], // optional, defaults to white ([255,255,255])
width: 2 // optional, defaults to 1
}
};2. 渲染器的种类与用法
渲染器用于定义要素的显示风格，常见的渲染器包括唯一值渲染器（UniqueValueRenderer）、分类渲染器（ClassBreaksRenderer）等，通过设置不同的渲染器，可以根据要素的属性值来改变其显示样式。
var renderer = new esri.renderers.SimpleRenderer(new esri.symbol.SimpleFillSymbol()); layer.renderer = renderer; map.add(layer);
七、小部件（Widgets）简介及其应用实例
小部件是预构建的用户界面组件，可以方便地集成到Web应用中，ArcGIS API for JavaScript提供了多种小部件，如比例尺（Scalebar）、导航工具（Navigation）、图层切换器（LayerSwitcher）等，还可以结合前端框架（如React、Vue）自定义小部件。
1. 小部件简介及其应用实例
比例尺：用于显示当前地图的比例尺，可以通过简单的配置添加到地图中。
var scalebar = new esri.widgets.Scalebar({
map: map,
scalebarStyle: "widgets/ScaleBar/scaleBarNeutral.css" // optional CSS overrides, path can be relative or absolute URLs.
});
view.ui.add(scalebar, {
position: "bottom-left", // default is bottom-left, other options include 'bottom-right', 'top-right', and 'top-left'
index: 0 // optional, positions widget within the UI container, defaults to zero which places it before all other widgets in the UI container.
});导航工具：提供平移、缩放等功能，方便用户浏览地图，可以通过配置按钮图标和功能来定制导航工具。
var navigation = new esri.widgets.Navigation({map: map});
view.ui.add(navigation, {position: "top-right"});图层切换器：允许用户动态添加或移除图层，可以设置为悬浮窗体或嵌入到UI容器中。
var layerListWidget = new esri.widgets.LayerList({map: map, view: view});
view.ui.add(layerListWidget, {position: "top-right"});八、常见问题解答栏目及答案解析
Q1: ArcGIS API for JavaScript是否支持离线部署？如何配置？
A1: 是的，ArcGIS API for JavaScript支持离线部署，可以通过以下步骤进行配置：
1、下载SDK：从Esri官网下载ArcGIS API for JavaScript的SDK。
2、解压文件：将下载的压缩包解压到一个合适的目录。
3、修改路径：在项目中引入解压后的JS和CSS文件。<link rel="stylesheet" href="path/to/jsapi/css/jsapi.css">和<script src="path/to/jsapi/js/jsapi.js"></script>。
4、解决跨域问题：如果遇到跨域问题，可以通过CORS解决法来处理，具体方法是在服务器响应头中添加Access-Control-Allow-Origin字段。
Q2: ArcGIS API for JavaScript如何与其他前端框架（如React、Vue）结合使用？有哪些注意事项？
A2: ArcGIS API for JavaScript可以与其他前端框架结合使用，但需要注意以下几点：
1、生命周期管理：确保在框架组件的正确生命周期阶段初始化和销毁地图和视图对象，在React中使用componentDidMount和componentWillUnmount方法。
2、状态管理：合理管理地图和视图的状态，避免不必要的重新渲染，可以使用框架的状态管理工具（如Redux、Vuex）来集中管理状态。
3、异步加载：由于ArcGIS API for JavaScript是基于Dojo框架构建的，其模块加载机制可能与其他框架有所不同，建议使用动态import()语法或按需加载的方式来引入模块，以提高性能。
小伙伴们，上文介绍了“arcgis js 入门”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
暂无评论，1人围观