import TileLayer from 'ol/layer/Tile' import WMTS from 'ol/source/WMTS' import WMTSGrid from 'ol/tilegrid/WMTS' import {getWidth, getTopLeft} from 'ol/extent' import {get as getProjection} from 'ol/proj' const gjtdt_tk = "3a8f9b6a2962ca2c84a7b058b8e2957a"; const sdtdt_tk = "a411d823abe2c0412d7f551ce986db7a"; const layerOpacity_default = 1; const layerVisible_default = true; let imgLayer; let vecLayer; let sdtdt_vec; let sdtdt_img; let sdtdt_cia; let maps = []; export function getWMTSGrid(proj) { const tileSizePixels = 256; const projection = getProjection(proj) const projectionExtent = projection.getExtent(); const size = getWidth(projectionExtent) / tileSizePixels const matrixIds = []; const resolutions = []; for (let i = 0; i <= 20; i++) { matrixIds[i] = i; resolutions[i] = size / Math.pow(2, i); } return new WMTSGrid({ origin: getTopLeft(projectionExtent), resolutions: resolutions, matrixIds: matrixIds }); } export function createTDTWMTSLayer(type, proj, opacity, visible) { let layerOpacity = opacity ? opacity : layerOpacity_default; let layerVisible = visible ? visible : layerVisible_default; let projection = getProjection(proj); if (!projection) { return null; } const tileGrid = getWMTSGrid(proj); let layer = new TileLayer({ opacity: layerOpacity, preload: Infinity, source: new WMTS({ url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.gov.cn/' + type + '/wmts?tk=' + gjtdt_tk, // url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/' + type + '/wmts?tk=' + gjtdt_tk, layer: type.substr(0, 3), matrixSet: type.substring(4), format: 'tiles', projection: projection, tileGrid: tileGrid, style: 'default', wrapX: true }), visible: layerVisible }); layer.id = type; return layer; } export function createSDTDTWMTSLayer(url, type, proj, opacity, visible) { let projection = getProjection(proj); if (!projection) { return null; } const tileGrid = getWMTSGrid(proj); let layer = new TileLayer({ opacity: opacity, source: new WMTS({ url: url, layer: type, style: "default", matrixSet: proj, // projection: projection, format: "image/png", tileGrid: tileGrid, wrapX: true }), visible: visible }); layer.id = type; return layer; } export function loadBaseLayer(map, defaultType) { //国家天地图影像 imgLayer = createTDTWMTSLayer("img_c", "EPSG:4490", 1, false); //国家天地图矢量 vecLayer = createTDTWMTSLayer("vec_c", "EPSG:4490", 1, true); //山东天地图矢量(带注记) sdtdt_vec = createSDTDTWMTSLayer("http://www.sdmap.gov.cn/tileservice/SDPubMap?tk="+ sdtdt_tk,"sdvec", "EPSG:4490", 1, true); //山东天地图影像 sdtdt_img = createSDTDTWMTSLayer("http://www.sdmap.gov.cn/tileservice/SdRasterPubMap?tk="+ sdtdt_tk, "sdimg", "EPSG:4490", 1, false); //山东天地图影像注记 sdtdt_cia = createSDTDTWMTSLayer("http://www.sdmap.gov.cn/tileservice/SDRasterPubMapDJ?tk="+ sdtdt_tk, "sdcia", "EPSG:4490", 1, false); map.addLayer(imgLayer); map.addLayer(vecLayer); map.addLayer(sdtdt_vec); map.addLayer(sdtdt_img); map.addLayer(sdtdt_cia); let layers = {name: map.getTarget(), imgLayer, vecLayer, sdtdt_vec, sdtdt_cia, sdtdt_img}; maps.push(layers); } //右下角地图切换点击矢量图事件 export function vecMapClick(name) { maps.forEach((item) => { if (item.name === name) { item.imgLayer.setVisible(false); item.vecLayer.setVisible(true); item.sdtdt_vec.setVisible(true); item.sdtdt_img.setVisible(false); item.sdtdt_cia.setVisible(false); } }) } //右下角地图切换点击影像图事件 export function imgMapClick(name) { maps.forEach((item) => { if (item.name === name) { item.imgLayer.setVisible(true); item.vecLayer.setVisible(false); item.sdtdt_vec.setVisible(false); item.sdtdt_img.setVisible(true); item.sdtdt_cia.setVisible(true); } }) }