使用@arcgis/core本地部署ArcGIS API for JS

一、简介

@arcgis/core官方文档

ArcGIS API for JavaScript是WebGIS开发中非常重要的前端JS库，是浏览器端调用ArcGIS功能所使用的库。

如Arcmap Pro中所使用的创建要素，编辑要素等地图功能，在浏览器端要实现这些功能即需要调用ArcGIS API for JavaScript。

其前端引入方式有两种，一种是esri-loader的模式来引入ArcGIS API的，它请求的是在线的js，所以有时候我们在内网写程序，或者网络条件不好（arcgis api的服务器是在国外），加载在线的api就会很慢

另外一种就是@arcgis/core，它就是把核心的js文件下载到本地，加载耕快速。

二、关于@arcgis/core

ArcGIS API for JavaScript目前最新版本为4.22，在2020年Esri开发者峰会上，官方宣布要对JS API进行改造，以便于现代前端框架、开发工具集成。

ArcGIS API for JavaScript就是ArcGIS软件对外提供的一些通过JS编写的接口，按照官网参考文档说明去调用这些接口实现预期效果。

ArcGIS API for JavaScript的导入方式经历了从"dojo"到"esri-loader"的变化，在4.18版本之后支持了ES Modules模式引入API。

//引入loadModules
import { loadModules } from 'esri-loader';
const options = {
引入ArcGIS API
	url: 'https://js.arcgis.com/4.22/init.js',
	css: 'https://js.arcgis.com/4.22/esri/themes/light/main.css',
};

然后通过async await的异步的方法在需要使用api的函数里里面实例化api的模块：

//处理不同服务类型
asnyc funtction(){
	const [TileLayer, FeatureLayer] = await loadModules(
	['esri/layers/TileLayer', 'esri/layers/FeatureLayer'],
	options,
	);
	.......
}
// 或
loadModules(["esri/Map", "esri/views/MapView", "esri/layers/WMSLayer"], options)
.then(([Map, MapView, WMSLayer]) => {
    ......
}

ES Modules模式引入API引入的方法是@arcgis/core模式，可以实现直接在组件顶部引入所需的API模块，例如：

import Map from '@arcgis/core/Map'; 
import MapView from '@arcgis/core/views/MapView';

然后在组件代码中使用Map和MapView模块了。

三、安装@arcgis/core

npm install @arcgis/core --save-dev

四、拷贝@arcgis/core/assets文件

官方文档

默认情况下，assets文件在运行时从 CDN 加载。默认值：“https://js.arcgis.com/[4.x]/@arcgis/core/assets”

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

目的是可以添加esri的css样式，这样就避免了必须使用网络链接对css文件的在线引用

/node_modules/@arcgis/core/assets文件夹所在位置

拷贝至public下

五、引入资源文件

在main.js中引入@arcgis/core/config和样式文件

import esriConfig from "@arcgis/core/config";
esriConfig.assetsPath = "./assets";
import '@arcgis/core/assets/esri/themes/light/main.css';

六、使用

参考文章
https://www.icode9.com/content-4-1358401.html