vue 引入 esri-loader 并加载地图

记录一下：

npm i esri-loader

引入css

在app.vue中

<style>
@import url('https://js.arcgis.com/4.6/esri/css/main.css');
</style>

新建js文件

在js文件中引入esri-loader

并加载其init.js文件

加载init.js 需要其中的loadScript

部分如下：

import * as esriLoader from 'esri-loader';async loadScript() {await esriLoader.loadScript({url: 'https://js.arcgis.com/4.14/init.js',});
}

async loadInit () {this.loadScript()let that = this;await esriLoader.loadModules(this.gisModules, gisOptions).then(this.loading).then(obj => {that.mapEsri = obj;}).catch(err => {console.error(err.message);});
}

map.js文件放置在文章最后

加载地图vue页面文件：

<div id="mapContainer" class="map-container"> </div>import mapApi from "@/utils/map";mapApi.mapInit("mapContainer", () => {mapApi.createTileLayer('baselayer_arcgis', 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer', { visible: false });mapApi.showBaseMap(["vec_w", "cva_w"], true);
});

map.js文件如下：

import * as esriLoader from 'esri-loader';
import mapConfig from './mapConfig';
class MapApi {constructor() {this.map = null;this.view = null;this.views = [];this.curBaseMap = null;this.popup = {};this.mapEsri = null;// this.geometryService = mapConfig.geometryService;this.measurementWidget = null;this.sketchView = null;this.gisModules = ["esri/Map",// views"esri/views/MapView",// layers"esri/layers/TileLayer","esri/layers/WebTileLayer","esri/layers/MapImageLayer","esri/layers/GraphicsLayer",// graphic"esri/Graphic",// geometry"esri/geometry/Point","esri/geometry/Polyline",// tasks"esri/tasks/GeometryService","esri/tasks/IdentifyTask","esri/tasks/support/IdentifyParameters","esri/tasks/support/LengthsParameters","esri/tasks/support/AreasAndLengthsParameters",// widgets"esri/widgets/Fullscreen","esri/widgets/Fullscreen/FullscreenViewModel","esri/widgets/Sketch","esri/widgets/Sketch/SketchViewModel","esri/widgets/DistanceMeasurement2D","esri/widgets/AreaMeasurement2D",];}async loadScript() {await esriLoader.loadScript({url: 'https://js.arcgis.com/4.14/init.js',});}async loadInit () {this.loadScript()let that = this;const gisOptions = {// url: mapConfig.esriJsUrl,// css: mapConfig.esriCssUrl};await esriLoader.loadModules(this.gisModules, gisOptions).then(this.loading).then(obj => {that.mapEsri = obj;}).catch(err => {console.error(err.message);});}loading (args) {let modules = {};for (let n in args) {let name = mapApi.gisModules[n].split('/').pop();modules[name] = args[n];}return modules;}/*** 初始化地图* @param {string} mapId 地图容器id* @param {function} onLoadComplete 地图加载完毕后回调*/mapInit (mapId, onLoadComplete) {let that = this;console.log('nihao')console.log('setInterval',that.mapEsri)let mapEsriTimer = setInterval(() => {if (that.mapEsri && Object.keys(that.mapEsri).length == this.gisModules.length) {clearInterval(mapEsriTimer);that.map = new that.mapEsri.Map();// 创建二维地图that.view = new that.mapEsri.MapView({container: mapId,map: that.map,center: mapConfig.mapCenter,zoom: mapConfig.mapZoom,padding: {top: 0},});// 地图缩放及旋转约束that.view.constraints = {minZoom: mapConfig.mapMinZoom,maxZoom: mapConfig.mapMaxZoom,rotationEnabled: false // 地图旋转};// 清除地图底部内容（powered by ESRI）that.view.ui.remove('attribution');// 移除默认的zoom部件that.view.ui.remove('zoom');that.views.push(that.view);// 加载完毕回调if (onLoadComplete) onLoadComplete();}}, 10);}// 获取所有图层getLayers () {return this.map.layers.items;}/*** 根据图层id获取图层* @param {string} layerId 图层id* @return {object} 图层*/getLayerById (layerId) {if (!layerId) return;const layer = this.map.findLayerById(layerId);if (layer) {return layer;}}/*** 创建瓦片图层* @param {string} layerId 图层id* @param {string} layerUrl 图层地址* @return {object} option 配置项*/createTileLayer (layerId, layerUrl, option) {if (!option) option = {};let tileLayer = new this.mapEsri.TileLayer({id: layerId,url: layerUrl,title: option.title || "",maxScale: Array.isArray(option.scale) && option.scale.length > 0 ? option.scale[0] : 0,minScale: Array.isArray(option.scale) && option.scale.length > 0 ? option.scale[1] : 0,visible: option.visible == undefined ? true : option.visible,listMode: option.listMode == undefined ? "show" : option.listMode});this.map.add(tileLayer)}/*** 底图展示* @param {(string | array)} layerTypes 底图类型  * @param {boolean} layerSwitch 图层切换，默认为false * google(m:矢量 s:影像 t:地形 h:影像标注)  * tianditu(墨卡托投影[vec_w:矢量底图 cva_w:矢量注记 img_w:影像底图 cia_w:影像注记 ter_w:地形底图 cta_w:地形注记 ibo_w:境界(省级以上) eva_w:矢量英文注记 eia_w:影像英文注记])  * tianditu(经纬度投影[vec_c:矢量底图 cva_c:矢量注记 img_c:影像底图 cia_c:影像注记 ter_c:地形底图 cta_c:地形注记 ibo_c:境界(省级以上) eva_c:矢量英文注记 eia_c:影像英文注记])*/showBaseMap (layerTypes, layerSwitch) {const that = this;const google = ["m", "s", "t", "h"];const tianditu = ["vec_w", "cva_w", "img_w", "cia_w", "ter_w", "cta_w", "ibo_w", "eva_w", "eia_w", "vec_c", "cva_c", "img_c", "cia_c", "ter_c", "cta_c", "ibo_c", "eva_c", "eia_c"];hideLayer();if (typeof layerTypes === "string") {showLayer(layerTypes);} else if (typeof layerTypes === "object" && Array.isArray(layerTypes)) {layerTypes.forEach(item => {showLayer(item);});}// 获取底图idfunction getLayerId (sType) {if (google.indexOf(sType) != -1) {that.curBaseMap = "google";} else if (tianditu.indexOf(sType) != -1) {that.curBaseMap = "tianditu";}let layerId = "basemap_" + that.curBaseMap + "_" + sType;return layerId;}// 隐藏其他底图function hideLayer () {if (layerSwitch) {let layers = that.getLayers();let keepLayers = [];layers.forEach(item => {if (item.id.indexOf("basemap") != -1) {if (typeof layerTypes === "string") {item.id == getLayerId(layerTypes) ? item.visible = true : item.visible = false;} else if (typeof layerTypes === "object" && Array.isArray(layerTypes)) {item.visible = false;layerTypes.forEach(i => {if (item.id == getLayerId(i)) keepLayers.push(item);});}}});keepLayers.forEach(item => {item.visible = true;})}}// 展示底图function showLayer (sType) {const layerId = getLayerId(sType);let baseMap = that.getLayerById(layerId);if (!baseMap) {let gMap;switch (that.curBaseMap) {case "google":if (sType == "t") {gMap = new that.mapEsri.WebTileLayer({"urlTemplate": "http://mt{subDomain}.google.cn/maps/vt?lyrs=" + sType + "@132,r&hl=zh-CN&gl=CN&x={col}&y={row}&z={level}","id": layerId,"listMode": 'hide',"subDomains": ["0", "1", "2"]});} else {gMap = new that.mapEsri.WebTileLayer({"urlTemplate": "http://mt{subDomain}.google.cn/maps/vt?lyrs=" + sType + "&hl=zh-CN&gl=CN&x={col}&y={row}&z={level}","id": layerId,"listMode": 'hide',"subDomains": ["0", "1", "2"]});}break;case "tianditu":gMap = new that.mapEsri.WebTileLayer({"urlTemplate": "http://{subDomain}.tianditu.com/DataServer?T=" + sType + "&x={col}&y={row}&l={level}&tk=a8ceffa313eb053d916f4ae995493f5a","id": layerId,"listMode": 'hide',"subDomains": ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]});break;}that.map.add(gMap);}}}/*** 创建专题图层【MapImageLayer】* @param {string} layerId 图层id* @param {string} layerUrl 图层地址 * @param {object} option 图层可选参数* @return {object} 专题图层对象*/createImageLayer (layerId, layerUrl, option) {if (!option) option = {};let imageLayer = new this.mapEsri.MapImageLayer({id: layerId,url: layerUrl,title: option.title || "",spatialReference: option.spatialReference || { wkid: 4326 },dpi: 96,opacity: typeof option.opacity == "number" ? option.opacity === 0 ? 0 : option.opacity : 1,maxScale: Array.isArray(option.scale) && option.scale.length > 0 ? option.scale[0] : 0,minScale: Array.isArray(option.scale) && option.scale.length > 0 ? option.scale[1] : 0,visible: option.visible == undefined ? true : option.visible,listMode: option.listMode == undefined ? "show" : option.listMode});if (option.sublayers) imageLayer.sublayers = option.sublayers;return imageLayer;}
}const mapApi = new MapApi();setInterval(() => {mapApi.loadInit();
}, 1);export default mapApi;window['mapApi'] = mapApi;