如何入门 ArcGIS JS？

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 入门”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。

原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/681087.html

如何入门 ArcGIS JS？

二、开发环境准备

三、基本使用

四、数据与视图分离

五、空间分析

六、符号与渲染

八、常见问题解答栏目及答案解析

相关推荐

vue的cdn是干嘛的

vue 重定向

Web前端培训：Angular和React，哪个速度更快?

前端框架react入门

vue 修改html

vue 第三方登录

发表回复