1、加载常见的地图服务，主要包括天地图、arcgis地图、高德以及百度地图。
实现方法均在独立的js(mapServer.ts)文件中，在使用时调用对应的方法即可。
1)按需引入api
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import WMTS from 'ol/source/WMTS';
import TileWMS from 'ol/source/TileWMS';
import TileImage from "ol/source/TileImage";
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import TileGrid from "ol/tilegrid/TileGrid";
import { get as getProjection } from 'ol/proj';
import { getTopLeft, getWidth } from 'ol/extent';
2)定义常量
//定义一些常量
const projection = getProjection('EPSG:3857');
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = new Array(18);
const matrixIds = new Array(19);
for (let z = 0; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
// 天地图的tk
const tk = '7786923a385369346d56b966bb6ad62f';
// 百度地图参数
const resolutions2 = [];
for (let z = 0; z < 19; ++z) {
resolutions2[z] = Math.pow(2, 18 - z);
}
let tilegrid = new TileGrid({
origin: [0, 0],
resolutions: resolutions2
});
3)图层删除方法
//底图图层和注记图层
let baseLayer: any = null;
let labelLayer: any = null;
//移除图层
const removeMapLayer = (map: any) => {
if (baseLayer) {
map.removeLayer(baseLayer);
baseLayer = null;
}
if (labelLayer) {
map.removeLayer(labelLayer);
labelLayer = null;
}
};
4)加载天地图
const addTdtWmtsLayer = (map:any, url:string, key:string, layerName:string, matrixSet:string, format:string,flag:string) => {
let source = new WMTS({
url: `${url}?tk=${tk}`,
layer: layerName,
matrixSet: matrixSet,
format: format,
projection: projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
style: 'default',
wrapX: true,
crossOrigin: 'anonymous'
})
if (flag === "base") {
baseLayer = new TileLayer({
source: source
});
map.addLayer(baseLayer);
} else {
labelLayer = new TileLayer({
source: source
});
map.addLayer(labelLayer);
}
};
// 天地图卫星影像地图服务
const tdtImageMap = (map:any) => {
addTdtWmtsLayer(map, 'http://t0.tianditu.gov.cn/img_w/wmts', tk, 'img', 'w', 'tiles', 'base');
}
// 天地图影像注记地图服务
const tdtImageLabelMap = (map: any) => {
addTdtWmtsLayer(map, 'http://t0.tianditu.gov.cn/cia_w/wmts', tk, 'cia', 'w', 'tiles', 'label');
};
// 天地图矢量底图地图服务
const tdtVecMap = (map: any) => {
addTdtWmtsLayer(map, 'http://t0.tianditu.gov.cn/vec_w/wmts', tk, 'vec', 'w', 'tiles', 'base');
};
// 天地图矢量注记地图服务
const tdtVecLabelMap = (map: any) => {
addTdtWmtsLayer(map, 'http://t0.tianditu.gov.cn/cva_w/wmts', tk, 'cva', 'w', 'tiles', 'label');
};
5)加载arcgis和高德地图
const addXYZLayer = (map: any, url: string) => {
let source = new XYZ({
url: url,
wrapX: true,
crossOrigin: 'anonymous'
})
baseLayer = new TileLayer({
source: source
});
map.addLayer(baseLayer);
}
// arcgis卫星影像地图服务
const arcgisImageMap = (map:any)=> {
addXYZLayer(map,'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');
}
// arcgis矢量底图+注记地图服务
const arcgisVecMap = (map:any)=> {
addXYZLayer(map,'https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}');
}
// 高德卫星影像地图服务
const gdImageMap = (map:any)=> {
addXYZLayer(map,'https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}');
}
// 高德矢量底图地图服务
const gdVecMap = (map: any) => {
addXYZLayer(map, 'https://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}');
};
6)加载百度地图
// 百度影像地图服务
const bdImageMap = (map: any) => {
let source = new TileImage({
projection: projection,
tileGrid: tilegrid,
tileUrlFunction: (tileCoord, pixelRatio, proj) =>{
if (!tileCoord) {
return "";
}
let z:number = tileCoord[0];
let x:number = tileCoord[1];
let y:number = -tileCoord[2]-1;
if (x < 0) {
x = "M" + (-x);
}
if (y < 0) {
y = "M" + (-y);
}
return "http://shangetu1.map.bdimg.com/it/u=x="+x+";y="+y+";z="+z+";v=009;type=sate&fm=46";
},
crossOrigin: 'anonymous'
})
baseLayer = new TileLayer({
source: source
});
map.addLayer(baseLayer);
}
// 百度影像注记地图服务
const bdImageLabelMap = (map:any) => {
let source = new TileImage({
projection: projection,
tileGrid: tilegrid,
tileUrlFunction: function(tileCoord, pixelRatio, proj) {
if (!tileCoord) {
return "";
}
let z = tileCoord[0];
let x = tileCoord[1];
let y = -tileCoord[2]-1;
if (x < 0) {
x = "M" + (-x);
}
if (y < 0) {
y = "M" + (-y);
}
return "http://online1.map.bdimg.com/tile/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=sl&v=020";
},
crossOrigin: 'anonymous'
})
labelLayer = new TileLayer({
source: source
});
map.addLayer(labelLayer);
}
// 百度矢量底图地图服务
const bdVecMap = (map:any) => {
let source = new TileImage({
projection: projection,
tileGrid: tilegrid,
tileUrlFunction: function(tileCoord, pixelRatio, proj) {
if (!tileCoord) {
return "";
}
let z = tileCoord[0];
let x = tileCoord[1];
let y = -tileCoord[2]-1;
if (x < 0) {
x = "M" + (-x);
}
if (y < 0) {
y = "M" + (-y);
}
return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";
},
crossOrigin: 'anonymous'
})
baseLayer = new TileLayer({
source: source
});
map.addLayer(baseLayer);
}
2、实现效果(百度卫星影像+注记)
项目地址：github.com/DLFouge/vue…
欢迎指正与star
