版本
Vue 2
ArcGIS JavaScript 4.22
注意 ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差异较大
环境搭建
新建vue
可以使用vue ui创建项目
增加ArcGIS JavaScript 包引用
package.json
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14",
"@arcgis/core":"4.22.2",
"ncp":"^2.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^5.2.3",
"vue-template-compiler": "^2.6.14"
},
ncp: 主要用于拷贝资源信息
@arcgis/core 是arcgis_js仓库
拷贝资源信息
package.json中配置copy命令
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
},
安装完依赖后运行 copy命令
yarn yarn copy yarn serve ------------------- npm i npm run copy npm run serve
运行完copy命令后,会将arcgis相关资源拷贝到public/assets目录下
全局引入
main.js
import '@arcgis/core/assets/esri/themes/light/main.css' import esriConfig from '@arcgis/core/config.js' esriConfig.assetsPath = './assets'
页面测试
helloworld.vue
https://gitee.com/wolf_pro/vue_arcgis4.22.git
到此这篇关于Vue+ ArcGIS JavaScript APi的文章就介绍到这了,更多相关Vue+ ArcGIS JavaScript APi内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
