arcGis引入vue中

首先创建vue-cli的脚手架

1.npm i -globa vue-cli

2.vue init webpack

3.选择创建自己的vue项目

4.npm install --save esri-loader(very important)

5.在hellowword.vue文件中引入具体代码如下

<template>

<div class="fx"></div>

</template>

<script>

import { loadModules } from 'esri-loader';

export default {

  name: 'web-map',

  mounted() {

    loadModules(['esri/Map', 'esri/views/MapView'], { css: true })

    .then(([ArcGISMap, MapView]) => {

      const map = new ArcGISMap({

        basemap: 'topo-vector'

      });

      this.view = new MapView({

        container: this.$el,

        map: map,

        center: [-118, 34],

        zoom: 8

      });

    });

  },

  beforeDestroy() {

    if (this.view) {

      this.view.container = null;

    }

  }

};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

.fx {

  padding: 0;

  margin: 0;

  width: 1920px;

  height: 1080px;

}

</style>