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

Posted 2021-05-21 maycpou

代码来自：https://blog.csdn.net/weixin_34261415/article/details/91378280?utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-2.control

<template>

  <div class="wrapper">

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

  </div>

</template>

 

<script>

import esriLoader from "esri-loader";

export default {

  name: "",

 

  components: {},

 

  props: {},

 

  data() {

    return {};

  },

 

  created() {},

 

  mounted() {

    const options = { url: "https://js.arcgis.com/3.27/"  };

    esriLoader

      .loadModules(

        [

          "esri/map"

        ],

        options

      )

      .then(

        ([

          Map

        ]) => {

          let map = new Map(this.$refs.map, {

            backgroundColor: "#eee",

            basemap: \'streets\',

            logo: false,

            slider: false,

            zoom: 7,

            minZoom: 0

          });

        }

      );

  },

 

  computed: {},

 

  methods: {}

};

</script>

<style scoped>

@import url(\'https://js.arcgis.com/3.27/esri/css/esri.css\');

.map {

  width: 100%;

  height: 100vh;

}

</style>