共被编辑 2 次

版本 更新时间 贡献者 编辑原因 操作
#r2 2018年07月04日 Haven17 补充内容 查看

如何解决leafletjs 加载天地图WMTS时 把CRS设置成4326之后 地图位置会出现错乱的情况

情况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)
        })

地图纵向出现偏移
图片描述

情况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)
        })

地图发生了验证的偏移问题
图片描述

走过路过的大佬们帮忙看些怎么才能解决这个问题,可以情况3的地图错乱问题修复了。

#r1 2018年07月03日 Haven17 创建问题 查看

如何解决leafletjs 创建map时把crs设置为EPSG4326 地图的纬度会比默认的纬度多90

用leaflet创建一个tile时 crs设置为EPSG4326 地图的纬度会比默认的纬度多90