安裝 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>