ArcGIS && vue

安装ES模块

官方举例

将模块安装到项目中

• 可以从@ arcgis / core安装ArcGIS API for JavaScript的ES模块。

npm install @arcgis/core
//or
yarn add @arcgis/core

配置CSS，在main.js里面引入CSS样式

import '@arcgis/core/assets/esri/themes/dark/main.css';

配置config.json

• Vue与@arcgis/core集成只需要将@arcgis/core/assets文件夹复制到构建中
• 由于在构建过程中，CRA并没有提供一个明确的方法来做到这一点，所以可以借助ncp复制
• ncp：异步递归文件和目录复制的工具
• 安装ncp

npm install ncp 
//or
yarn add ncp 

• 配置config.json

// package.json
{
  "scripts": {
    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets",
    "postinstall": "npm run copy", //yarn用户改为"yarn copy"
    ...
  },
}

• 运行以下命令

npm install
//or
yarn install

示例

注意

• container绑定的元素一定要设置足够地图显示的宽高，不然就会出问题
• 如果将4.18+与框架或构建工具一起使用，并且未使用Dojo 1或RequireJS，则应该使用ES模块进行构建。如果没有就可以使用AMD模块构建