arcgis api 4.1X 加载地图（arcgis地图、天地图---封装好的js）
程序员文章站
2022-07-02 12:28:56
...
1、加载arcgis自带的地图
loadMap.js
import * as esriLoader from "esri-loader";
import Vue from 'vue'
export const loadMap = {}
loadMap.mapView = ""
loadMap.map = ""
loadMap.load = {}
/*
mapId>>装地图的盒子id
type>>地图类型>>
"topo","streets","satellite ","hybrid","dark-gray",
"gray","national-geographic","oceans","osm","terrain",
"dark-gray-vector","gray-vector","streets-vector",
"streets-night-vector","streets-navigation-vector",
"topo-vector","streets-relief-vector",
*/
// 加载地图
loadMap.init = function (mapId, type = "topo") {
console.log('这是Vue.prototype', Vue.prototype);
var loading = Vue.prototype.$loading({ // 声明一个loading对象
lock: true, // 是否锁屏
text: '地图加载中...', // 加载动画的文字
spinner: 'el-icon-loading', // 引入的loading图标
background: 'rgba(0, 0, 0, 0.3)',
})
esriLoader.loadModules([
"esri/Map", "esri/views/MapView", "esri/widgets/BasemapGallery"
]).then(([Map, MapView, BasemapGallery]) => {
var map = new Map({
basemap: type,
});
var view = new MapView({
container: mapId,
map: map,
zoom: 4,
center: [116.20, 39.56] // longitude, latitude
});
view.when((res) => {
loading.close()
console.log('这是view', view);
loadMap.load[mapId] = true
loadMap.mapView = view
loadMap.map = map
}, (err) => {
loading.close()
})
view.ui.remove("zoom");
})
}
//监测地图是否加载完成
loadMap.isLoad = function (mapId, fun) {
setTimeout(function () {
if (loadMap.load[mapId]) {
fun()
} else {
loadMap.isLoad(mapId, fun);
}
}, 500)
}
2、加载天地图（basetile)
createOtherMap3D.js
import * as esriLoader from "esri-loader";
/*
***id: "天地图矢量"
***id: "天地图矢量注记"
***id: "天地图影像"
***id: "天地图影像注记"
*/
export const createOtherMap3D = {}
createOtherMap3D.mapObj = {}
createOtherMap3D.view={}
createOtherMap3D.mapIsLoad = {}
createOtherMap3D.toCreateOtherMap = function (mapId) {
esriLoader
.loadModules(["esri/geometry/SpatialReference", "esri/geometry/Extent", "esri/views/SceneView", "esri/WebMap", "esri/Map", "esri/layers/BaseTileLayer", "esri/request", "esri/widgets/ScaleBar"])
.then(([SpatialReference, Extent, SceneView, WebMap, Map, BaseTileLayer, esriRequest, ScaleBar]) => {
var MyTileLayer = BaseTileLayer.createSubclass({
// properties of the custom tile layer
properties: {
urlTemplate: null,
},
// override getTileUrl()
// generate the tile url for a given level, row and column
getTileUrl: function (level, row, col) {
return this.urlTemplate.replace("{z}", level).replace("{x}", col).replace("{y}", row);
},
// override fetchTile() method to process the data returned
// from the server.
fetchTile: function (level, row, col, options) {
// call getTileUrl method to construct the Url for the image
// for given level, row and column
var url = this.getTileUrl(level, row, col);
// request for the tile based on the url returned from getTileUrl() method.
// the signal option ensures that obsolete requests are aborted.
return esriRequest(url, {
responseType: "image",
signal: options && options.signal
})
.then(function (response) {
// when esriRequest resolves successfully,
// process the image that is returned
var image = response.data;
var width = this.tileInfo.size[0];
var height = this.tileInfo.size[0];
// create a canvas with a filled rectangle
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
// Apply the color provided the the layer to the fill rectangle
if (this.tint) {
context.fillStyle = this.tint.toCss();
context.fillRect(0, 0, width, height);
// apply multiply blend mode to canvas' fill color and the tile
// returned from the server to darken the tile
context.globalCompositeOperation = "multiply";
}
context.drawImage(image, 0, 0, width, height);
return canvas;
}.bind(this));
}
});
var MapTileLayer = new MyTileLayer({
//矢量墨卡托图层
urlTemplate: "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=f5f540e277f65383edab9a2804e7eb2d",
title: "天地图矢量3D",
id: "天地图矢量3D"
});
var AnoTileLayer = new MyTileLayer({
//矢量注记层
urlTemplate: "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=f5f540e277f65383edab9a2804e7eb2d",
title: "天地图矢量注记3D",
id: "天地图矢量注记3D"
});
var MapImageTileLayer = new MyTileLayer({
//影像图层
urlTemplate: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=f5f540e277f65383edab9a2804e7eb2d",
//tint: new Color("#004FBB"),
title: "天地图影像3D",
id: "天地图影像3D",
visible: false
});
var AnoImageTileLayer = new MyTileLayer({
//矢量注记层
urlTemplate: "http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=f5f540e277f65383edab9a2804e7eb2d",
title: "天地图影像注记3D",
id: "天地图影像注记3D",
visible: false
});
// add the new instance of the custom tile layer the map
var map = new WebMap({
// layers: [MapImageTileLayer, AnoImageTileLayer],
layers: [MapTileLayer, AnoTileLayer, MapImageTileLayer, AnoImageTileLayer],
ground: "world-elevation",
});
map.when(() => {
console.log('这是四个天地图地图加载好了', map);
createOtherMap3D.mapIsLoad[mapId] = true
createOtherMap3D.mapObj[mapId] = map
}).catch((err) => {
console.log('这是err', err);
})
var view = new SceneView({
container: mapId,
map: map,
center: [-101.17, 21.78]
});
// var view = new SceneView({
// container: mapConfig.mapId,
// map: map,
// center: mapConfig.center,
// });
createOtherMap3D.view[mapId]=view
// view.zoom = 3; // Sets the LOD to 3 (small map scale)
// view.zoom = 11; // Sets the LOD to 18 (large map scale)
console.log('这是view11111111111111111111', view);
view.goTo({
center: [109.75, 19.22],
zoom: 9,
tilt: 30,
heading: 360
});
// 移动zoom位置
view.ui.move("zoom", "bottom-right");
// 设置view视图padding
view.ui.padding = { top: 15, left: 15, right: 15, bottom: 15 };
})
}
/* 等待地图加载完成 */
createOtherMap3D.tillLoadedMap = function (mapId, fun) {
setTimeout(() => {
if (createOtherMap3D.mapIsLoad[mapId]) {
console.log('这是看看什么时候有createOtherMap.mapIsLoad[mapId]', createOtherMap3D.mapIsLoad[mapId]);
// console.log('这是createOtherMap.mapIsLoad[mapId]', createOtherMap.mapIsLoad[mapId]);
fun()
} else {
// console.log('这是createOtherMap.mapIsLoad[mapId]',createOtherMap.mapIsLoad[mapId]);
createOtherMap3D.tillLoadedMap(mapId, fun)
}
}, 500)
}
// 展示隐藏地图（） //通过id控制layer的展示和隐藏
createOtherMap3D.layerShowAndHidden = function (map, id, bool) {
if (map.findLayerById(id)) {
map.findLayerById(id).visible = bool
}
}
3、加载天地图（webtile)
createOtherMap3D2.js
import * as esriLoader from "esri-loader";
export const createOtherMap3D2 = {}
createOtherMap3D2.mapObj = {}
createOtherMap3D2.view={}
createOtherMap3D2.mapIsLoad = {}
createOtherMap3D2.toCreateOtherMap = function (mapId) {
esriLoader
.loadModules(["esri/layers/WebTileLayer",
"esri/Map",
"esri/Basemap",
"esri/widgets/BasemapToggle",
"esri/views/SceneView"
])
.then(([WebTileLayer, Map, Basemap, BasemapToggle, SceneView]) => {
var mapBaseLayer = new WebTileLayer({
urlTemplate: "http://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=f5f540e277f65383edab9a2804e7eb2d",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
copyright: '天地图影像图'
});
var anoBaseLayer = new WebTileLayer({
urlTemplate: "http://{subDomain}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=f5f540e277f65383edab9a2804e7eb2d",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
copyright: '天地图影像注记'
});
var imgBasemap = new Basemap({
baseLayers: [mapBaseLayer, anoBaseLayer],
title: "影像图",
id: "img_w",
thumbnailUrl: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/0/0/0"
});
var mapBaseLayer_vec = new WebTileLayer({
urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=f5f540e277f65383edab9a2804e7eb2d",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
copyright: '天地图矢量图'
});
var anoBaseLayer_vec = new WebTileLayer({
urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=f5f540e277f65383edab9a2804e7eb2d",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
copyright: '天地图矢量注记'
});
var vecBasemap = new Basemap({
baseLayers: [mapBaseLayer_vec, anoBaseLayer_vec],
title: "矢量图",
id: "cva_w",
thumbnailUrl: "https://stamen-tiles.a.ssl.fastly.net/terrain/10/177/410.png"
});
var map = new Map({
basemap: imgBasemap,
ground: "world-elevation"
});
var view = new SceneView({
container: mapId,
map: map
});
view.constraints = {
minZoom: 8,
maxZoom: 20
};
view.when(function () {
createOtherMap3D2.mapIsLoad[mapId] = true
createOtherMap3D2.mapObj[mapId] = map
createOtherMap3D2.view[mapId]=view
var toggle = new BasemapToggle({
titleVisible: true,
view: view,
nextBasemap: vecBasemap
});
view.ui.add(toggle, "bottom-right");
view.on('double-click', function (evt) {
evt.stopPropagation();
});
// 控制鼠标缩放
view.on('mouse-wheel', function (evt) {
//鼠标滚轮缩小
if (evt.deltaY > 0 && view.scale > 9000000) {
evt.stopPropagation();
return false;
}
//鼠标滚轮放大
else if (evt.deltaY < 0 && view.scale < 4000) {
evt.stopPropagation();
return false;
}
if ((evt.deltaY > 0 && view.scale > 9000000) || (evt.deltaY < 0 && view.scale < 2000)) {
console.info(view.scale);
console.info(evt);
}
});
});
})
}
/* 等待地图加载完成 */
createOtherMap3D2.tillLoadedMap = function (mapId, fun) {
setTimeout(() => {
if (createOtherMap3D2.mapIsLoad[mapId]) {
console.log('这是看看什么时候有createOtherMap.mapIsLoad[mapId]', createOtherMap3D2.mapIsLoad[mapId]);
// console.log('这是createOtherMap.mapIsLoad[mapId]', createOtherMap.mapIsLoad[mapId]);
fun()
} else {
// console.log('这是createOtherMap.mapIsLoad[mapId]',createOtherMap.mapIsLoad[mapId]);
createOtherMap3D2.tillLoadedMap(mapId, fun)
}
}, 500)
}
// 展示隐藏地图（） //通过id控制layer的展示和隐藏
createOtherMap3D2.layerShowAndHidden = function (map, id, bool) {
if (map.findLayerById(id)) {
map.findLayerById(id).visible = bool
}
}
vue中调用
import { loadMap } from "@/assets/js/loadMap";
import { createOtherMap3D } from "@/assets/js/loadTianDiTu";
import { createOtherMap3D2 } from "@/assets/js/loadTianDiTu2";
// 加载arcgis 自带的地图
// loadMap.init("mapId", "streets-night-vector");
// 加载basetile 加载的天地图
// createOtherMap3D.toCreateOtherMap("mapId")
// 加载webtile 加载的天地图
createOtherMap3D2.toCreateOtherMap("mapId");
createOtherMap3D2.tillLoadedMap("mapId", () => {
console.log("这是createOtherMap3D2.mapObj", createOtherMap3D2.mapObj["mapId"]);
console.log("这是createOtherMap3D2.view", createOtherMap3D2.view["mapId"]);
console.log(
"这是createOtherMap3D2.mapIsLoad",
createOtherMap3D2.mapIsLoad["mapId"]
);
});