Vue+arcgis(1)

研發環境：node

1.創建項目 webgis

命令如下:

vue create webgis

　　

2.引入arcgis庫

cd webgis
npm install  esri-loader@2.14.0 --save-dev 

3. 編寫自己的組件

在components下增加了WebMap.vue組件

代碼如下

<template>
    <div>

    </div>
</template>

<script>
import {loadModules} from 'esri-loader';

export default {
    name: 'webmap',
    mounted(){
        // 懶加載
        loadModules([
            'esri/Map',
            'esri/views/MapView'
        ], {css:true}).then(([ArcGISMap, MapView]) => {

        console.log('112')
        
         const map = new ArcGISMap({
             basemap: 'streets'
        });

         this.view = new MapView({
            container: this.$el,
            map: map,
            center: [118,34],
            zoom: 8
        });

        });
       
    },
    beforeDestroy(){
        if (this.view)
        {
            this.view.container = null;
        }
    }

}
</script>

<style  scoped>
div{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
</style>　　

如果是用arcgis腳手架搭建的，則是另外一種寫法，具體的寫法看官網

 

arcgis VUE搭建快速指導: https://developers.arcgis.com/javascript/latest/guide/vue/

　　

4.在app中引入webmap

代碼如下

<template>
  <div id="app">
     <webmap />
  </div>
</template>

<script>
import webmap from './components/WebMap'
export default {
  name: 'App',
  components: {
    webmap
  }
}
</script>

<style>
html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#app {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>

　　

5.執行npm run serve命令后，即可查看結果如下