ArcGis api配合vue開發入門系列（一）引入arcgis api以及載入地圖

正文

---

首先和傳統的開發一樣我們需要引入他的js檔案和css檔案，但是因為我們是用vue來開發，所以傳統的通過標籤的方式來引入的方法不適用了，arcgis官網給我提供了一個工具"esriLoader"，這是他的npm地址esri-loader。

Install

npm install --save esri-loader

引入之後在元件裡面定義一個地圖的容器，這裡可以使用id或者vue的ref來繫結。下面我把這個元件的程式碼貼出來。

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

<script>
import Vue from 'vue'
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: 7
          });
          Vue.prototype.$map = map;
        }
      );
  },

  computed: {},

  methods: {}
};
</script>
<style scoped>
@import url('https://js.arcgis.com/3.27/esri/css/esri.css');
.map {
  width: 100%;
  height: 100vh;
}
</style>
複製程式碼

需要注意的就是引入arcgis api的js之後還需要在css裡面引入他的樣式檔案。 這裡我們載入的底圖是arcgis自帶的底圖，如果需要載入天地圖或者自己釋出的底圖的話，這裡就不用設定basemap,通過載入一個底圖服務它會自己把它作為底圖。具體的載入方法我會在下一篇文章給大家展示。

下面這張圖就是我們載入的'streets'底圖。