1、4490 坐标系 大地坐标
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);
}
});
2、WMTS 改装
L.TileLayer.WMTS = L.TileLayer.extend({
defaultWmtsParams: {
service: "WMTS",
request: "GetTile",
version: "1.0.0",
layer: "",
style: "",
tilematrixset: "",
format: "image/jpeg"
},
initialize: function (a, b) {
this._url = a; var c = {}, d = Object.keys(b);
d.forEach(a => { c[a.toLowerCase()] = b[a] });
var e = L.extend({}, this.defaultWmtsParams), f = c.tileSize || this.options.tileSize;
for (var g in e.width = c.detectRetina && L.Browser.retina ? e.height = 2 * f : e.height = f, c)
e.hasOwnProperty(g) && "matrixIds" != g && (e[g] = c[g]);
this.wmtsParams = e, this.matrixIds = b.matrixIds || this.getDefaultMatrix(), L.setOptions(this, b)
console.log( this.matrixIds)
},
onAdd: function (a) {
this._crs = this.options.crs || a.options.crs, L.TileLayer.prototype.onAdd.call(this, a)
},
getTileUrl: function (a) {
var b = this.options.tileSize, c = a.multiplyBy(b); c.x += 1, c.y -= 1;
var d = c.add(new L.Point(b, b)),
e = this._tileZoom,
f = this._crs.project(this._map.unproject(c, e)),
g = this._crs.project(this._map.unproject(d, e));
tilewidth = g.x - f.x;
var h = this.matrixIds[e].identifier,
// 针对发布的图层显示 的层级名称 这里用的1,2,3层
// i = this.wmtsParams.tilematrixset + ":" + h,
i = h,
j = this.matrixIds[e].topLeftCorner.lng,
k = this.matrixIds[e].topLeftCorner.lat,
l = Math.floor((f.x - j) / tilewidth),
m = -Math.floor((f.y - k) / tilewidth),
n = L.Util.template(this._url, { s: this._getSubdomain(a) });
return n + L.Util.getParamString(this.wmtsParams, n) + "&tilematrix=" + i + "&tilerow=" + m + "&tilecol=" + l
},
setParams: function (a, b) { return L.extend(this.wmtsParams, a), b || this.redraw(), this },
getDefaultMatrix: function () {
for (var a = Array(22), b = 0; 22 > b; b++)a[b] = {
identifier: "" + b,
// 影响坐标最为重要
// topLeftCorner: new L.LatLng(20037508.3428, -20037508.3428)
topLeftCorner: new L.LatLng(90, -180),
};
return a
}
}),
L.tileLayer.wmts = function (a, b) { return new L.TileLayer.WMTS(a, b) };
3、地图加载、点击事件,获取zoom 层级
var map = new L.Map('map', {
// center: new L.LatLng(30,104),
// center:new L.LatLng(76.11984138243697, 104.06516075134279),
// center: new L.latLng( 30.661628 +yy, 104.06516075134279),
center:[ 30.661628, 104.06516075134279],
zoom: 10,
// crs: L.CRS.EPSG4490
// crs: L.CRS.EPSG4326
crs: L.CRS.CustomEPSG4490, //第一步定义的坐标
});
// var baseLayers = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
// maxZoom: 20
// }).addTo(map);
map.on('click', function(event) {
// 处理点击事件,event.latlng 提供点击位置的经纬度
console.log(event,event.latlng,map.getZoom());
});
let url="http://IP地址:端口号/services/newtianditudlg/wmts"
var wmtsLayer= new L.TileLayer.WMTS( url ,{
layer: 'defaultLayer',
// tilematrixset: "EPSG:4326",
// tilematrixset: "GetTileMatrix",
// tileMatrixSetID: "c",
style:'default',
format: "image/png",
// service:'wmts',
// request:'GetCapabilities',
// VERSION:'1.0.0'
}).addTo(map)