vue中使用esri-loader加载Arcgisapi for js 4.x版本显示地图的简单demo

4的版本和3的版本差异在于：

（1）3的版本中之需要引入一个map创建一个map对象即可，4的版本必须要一个MapView来配合map才能正常显示效果

（2）用loadModules加载esri/Map，在4的版本中Map为大写，3为小写

 

在使用loadModules加载arcgisapi for js中的模块的时候如果不传入第二个option参数则会去官网找最新的js和css包，当然可以添加opetion参数让esload去自己指定的地址加载arcgisapi for js的包和css文件等。

<template>

  <div class="wrapper">

    <div id="map" class="map"></div>

  </div>

</template>

 

<script>

import esriLoader from "esri-loader";

export default {

  name: "",

 

  components: {},

 

  props: {},

 

  data() {

    return {};

  },

 

  created() {},

 

  mounted() {

    esriLoader.loadModules(["esri/Map","esri/views/MapView"]).then(([Map,MapView]) => {

      const map = new Map({

        basemap: "topo-vector",

      });

 

      const view = new MapView({

        container: "map",

        map: map,

        zoom: 4,

        center: [15, 65], 

      });

    });

  },

 

  computed: {},

 

  methods: {},

};

</script>

<style scoped>

.map {

  width: 100%;

  height: 100vh;

}

</style>