leaflet加载天地图、叠加2000坐标wmts服务

---

一、自定义坐标

leaflet自带的地理坐标不能加载4490坐标的图层，因此需要自定义坐标。

	//自定义leaflet天地图经纬度坐标
	L.CRS.CustomEPSG4490 = L.extend({}, L.CRS.Earth, {
    	code: 'EPSG:4490',
    	projection: L.Projection.LonLat,
    	transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5),
    	scale: function (zoom) {
        	return 256 * Math.pow(2, zoom - 1);
    	}
	});

这里是参考网上的文章：https://codeleading.com/article/97202372217/

这一步我不是很明确，按照leaflet官网，需要使用proj4leaflet插件自定4490坐标，但是我自定义后的坐标用在map里面图层无法显示，用上面的方式定义坐标可以加载。

二、leaflet加载天地图

由于我要叠加的wmts服务是地理坐标，因此天地图服务地址选择地理坐标的服务地址。
地址如下：
http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}

img_c图层名称 TILEMATRIXSET=c 这两个地方的c代表地理坐标，若需要投影坐标将c换成w
因为这个走了很多弯路，一把辛酸泪......

	//影像地图
    const img_c = L.tileLayer(`http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`)
    //注记
    const cia_c = L.tileLayer(`http://t0.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`)
    const layers = L.layerGroup([img_c, cia_c])

    let map = L.map('map', {
        center: [24.889157, 102.839443],
        zoom: 6,
        maxZoom: 18,
        minZoom: 0,
        zoomControl: false,
        layers: [layers],
        crs: L.CRS.CustomEPSG4490, //第一步定义的坐标
    })

三、加载2000坐标的wmts

安装插件 leaflet.wmts

	let matrixIds = [];
	for (let i = 0; i < 22; ++i) {
    	matrixIds[i] = {
        	identifier: "" + i,
        	topLeftCorner: new L.LatLng(90, -180),
    	};
	}
	let url = 'http://localhost/gwc/service/wmts'
    let layer = '图层名称'
    let wmtsLayer = new L.TileLayer.WMTS(url,
        {
            layer: layer,
            style: '',
            tilematrixSet: "CGCS2000",
            format: "image/png",
            crs: L.CRS.CustomEPSG4490,
            matrixIds: matrixIds,
        }
    );

我执行到这一步先使用的是官网下载的js文件，需要改源码，否则无法加载我这里的wmts服务。后来在npm官网找到了leaflet.wmts插件，安装后能成功加载（我觉得很玄幻！！！不李姐）
所以推荐使用npm 安装leaflet.wmts插件。

三、完整代码

<template>
    <div id="map"></div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import 'leaflet.wmts'

const tdtKey = "天地图key"

let matrixIds = [];
for (let i = 0; i < 22; ++i) {
    matrixIds[i] = {
        identifier: "" + i,
        topLeftCorner: new L.LatLng(90, -180),
    };
}

//自定义leaflet天地图经纬度坐标
L.CRS.CustomEPSG4490 = L.extend({}, L.CRS.Earth, {
    code: 'EPSG:4490',
    projection: L.Projection.LonLat,
    transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5),
    scale: function (zoom) {
        return 256 * Math.pow(2, zoom - 1);
    }
});

const initMap = () => {
    //影像地图
    const img_c = L.tileLayer(`http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`)
    //注记
    const cia_c = L.tileLayer(`http://t0.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`)
    const layers = L.layerGroup([img_c, cia_c])

    let map = L.map('map', {
        center: [24.889157, 102.839443],
        zoom: 6,
        maxZoom: 18,
        minZoom: 0,
        zoomControl: false,
        layers: [layers],
        crs: L.CRS.CustomEPSG4490,
    })


   	let url = 'http://localhost/gwc/service/wmts'
    let layer = '图层名称'
    let wmtsLayer = new L.TileLayer.WMTS(url,
        {
            layer: layer,
            style: '',
            tilematrixSet: "CGCS2000",
            format: "image/png",
            crs: L.CRS.CustomEPSG4490,
            matrixIds: matrixIds,
        }
    );
    map.addLayer(wmtsLayer);
}

onMounted(() => {
    initMap();
})

</script>

<style lang='scss' scoped>
html,
body,
#map {
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100%;
}
</style>

---

总结

总结就是leaflet的真的好难用，单单是从他官网下载的东西使用起来一步一个坑这一点就无法忍受，当然有可能是我刚接触leaflet使用不熟练，以上仅为个人观点。完结~ 撒花~

参考：
https://www.cnblogs.com/sx001/p/12876014.html
https://codeleading.com/article/97202372217/