鍍金池/ 問答/網(wǎng)絡(luò)安全/ 如何解決leafletjs 加載天地圖WMTS時 把CRS設(shè)置成4326之后

如何解決leafletjs 加載天地圖WMTS時 把CRS設(shè)置成4326之后 地圖位置會出現(xiàn)錯亂的情況

情況1:

瓦片類型為vec_w
CRS為默認

// 擴展天地圖tile瓦片加載方法
    L.TileLayer.TdtLayer = L.TileLayer.extend({
        getTileUrl: function (coords) {
            var layerType = 'w'
            return "http://t0.tianditu.cn/" +
                "vec_" + layerType +
                "/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&" +
                "TILEMATRIXSET=" + layerType + "&FORMAT=tiles&TILECOL=" +
                coords.x + "&TILEROW=" +
                coords.y + "&TILEMATRIX=" + coords.z;
        }
    });
    
    L.tileLayer.tdtLayer = function (options) {
        return new L.TileLayer.TdtLayer(null, options)
    }
    
    var map = L.map('map', {
        center: [
            31.90059,
            120.584663
        ],
        zoom: 1
    });
    
    var tdtTile = L.tileLayer.tdtLayer({
        layerType: 'vec',
        tms: true
    });
    
     map.addLayer(tdtTile);

    map.on('click', function (e) {
        console.log(e.latlng)
    })

都是正常的
圖片描述

情況2:

瓦片類型為vec_c
CRS為默認

// 擴展天地圖tile瓦片加載方法
        L.TileLayer.TdtLayer = L.TileLayer.extend({
            getTileUrl: function (coords) {
                var layerType = 'c'
                return "http://t0.tianditu.cn/" +
                    "vec_" + layerType +
                    "/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&" +
                    "TILEMATRIXSET=" + layerType + "&FORMAT=tiles&TILECOL=" +
                    coords.x + "&TILEROW=" +
                    coords.y + "&TILEMATRIX=" + coords.z;
            }
        });

        L.tileLayer.tdtLayer = function (options) {
            return new L.TileLayer.TdtLayer(null, options)
        }

        var map = L.map('map', {
            center: [
                31.90059,
                120.584663
            ],
            zoom: 1
        });

        var tdtTile = L.tileLayer.tdtLayer({
            layerType: 'vec',
            tms: true
        });

        map.addLayer(tdtTile);
        map.on('click', function (e) {
            console.log(e.latlng)
        })

地圖縱向出現(xiàn)偏移
圖片描述

情況3:

瓦片類型為vec_c
CRS為L.CRS.EPSG4326

// 擴展天地圖tile瓦片加載方法
        L.TileLayer.TdtLayer = L.TileLayer.extend({
            getTileUrl: function (coords) {
                var layerType = 'c'
                return "http://t0.tianditu.cn/" +
                    "vec_" + layerType +
                    "/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&" +
                    "TILEMATRIXSET=" + layerType + "&FORMAT=tiles&TILECOL=" +
                    coords.x + "&TILEROW=" +
                    coords.y + "&TILEMATRIX=" + coords.z;
            }
        });

        L.tileLayer.tdtLayer = function (options) {
            return new L.TileLayer.TdtLayer(null, options)
        }

        var map = L.map('map', {
            crs: L.CRS.EPSG4326, //L.CRS.EPSG4326
            center: [
                31.90059,
                120.584663
            ],
            zoom: 1
        });

        var tdtTile = L.tileLayer.tdtLayer({
            layerType: 'vec',
            tms: true
        });

        map.addLayer(tdtTile);
        map.on('click', function (e) {
            console.log(e.latlng)
        })

地圖發(fā)生了驗證的偏移問題
圖片描述

走過路過的大佬們幫忙看些怎么才能解決這個問題,可以情況3的地圖錯亂問題修復(fù)了。

回答
編輯回答
念舊

經(jīng)過一系列的查找,提問終于找到答案:
原因是因為天地圖的EPSG4326跟國際wmts差了一級,需要修改一下源碼里面的比例尺

scale: function (zoom) {
        if(this.code == 'EPSG:4326') {
            return 256 * Math.pow(2, zoom-1);
        }
        return 256 * Math.pow(2, zoom);
    },
2018年3月10日 21:55