MapService.js 代码 /* 各种地图服务的公共接口 */ 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'; // 定义一些常量 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 }); // 天地图卫星影像地图服务 export function tdtImageMap(map) { return addTdtWmtsLayer(map, 'http://t0.tianditu.gov.cn/img_w/wmts', tk, 'img', 'w', 'tiles'); } // 天地图影像注记地图服务 export function tdtImageLabelMap(map) { return addTdtWmtsLayer(map, 'http://t0.tianditu.gov.cn/cia_w/wmts', tk, 'cia', 'w', 'tiles'); } // 天地图矢量底图地图服务 export function tdtVecMap(map) { return addTdtWmtsLayer(map, 'http://t0.tianditu.gov.cn/vec_w/wmts', tk, 'vec', 'w', 'tiles'); } // 天地图矢量注记地图服务 export function tdtVecLabelMap(map) { return addTdtWmtsLayer(map, 'http://t0.tianditu.gov.cn/cva_w/wmts', tk, 'cva', 'w', 'tiles'); } // 增加天地图WMTS地图服务图层 function addTdtWmtsLayer(map, url, key, layerName, matrixSet, format) { 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' }) let layer = new TileLayer({ source: source }) map.addLayer(layer); return layer; } // 移除某个地图图层 export function removeMapLayer(map, layer) { map.removeLayer(layer); } // arcgis卫星影像地图服务 export function arcgisImageMap(map) { return addXYZLayer(map, 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'); } // arcgis矢量底图+注记地图服务 export function arcgisVecMap(map) { return addXYZLayer(map, 'https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'); } // 高德卫星影像地图服务 export function gdImageMap(map) { return addXYZLayer(map, 'https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'); } // 高德矢量底图地图服务 export function gdVecMap(map) { return addXYZLayer(map, 'https://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'); } // 百度影像地图服务 export function bdImageMap(map) { let source = new TileImage({ projection: projection, tileGrid: tilegrid, tileUrlFunction: function(tileCoord, pixelRatio, proj) { if (!tileCoord) { return ""; } var z = tileCoord[0]; var x = tileCoord[1]; var y = -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' }) let layer = new TileLayer({ source: source }) map.addLayer(layer); return layer; } // 百度影像注记地图服务 export function bdImageLabelMap(map) { let source = new TileImage({ projection: projection, tileGrid: tilegrid, tileUrlFunction: function(tileCoord, pixelRatio, proj) { if (!tileCoord) { return ""; } var z = tileCoord[0]; var x = tileCoord[1]; var 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' }) let layer = new TileLayer({ source: source }) map.addLayer(layer); return layer; } // 百度矢量底图地图服务 export function bdVecMap(map) { let source = new TileImage({ projection: projection, tileGrid: tilegrid, tileUrlFunction: function(tileCoord, pixelRatio, proj) { if (!tileCoord) { return ""; } var z = tileCoord[0]; var x = tileCoord[1]; var 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' }) let layer = new TileLayer({ source: source }) map.addLayer(layer); return layer; } // 增加XYZ格式的地图服务图层 function addXYZLayer(map, url) { let source = new XYZ({ url: url, wrapX: true, crossOrigin: 'anonymous' }) let layer = new TileLayer({ source: source }) map.addLayer(layer); return layer; } // 增加WMS格式的地图服务图层 function addWMSLayer(map, url, layerName) { let source = new TileWMS({ url: url, params: { 'LAYERS': layerName, 'TILED': true }, crossOrigin: 'anonymous' }) let layer = new TileLayer({ source: source }) map.addLayer(layer); return layer; } [code]

openlayers6加载各种地图服务

vip888

MapService.js 代码

/* 
各种地图服务的公共接口 
 */
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';


// 定义一些常量
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) {

此内容登录或注册后可见