使用@arcgis/core本地部署ArcGIS API for JS
一、简介
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';