ArcGis api配合vue开发入门系列(一)引入arcgis api以及加载地图

3,247 阅读1分钟

正文


首先和传统的开发一样我们需要引入他的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'底图。