您现在的位置是：网站首页> 编程资料编程资料

Vue+ ArcGIS JavaScript APi详解_vue.js_

2023-12-09 204人已围观

简介 Vue+ ArcGIS JavaScript APi详解_vue.js_

版本

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

demo地址

https://gitee.com/wolf_pro/vue_arcgis4.22.git

到此这篇关于Vue+ ArcGIS JavaScript APi的文章就介绍到这了,更多相关Vue+ ArcGIS JavaScript APi内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：node+vue前后端分离实现登录时使用图片验证码功能_vue.js_

下一篇：React.memo 和 useMemo 的使用问题小结_React_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网