vue+arcgis for js

安装 arcgis 官方依赖 esri-loader,这个只是开发依赖,因此使用命令 npm i esri-loader --save-dev 来安装.

用模块的方式引入 esri-loader;

import esriLoader from 'esri-loader'

esriLoader 有以下几个方法 :
　　1. getScript () 从库里面获取 js 文件 ;
　　2.isLoaded () 检测模块是否加载完成 ;
　　3. loadModules( [ ], options) 用于加载arcgis 模块,
　　4. loadCss( url ) 用于加载css文件
　　5. loadScript({url: "xxxxxxxx" }) 将js 加载到页面上

 

<template>
    <div id="Mapview" style="width:100%;height:850px;"></div>
</template>
<script>
import {
    loadCss,
    loadModules
  } from "esri-loader";
export default {
    data() {
       return   {
　　　　　　gisMap:null,
　　　　　　gisMapView:null, 
          gisModules: [
          "esri/Map", //地图、通用属性
          "esri/views/MapView", 
          ]
       }
    },

　　created() {

      this.initMap();

    },

  methods: {
　　

initMap() {
        let _this = this;


        // loadCss('https://js.arcgis.com/3.27/esri/css/esri.css');
        //loadCss(_this.arcgisApiUrl + "/esri/css/esri.css");
        loadCss(_this.arcgisApiUrl + "/esri/themes/light/main.css");
        loadCss(_this.arcgisApiUrl + "/esri/css/main.css");
        //loadCss(_this.arcgisApiUrl + "/dojo/gislib/app/css/mymain.css");
        loadModules(_this.gisModules, {
            // url:'https://js.arcgis.com/3.27/'
            url: _this.arcgisApiUrl + "/init.js"
          })
          .then(_this.TDTinstance)
          .then(_this.createMap);
      },
      TDTinstance(args) {
        for (let k in args) {
          let name = this.gisModules[k].split("/").pop();
          if (name == "graphic") {
            name = "Graphic";
          } else if (name == "query") {
            name = "Query";
          } else if (name == "request") {
            name = "esriRequest";
          } else if (name == "array") {
            name = "arrayUtils";
          } else if (name == "navigation") {
            name = "Navigation";
          } else if (name == "draw") {
            name = "Draw";
          } else if (name == "config") {
            name = "esriConfig";
          } else if (name == "geometryEngine") {
            name = "GeometryEngine";
          }
          this.gisConstructor[name] = args[k]; //map所需要的对象的声明引用
        }
      },　　

　　　　createMap() {

　　　　　　

　　　　　　let _this = this;

          this.gisMap = new this.gisConstructor.Map({

          });

　　　　　　

　　　　　　this.gisMapView = new this.gisConstructor.MapView({

　　　　　　　　container: "Mapview",

　　　　　　　　map: this.gisMap,

　　　　　　})

　　　　}

　}   
}
</script>