OpenLayers6使用天地图“经纬度投影(CGCS2000)”和“球面墨卡托投影(EPSG:3857)”WMTS服务

转自：https://blog.csdn.net/nudtcadet/article/details/102908458

1.封装生成图层类

/**
* @fileOverview 天地图WMTS服务API
* @author <a href=”https://blog.csdn.net/nudtcadet”>老胡</a>
* @version 1.0
*/
import { getWidth, getTopLeft } from 'ol/extent';
import WMTS from 'ol/tilegrid/WMTS';
import { WMTS as WMTSSource } from 'ol/source';
import TileLayer from 'ol/layer/Tile';
import { get as getProjection, getTransform } from 'ol/proj';
import { applyTransform } from 'ol/extent';
 
 
/**
* @description 获得一个OpenLayers框架下的ol/layer/Tile类型天地图图层
* @param {options} Object 初始化参数
* @param {options.type} String 与官方名称相同的图层类型
* @param {options.proj} String 与官方名称相同的投影类型
* @param {options.key} String 开发者秘钥
*/
export function getTianditu(options) {
        let layers = {
                '全球境界': 'ibo',
                '地形注记': 'cta',
                '地形晕渲': 'ter',
                '影像注记': 'cia',
                '影像底图': 'img',
                '矢量注记': 'cva',
                '矢量底图': 'vec'
        }
        let projs = {
                '经纬度投影': 'EPSG:4490',
                '球面墨卡托投影': 'EPSG:900913'
        }
        let matrixSets = {
                '经纬度投影': 'c',
                '球面墨卡托投影': 'w'
        }
        let projection = getProjection(projs[options.proj]);
        let projectionExtent = projection.getExtent();
        let origin = projectionExtent ? getTopLeft(projectionExtent) : [-180, 90];
        let fromLonLat = getTransform('EPSG:4326', projection);
        let width = projectionExtent ? getWidth(projectionExtent) : getWidth(applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat));
        let resolutions = [];
        let matrixIds = [];
        for (let z = 1; z < 19; z++) {
                resolutions[z] = width / (256 * Math.pow(2, z));
                matrixIds[z] = z;
        };
        let wmtsTileGrid = new WMTS({
                origin: origin,
                resolutions: resolutions,
                matrixIds: matrixIds
        });
        let wmtsSource = new WMTSSource({
                url: "http://t0.tianditu.gov.cn/" + layers[options.type] + "_" + matrixSets[options.proj] + "/wmts?tk=" + options.key,
                layer: layers[options.type],
                version: '1.0.0',
                matrixSet: matrixSets[options.proj],
                format: 'tiles',
                projection: projection,
                requestEncoding: 'KVP',
                style: 'default',
                tileGrid: wmtsTileGrid
        });
        let wmtsLayer = new TileLayer({
                source: wmtsSource
        });
        return wmtsLayer
}

---

2.加载经纬度底图

使用CGCS2000坐标系的，网上有很多人使用OpenLayers加载不上这个坐标系，是因为通过Proj4这个库使用EPSG.io上的坐标代码有bug，Proj4.js的加载不上，改用WKT的数据就可以。

import { Map, View } from 'ol';
import { getTianditu } from './js/tianditu'
import { register } from 'ol/proj/proj4';
import proj4 from 'proj4';
 
proj4.defs("EPSG:4490", "GEOGCS[\"China Geodetic Coordinate System 2000\",DATUM[\"China_2000\",SPHEROID[\"CGCS2000\",6378137,298.257222101,AUTHORITY[\"EPSG\",\"1024\"]],AUTHORITY[\"EPSG\",\"1043\"]],PRIMEM[\"Greenwich\",0,AUTHORITY[\"EPSG\",\"8901\"]],UNIT[\"degree\",0.0174532925199433,AUTHORITY[\"EPSG\",\"9122\"]],AUTHORITY[\"EPSG\",\"4490\"]]");
register(proj4);
 
var map = new Map({
        target: "map",
        view: new View({
                center: [116.391478, 39.903185],
                // center: [11936406.337013, 3786384.633134],
                projection: "EPSG:4490",
                zoom: 5,
                maxZoom: 18,
                minZoom: 1
        })
});
var tdt = getTianditu({
        type: '矢量底图',
        // proj: '球面墨卡托投影',
        proj: '经纬度投影',
 
        key: '用你自己的key'
});
var zz = getTianditu({
        type: '矢量注记',
        // proj: '球面墨卡托投影',
        proj: '经纬度投影',
 
        key: '用你自己的key'
})
var jj = getTianditu({
        type: '全球境界',
        // proj: '球面墨卡托投影',
        proj: '经纬度投影',
 
        key: '用你自己的key'
})
map.addLayer(tdt)
map.addLayer(zz)
map.addLayer(jj)

3.加载球面墨卡托投影底图

import { Map, View } from 'ol';
import { getTianditu } from './js/tianditu'
import { register } from 'ol/proj/proj4';
import proj4 from 'proj4';
 
// proj4.defs("EPSG:4490", "GEOGCS[\"China Geodetic Coordinate System 2000\",DATUM[\"China_2000\",SPHEROID[\"CGCS2000\",6378137,298.257222101,AUTHORITY[\"EPSG\",\"1024\"]],AUTHORITY[\"EPSG\",\"1043\"]],PRIMEM[\"Greenwich\",0,AUTHORITY[\"EPSG\",\"8901\"]],UNIT[\"degree\",0.0174532925199433,AUTHORITY[\"EPSG\",\"9122\"]],AUTHORITY[\"EPSG\",\"4490\"]]");
// register(proj4);
 
var map = new Map({
        target: "map",
        view: new View({
                // center: [116.391478, 39.903185],
                center: [11936406.337013, 3786384.633134],
                // projection: "EPSG:4490",
                zoom: 5,
                maxZoom: 18,
                minZoom: 1
        })
});
var tdt = getTianditu({
        type: '矢量底图',
        proj: '球面墨卡托投影',
        // proj: '经纬度投影',
 
        key: '用你自己的key'
});
var zz = getTianditu({
        type: '矢量注记',
        proj: '球面墨卡托投影',
        // proj: '经纬度投影',
 
        key: '用你自己的key'
})
var jj = getTianditu({
        type: '全球境界',
        proj: '球面墨卡托投影',
        // proj: '经纬度投影',
 
        key: '用你自己的key'
})
map.addLayer(tdt)
map.addLayer(zz)
map.addLayer(jj)