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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM