First of all, there are very few blog posts about vue+arcgis. Below I've sorted out what I was able to find.
domestic:
1. The road to Tiankeng of vue-cli&webpack&arcgis API For JS (1) This blogger has talked about 3 pits about vue+arcgis. If you are interested, you can go to the blogger to see it. Related source code: LorryAdmin
* The ArcGIS API for JavaScript and Vue.js blog post only mentions and tells us that the blogger of the above blog post is a girl.
foreign:
1. Official website: Custom widgets with Vue (If you follow this tutorial step by step and it doesn't work, you can directly open the liveDemo address to save the web page, and you can go to the online editor: Sandbox )
2.youtube(Rene Rubalcava)：
Using VueJS with ArcGIS API for JavaScript (a brief introduction)
ArcGIS API 4 for JavaScript with vue-cli and Nuxt (very detailed, the whole process is explained)
Using Frameworks with the ArcGIS API for JavaScript (at 46 points, this link has been located)
3.github
CreateMap (an application that generates a map after you select layers to overlay)
MapGallery_Vue (an app for browsing maps)
---------------------------------------------------------------------------------------------------------------------------------------
The above is the integration of relevant information. The following is a brief introduction to how to implement vue+arcgis. (I only started to contact vue and arcgis js yesterday, please point out the mistakes, thank you)
************************ The following premise is based on the existing VUE project, and all the maps involved are ArcGis maps, not data structure maps ********************************
1. First, you need to use "esri-loader" to import esri dependencies, just like other loaders.
In the application directory, use npm to install esri-loader. Run: npm install esri-loader
<Fine, a bunch of warnings, so I generally don't use npm to download dependencies. You can use yarn>
Use yarn: yarn add esri-loader (tips: In fact, package.json dependencies can be downloaded directly using yarn, command: yarn or yarn install )
2. Create a new component in your component folder: map.vue
1) Add the most basic template and a container for storing the map.
<template> <div id="viewDiv"></div> </template>Very good, we have built a house for map, now let the map of arcgis come in and live!
2) Add the script tag under the template and start writing our logic! First of all, esri-loader needs to be introduced, esri-loader is an important tool for introducing map. It's like a car bringing arcgis to our house
<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. Create a webmap. Create webMap using id method
<template>
<div id="viewDiv"></div>
</template>
<script>
import * as esriLoader from 'esri-loader'
export deault{
mounted(){
if (!esriLoader.isLoaded()) {//Determine whether to load
esriLoader.bootstrap((err) => {//加载esriloader
if (err) {
console.error(err)
}
}, {
url: 'https://js.arcgis.com/4.4/'
})
}
}, //Everything we need to do after the component is loaded is placed in this method
methods: {
createMap: function () {
esriLoader.dojoRequire([
'esri/WebMap',
'esri/views/MapView'
],(WebMap, MapView) => {
var webmap = new WebMap ({
portalItem: { // autocasts as new PortalItem()
id: "effddc6863f64f92a38b850e567d1fcb"
}
});
})
}
} //The methods we need to execute are defined in this property
}
</script>
3. Create a view and put the webmap into the view
<template>
<div id="viewDiv"></div>
</template>
<script>
import * as esriLoader from 'esri-loader'
export deault{
mounted(){
if (!esriLoader.isLoaded()) {//Determine whether to load
esriLoader.bootstrap((err) => {//加载esriloader
if (err) {
console.error(err)
}
}, {
url: 'https://js.arcgis.com/4.4/'
})
}
}, //Everything we need to do after the component is loaded is placed in this method
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', //Which div needs to be placed in
center: [113.75, 23.04], //The center point of the map
zoom: 15, // zoom level
locale: 'zh-cn', //language
map:webmap
}) ;
})
}
} //The methods we need to execute are defined in this property
}
</script>
6) Call the createMap method in mouted:
<template>
<div id="viewDiv"></div>
</template>
<script>
import * as esriLoader from 'esri-loader'
export deault{
mounted(){
if (!esriLoader.isLoaded()) {//Determine whether to load
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', //Which div needs to be placed in
center: [113.75, 23.04], //The center point of the map
zoom: 15, // zoom level
locale: 'zh-cn', //language
map:webmap
}) ;
})
}
} //The methods we need to execute are defined in this property
}
</script>
<style scoped>
@import url('https://js.arcgis.com/4.4/esri/css/main.css');
#viewDiv {
height: 1000px;
width: 100%;
}
</style>
****************************Finally, forget, you need to set the style of the container div, and the css that introduces arcgis******* ***** is added at the end. As to why the container's div is not set to 100%, I can't find a reason why the adaptive height here doesn't show the map. Anyone who has trouble setting the adaptive height, please leave a message, Thx~
<style scoped>
@import url('https://js.arcgis.com/4.4/esri/css/main.css');
#viewDiv {
height: 1000px;
width: 100%;
}
</style>
tada! In short, the effect is as follows. Anyway. In fact, the introduction of arcgis with ordinary js is an additional esri-loader. Nothing else has changed. However, I have not used ordinary arcgis js.
Above code: github