vue使用arcgis for js

载入arcgis for js

HTML

• 在所需要使用的页面引入init.js和css文件即可

VUE

• 需要引入esri-loader
  可以使用阿里的库来加速下载

npm install esri-loader

• 在需要使用的页面载入功能

 import {loadModules} from 'esri-loader'

其中{}中的方法可以根据需要载入

官方文档

loadModules

loadModules中根据需求载入功能模块

使用方法和在HTML中其实差不多，完整示例如下：

<template>
  <div>
    <div ref="baseMap" class="baseMap"></div>
  </div>
</template>

<script>
  import {loadModules} from 'esri-loader'

  //定义配置项
  const option = {
    url: 'http://gis.weixiuyizhan.com/arcgis_js_api/library/4.11/dojo/dojo.js', // 注释掉就是使用官网的CDN，但是更建议使用离线部署的地址
    logo: false
  };

  export default {
    name: "mapCorrect",
    data() {
      return {
        map: '',
        view: '',
      }
    },
    mounted() {
      const this_ = this;
      loadModules([
        "esri/geometry/geometryEngine",
        "esri/tasks/support/Query",
        "esri/widgets/Sketch/SketchViewModel",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/widgets/Sketch",
        "esri/Map",
        "esri/config",
        "esri/request",
        "esri/Color",
        "esri/layers/BaseTileLayer",
        "esri/views/MapView",
        "esri/layers/GeoJSONLayer",
        "esri/layers/GraphicsLayer",
        "esri/layers/MapImageLayer",
        "esri/views/2d/layers/BaseLayerView2D",
        "esri/layers/Layer",
        "esri/layers/support/TileInfo",
        "esri/symbols/PictureFillSymbol",
        "esri/Graphic",
        'dojo/domReady!'], option)
        .then(([geometryEngine,
                 Query,
                 SketchViewModel,
                 SimpleMarkerSymbol,
                 SimpleFillSymbol,
                 SimpleLineSymbol,
                 Sketch,
                 Map,
                 esriConfig,
                 esriRequest,
                 Color,
                 BaseTileLayer,
                 MapView,
                 GeoJSONLayer,
                 GraphicsLayer,
                 MapImageLayer,
                 BaseLayerView2D,
                 Layer,
                 TileInfo,
                 PictureFillSymbol,
                 Graphic]) => {
         
          this.map = new Map({
            basemap: 'dark-gray',// 底图类型，详见BaseMap类
          });
          this.view = new MapView({
            container: this.$refs.baseMap, // 视图的容器
            map: this.map, // Map的实例放入视图中
            center: [118.805, 32.055], // 初始显示的地图中心点，经纬度
            zoom: 10,// 当前地图缩放等级
          });

         
        }).catch(err => {
        console.log(err)
      })

    },
    methods: {
     
    }
  }
</script>

<style scoped>
  @import "http://gis.weixiuyizhan.com/arcgis_js_api/library/4.11/esri/css/main.css";

  .baseMap {
    height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0;
  }

</style>