VUE如何引入ArcGis 博客分类： vuearcgis arcgisvue
首先，关于vue+arcgis的博文很少。下面我整理出我所能找到的。
国内：
1.vue-cli&webpack&arcgis API For JS的天坑之路（一） 这个博主一共讲了关于vue+arcgis的3个坑，有兴趣可前往博主那儿看。相关源码：LorryAdmin
*ArcGIS API for JavaScript 与 Vue.js 这篇博文仅仅提及了一下，以及告诉我们上面那篇博文的博主是个女生。
国外：
1.官网：Custom widgets with Vue （如果跟着此教程一步一步来也运行不起来，可以直接打开liveDemo地址把网页保存下来，慢慢看 可以去在线编辑：Sandbox）
2.youtube(Rene Rubalcava)：
Using VueJS with ArcGIS API for JavaScript （简单介绍）
ArcGIS API 4 for JavaScript with vue-cli and Nuxt（非常详细，整个过程都有讲解）
Using Frameworks with the ArcGIS API for JavaScript (在46分，此链接已经定位)
3.github
CreateMap （一个你选择需要叠加的图层之后生成地图的应用）
MapGallery_Vue （一个浏览地图的应用）
---------------------------------------------------------------------------------------------------------------------------------------
以上是相关资料的整合。下面简单介绍一下该如何实现vue+arcgis。（昨天才开始接触vue和arcgis js，错误请指出，谢谢）
**********************以下前提为已有的VUE项目作为基础，所有涉及到的map均为ArcGis的map，而非数据结构的map********************************
1.首先，需要使用“esri-loader”，将esri依赖引入，就像其他各种loader一样。
在应用目录，使用npm安装 esri-loader。运行：npm install esri-loader
<很好，一堆警告，所以我一般不用npm下载依赖。可以使用yarn>
使用yarn：yarn add esri-loader (tips:其实package.json的依赖都可以直接使用yarn 下载的，命令：yarn 或者 yarn install )
2.在你的component文件夹下新建一个新的component：map.vue
1）加入最基本的template，以及加入存放map的一个容器。
<template> <div id="viewDiv"></div> </template>很好，我们已经给map建了一座房子，现在就请arcgis的map进来住吧！
2）在template下面加入script标签，开始写我们的逻辑啦！首先，需要引入esri-loader，esri-loader是把map引入的重要工具。就相当于一辆汽车把arcgis送到我们的房子里面
<template>
<div id="viewDiv"></div>
</template>
<script>
import * as esriLoader from 'esri-loader'
</script>
3）写大体的框架。
<template>
<div id="viewDiv"></div>
</template>
<script>
import * as esriLoader from 'esri-loader'
export deault{
mounted(){}, //我们需要在该组件装载之后做的事情都放在该方法里
methods: {} //我们需要执行的方法都定义在该属性里
}
</script>
4）需要在该vue组件装载完成后，我们需要把esriLoader引入/启动。
<template>
<div id="viewDiv"></div>
</template>
<script>
import * as esriLoader from 'esri-loader'
export deault{
mounted(){
if (!esriLoader.isLoaded()) {//判断是否加载
esriLoader.bootstrap((err) => {//加载esriloader
if (err) {
console.error(err)
}
}, {
url: 'https://js.arcgis.com/4.4/'
})
}
}, //我们需要在该组件装载之后做的事情都放在该方法里
methods: {} //我们需要执行的方法都定义在该属性里
}
</script>
5）既然把需要的东西都引入之后，那么就开始调用构建map的方法了。在methods里面加入创建地图的方法。
过程大致如下：创建一个map，定义好map的相关属性（basemap，地图样式等），再定义一个MapView，设置相关的属性（缩放级别，中心点等），然后view指定一个容器（div），再把前面定义好的map放入即可。
首先，创建一个createMap() 方法，然后和ArcGis Js api一样，用dojo引入依赖。这里，我们需要WebMap（这里为了方便演示效果，就使用WebMap）和普通的MapView依赖。
1.加入需要的依赖
<template>
<div id="viewDiv"></div>
</template>
<script>
import * as esriLoader from 'esri-loader'
export deault{
mounted(){
if (!esriLoader.isLoaded()) {//判断是否加载
esriLoader.bootstrap((err) => {//加载esriloader
if (err) {
console.error(err)
}
}, {
url: 'https://js.arcgis.com/4.4/'
})
}
}, //我们需要在该组件装载之后做的事情都放在该方法里
methods: {
createMap: function () {
esriLoader.dojoRequire([
'esri/WebMap',
'esri/views/MapView'
],(WebMap, MapView) => { })
}
} //我们需要执行的方法都定义在该属性里
}
</script>
2.创建webmap。使用id方式创建webMap<template>
<div id="viewDiv"></div>
</template>
<script>
import * as esriLoader from 'esri-loader'
export deault{
mounted(){
if (!esriLoader.isLoaded()) {//判断是否加载
esriLoader.bootstrap((err) => {//加载esriloader
if (err) {
console.error(err)
}
}, {
url: 'https://js.arcgis.com/4.4/'
})
}
}, //我们需要在该组件装载之后做的事情都放在该方法里
methods: {
createMap: function () {
esriLoader.dojoRequire([
'esri/WebMap',
'esri/views/MapView'
],(WebMap, MapView) => {
var webmap = new WebMap({
portalItem: { // autocasts as new PortalItem()
id: "effddc6863f64f92a38b850e567d1fcb"
}
});
})
}
} //我们需要执行的方法都定义在该属性里
}
</script>
3.创建view并将webmap放入view中<template>
<div id="viewDiv"></div>
</template>
<script>
import * as esriLoader from 'esri-loader'
export deault{
mounted(){
if (!esriLoader.isLoaded()) {//判断是否加载
esriLoader.bootstrap((err) => {//加载esriloader
if (err) {
console.error(err)
}
}, {
url: 'https://js.arcgis.com/4.4/'
})
}
}, //我们需要在该组件装载之后做的事情都放在该方法里
methods: {
createMap: function () {
esriLoader.dojoRequire([
'esri/WebMap',
'esri/views/MapView'
],(WebMap, MapView) => {
var webmap = new WebMap({
portalItem: { // autocasts as new PortalItem()
id: "effddc6863f64f92a38b850e567d1fcb"
}
});
var view = new MapView({
container: 'viewDiv', //需要放入哪个div中
center: [113.75, 23.04], //地图的中心点
zoom: 15, //缩放级别
locale: 'zh-cn', //语言
map:webmap
}) ;
})
}
} //我们需要执行的方法都定义在该属性里
}
</script>
6）在mouted中调用createMap方法：<template>
<div id="viewDiv"></div>
</template>
<script>
import * as esriLoader from 'esri-loader'
export deault{
mounted(){
if (!esriLoader.isLoaded()) {//判断是否加载
esriLoader.bootstrap((err) => {//加载esriloader
if (err) {
console.error(err)
}else{
this.createMap(); //加载esriLoader没有错误则调用
}
}, {
url: 'https://js.arcgis.com/4.4/'
})
}else{
this.createMap(); //已加载esriLoader则调用
}
}, //我们需要在该组件装载之后做的事情都放在该方法里
methods: {
createMap: function () {
esriLoader.dojoRequire([
'esri/WebMap',
'esri/views/MapView'
],(WebMap, MapView) => {
var webmap = new WebMap({
portalItem: { // autocasts as new PortalItem()
id: "effddc6863f64f92a38b850e567d1fcb"
}
});
var view = new MapView({
container: 'viewDiv', //需要放入哪个div中
center: [113.75, 23.04], //地图的中心点
zoom: 15, //缩放级别
locale: 'zh-cn', //语言
map:webmap
}) ;
})
}
} //我们需要执行的方法都定义在该属性里
}
</script>
<style scoped>
@import url('https://js.arcgis.com/4.4/esri/css/main.css');
#viewDiv {
height: 1000px;
width: 100%;
}
</style>
**************************最后，忘记，需要设置一下容器div的样式，以及引入arcgis的css************<style scoped>
@import url('https://js.arcgis.com/4.4/esri/css/main.css');
#viewDiv {
height: 1000px;
width: 100%;
}
</style>
tada！总之效果如下。再总之。其实和普通的js引入arcgis就是多了一个esri-loader。其他没变。但是呢，普通的arcgis js 我没有用过。
