leaflet 加载天地图wmts 显示图片不对,坐标系EPSG:4490

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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值