openlayers6加载各种地图服务

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;
}