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