300字范文 > 【vue使用@arcgis/core方式开发arcgis for js api地图项目】

【vue使用@arcgis/core方式开发arcgis for js api地图项目】

时间：2020-09-04 05:05:45

vue使用@arcgis/core方式开发arcgis for js api地图项目

注意：在ArcGIS API for JavaScript模块的导入中，也经历了很多的变迁，从“dojo”到“esri-loader”等逐渐的变化。而在4.18版本后，新增了一种全新的模式-@arcgis/core模式，可以实现直接在组件顶部引入所需的API模块，然后在组件代码中使用。

预览 : https://volodyan.github.io/vue_url_arcgis-preview/#/

1.在创建vue项目后，安装@arcgis/core@4.22.2

npm install @arcgis/core@4.22.2

2.在组件中，使用 import 语句加载单个模块

import "@arcgis/core/assets/esri/themes/light/main.css";import Map from "@arcgis/core/Map";import MapView from "@arcgis/core/views/MapView";

全部代码如下：

<template><div class="MapView"><div id="viewDiv"><div id="el-select-theme"><el-selectv-model="theme"placeholder="请选择"@change="BasemapChangeFun"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></div></div></div></template><script>import "@arcgis/core/assets/esri/themes/light/main.css";import Map from "@arcgis/core/Map";import MapView from "@arcgis/core/views/MapView";export default {name: "MapView",data() {return {options: [{value: "dark-gray-vector",label: "vector",},{value: "hybrid",label: "hybrid",},{value: "topo",label: "topo",},{value: "streets",label: "streets",},{value: "dark-gray",label: "dark-gray",},{value: "osm",label: "osm",},{value: "oceans",label: "海洋",},],theme: "",mapview: "",};},mounted() {this.loadArcgisMap();},beforeDestroy() {this.DestroyArcgisMap();},methods: {loadArcgisMap() {const map = new Map({basemap: "topo-vector",});this.mapview = new MapView({container: "viewDiv",map: map,center: [-80, 35],extent: {spatialReference: {latestWkid: 3857,wkid: 102100,},xmin: -59087672,ymin: 4108613,xmax: -43095009,ymax: 8340167,},});this.ponents = []; //清空所有ESRI自带的组件this.mapview.popup.dockEnabled = false;this.mapview.popup.collapseEnabled = false;this.mapview.popup.dockOptions = {buttonEnabled: false,breakpoint: false,position: "bottom-left",}; //禁用停靠this.mapview.popup.actions = null;this.mapview.popup = null;this.mapview.ui.add("el-select-theme", "top-right");},BasemapChangeFun(val) {this.mapview.map.basemap = val;},DestroyArcgisMap() {this.mapview.destroy();this.mapview.map = null;this.mapview.container = null;},},};</script><style lang="scss" scoped>.MapView {width: 100%;height: 100%;#viewDiv {width: 100%;height: 100%;}}</style>

3.执行npm install ncp -g命令，全局安装ncp

npm install ncp -g

4.在package.json文件里修改运行命令,如下：

"serve": "npm run copy && vue-cli-service serve""build": "npm run copy && vue-cli-service build","copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"

package.json如下

{"name": "vue_url_arcgis","version": "0.1.0","private": true,"scripts": {"serve": "npm run copy && vue-cli-service serve","build": "npm run copy && vue-cli-service build","copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"},"dependencies": {"@arcgis/core": "^4.22.2","core-js": "^3.8.3","element-ui": "^2.15.6","vue": "^2.6.14","vue-router": "^3.5.1","vuex": "^3.6.2"},"devDependencies": {"@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-router": "~5.0.0","@vue/cli-plugin-vuex": "~5.0.0","@vue/cli-service": "~5.0.0","sass": "^1.32.7","sass-loader": "^12.0.0","vue-template-compiler": "^2.6.14"},"browserslist": ["> 1%","last 2 versions","not dead"]}