1. 首先和传统的开发一样，需要引入js文件和css文件，但是因为是用vue来开发，所以传统的通过标签的方式来引入的方法不适用了，arcgis官网给我们提供了一个工具"esriLoader"，这是他的npm地址esri-loader。（命令：npm install --save esri-loader）
2. 在项目中新建一个arcgis的配置文件，名称叫mapConfig.js（这个名字可以自定义）
/*
arcgis初始化配置
*/
window._base_path = "http://localhost:8860";
window._base_kuangjia = "http://localhost:8860";
window._arcgis_js_apiUrl = "http://localhost:8860/arcgis_js_api/library/4.12/";
window._base_landServer = "";
export function arcgisConfig () {
window.arcgis = {
config: {
proxyUrl: 'http://localhost:8860/arcgis_js_api/library/4.12/init.js',
baseUrl: window._arcgis_js_apiUrl + 'init.js',
dojoUrl: 'http://localhost:8860/arcgis_js_api/library/4.12/dojo',
// offlineMapWkid: 26911,
getBaseUrl: function () {
return this.baseUrl
},
getDojoUrl: function () {
return this.dojoUrl
},
getWkid: function () {
// return this.offlineMapWkid
}
}
}
}
根据自己的api实际部署地址做相应修改
3. 然后新建一个地图的组件mapTwo.vue，代码如下：
<template>
<div>
<div id="viewDiv"></div>
<div id="newmap"></div>
</div>
</template>
<style scoped>
@import url('http://localhost:8860/arcgis_js_api/library/4.12/esri/css/main.css');
#viewDiv {
margin: 20px auto;
border: 1px solid #000;
width: 500px;
height: 400px;
}
</style>
<script>
// js 代码
import arcgisConfig from '../config/mapConfig'
import esriLoader from 'esri-loader';
//
export default {
data () {
return {
name: '测试路由22',
msg: '测试demo2'
}
},
created: function () {
},
mounted: function () {
const _this = this;
this.$nextTick(function () {
_this.test1();
})
},
methods:{
test1:function () {
const options = {
url: "http://localhost:8860/arcgis_js_api/library/4.12/init.js" //本地js资源
};
esriLoader.loadModules ([
"esri/Map",
'esri/views/MapView',
"dojo/_base/array"
],options)
.then (([
Map,
MapView,
array
]) => {
const map = new Map ({
basemap: "streets"
});
const mapview = new MapView ({
container: "viewDiv",
map: map,
zoom: 12,
center: [ 102.7346125, 25.0563901 ]
});
//监听地图比例尺改变事件
mapview.watch('zoom',function (e) {
console.log(window._arcgis_js_apiUrl);
});
}, reason => {
console.log (reason);
});
}
}
}
</script>
4. 然后在路由配置的index.js中添加刚刚新建的地图组件mapTwo.vue
此时在通过命令npm run dev运行项目，在浏览器中访问http://localhost:8091/#/mapTwo，将会打开地图
注意1：仅仅适用上面的代码在ie下运行会报不支持promise
解决办法有很多，这里我就说我自己的处理方法：
1. 需要另外引入https://cdn.polyfill.io/v2/polyfill.min.js，内容如下：
/* 处理ie不支持promise */
(function(undefined) {}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
然后在mapTwo.vue中引入
也可以使用第三方插件bluebird.js，处理（github地址：https://github.com/petkaantonov/bluebird）。
2. 可以借助babel将代码从es6编译成es5
具体实现步骤，请看我的另一篇文章：https://blog.****.net/D_bel/article/details/99290492
注意2：在使用esri-load在chrome浏览器下会正常运行，在ie11浏览器下可能会报一下很奇怪的错误