ArcGIS开发基础教程（一）：API及服务器配置

ArcGIS API for JavaScript 安装和配置

ArcGIS API for JavaScript是将地理信息或者地理数据进行可视化表达或者地理分析处理的JS库，可用于浏览器环境和Node.js环境1。要在项目中使用ArcGIS JS API，有下面几种方式。

AMD与ESM

选择API安装方式的前置条件，只做简单介绍。

AMD是”Asynchronous Module Definition”的缩写，意思就是”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

require([module], callback);复制代码

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。

ES Module把一个文件当作一个模块，每个模块有自己的独立作用域，核心点就是模块的导入（import）与导出（export）。

export后只能跟function、class、var、let、const、default、{}，export的作用就是给当前模块对象添加属性，方便后期导入到其他模块中，其中 export default方法最常用。

import命令用于导入其他模块提供的数据，格式：

import from 复制代码API安装的四种方式CDN (AMD)ESM local buildAMD local build不需要安装，配置和本地构建X通过CDN缓存快速下载X可以通过npm快速安装X与大多数现代框架和构建工具无缝集成X使用4.17版本或更早的API与框架或构建工具X使用 Dojo 1 或者 RequireJSX通过CDN提供的AMD模块

访问API的最常见方法是使用托管版本。

复制代码通过NPM提供的ES模块1

API也可以通过npm作为ES模块使用。你可以在本地安装API，以便与React和Vue等JavaScript框架以及webpack等打包器一起使用。

安装

yarn add @arcgis/core复制代码

导入

import Map from “@arcgis/core/Map”;复制代码

配置CSS

复制/node_modules/@arcgis/core/assets到/public/assets文件夹中

配置ArcGIS资源路径为本地路径

import esriConfig from “@arcgis/core/config.js”;esriConfig.assetsPath = “./assets”;复制代码

全局CSS文件中引入ArcGIS本地样式文件

@import “~@arcgis/core/assets/esri/themes/light/main.css”;复制代码在本地托管的AMD模块

修改API中init.js文件和dojo.js文件，将修改好的API部署在自有服务器中，用于网络缺失及网络较差的环境中。

下载

ArcGIS JS API 下载网站

下载分为API和SDK，API包含开发所需的库文件，SDK为离线文档和实例2。

将压缩包解压，复制\arcgis_js_v420_api\arcgis_js_api\javascript\4.20\ 及下面所有内容到托管服务器目录中。例如C:\Inetpub\wwwroot\javascript\api\4.20\

打开 C:\Inetpub\wwwroot\javascript\api\4.20\init.js 搜索 [HOSTNAME_AND_PATH_TO_JSAPI], 并替换为以下字符串 www.example.com/javascript/api/4.20/init.js。

SDK的部署同上。

通过CDN提供的ES模块1

注意：这种方法目前只推荐用于开发和原型阶段。

import Map from “https://js.arcgis.com/4.20/@arcgis/core/Map.js”; // Use the Map class复制代码服务器配置

托管 ArcGIS API for JavaScript 的 Web 服务器将需要注册以下 MIME/type（主要为IIS）。

extensionMIME/typeDescription.ttfapplication/octet-streamTrue Type Fonts.wasmapplication/wasmWebAssembly.woffapplication/font-woffWeb Open Font Format.woff2application/font-woff2WOFF File Format 2.0.wsvapplication/octet-streamSupports SceneView’s stars visualizationFootnotes

版本4.18开始提供。 ↩ ↩2 ↩3

需要配置为离线访问。 ↩