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>