记录leaflet加载瓦片地图服务遇到的一些问题

原创已于 2022-02-11 15:55:56 修改 · 5.7k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html #leaflet #wmts

于 2022-01-27 17:12:08 首次发布

gis 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了使用Leaflet加载地图时的几个关键注意事项：确保正确加载CSS样式文件；解决全国天地图WMTS服务URL行列号颠倒的问题；定义正确的分辨率数组以匹配天地图4490坐标系；以及处理TMS服务时Y轴瓦片序号的方向问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一）leaflet的css样式文件一定要加载上，即便是不使用它的控件，也要加上！！！

不加的话，瓦片位置全部乱套，这鸟样：
在这里插入图片描述
加上之后完美解决：

（二）全国天地图wmts服务url行列号颠倒问题

在这里插入图片描述
上图url是全国天地图官网提供的瓦片获取方式，其中TILEROW对应的是x，TILECOL对应的是y，但是在leaflet引擎中，计算出来的x对应的是列，即x对应TILECOL；计算出来的y对应的是行，即y对应TILEROW。所以在使用leaflet加载全国天地图wmts服务的时候，要将url中的行列号的对应关系颠倒一下，否则会出现瓦片错乱和无瓦片的情况：

//更改行列号对应关系后
http://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的秘钥

（三）使用proj4定义全国天地图4490坐标系时，分辨率数组问题

在这里插入图片描述
上图这个分辨率数组中的每一个数值，它是对应了wmts服务的每一个层级的影像分辨率。这个数组默认是从0级开始，但是天地图wmts服务级别是从1级开始的，所以加载全国天地图wmts服务时是用不到0级这个分辨率的，可以给他任意一个数值。但是不能不写，不写的话，相当于把天地图的1级当做了0级来计算，计算出来的瓦片行列号肯定就错了。
另外附上全国天地图4490坐标系(经纬度投影)的定义：

const CRS_4490 = new L.Proj.CRS(
    'EPSG:4490',
    '+proj=longlat +ellps=GRS80 +no_defs', // EPSG:4490的PROJ.4描述
    {
        resolutions: [
            1.40625,//如果是天地图，0级的影像分辨率可以写任意数值
            0.703125,
            0.3515625,
            0.17578125,
            0.087890625,
            0.0439453125,
            0.02197265625,
            0.010986328125,
            0.0054931640625,
            0.00274658203125,
            0.001373291015625,
            6.866455078125e-4,
            3.4332275390625e-4,
            1.71661376953125e-4,
            8.58306884765625e-5,
            4.291534423828125e-5,
            2.1457672119140625e-5,
            1.0728836059570312e-5,
            5.364418029785156e-6,
            2.682209064925356e-6,
            1.3411045324626732e-6,
        ],
        origin: [-180, 90],
    }
);

这个分辨率数组是根据wmts服务的描述文件提供的比例尺计算出来的，如果不想计算，可以直接去百度。具体计算方式参考另一篇文章：瓦片地图拼接原理

（四）加载TMS服务需要特别注意，它的y轴瓦片序号和WMTS服务是相反的

TMS：它是有OSGeo这个组织定义的标准，和WMTS一样，它是有一个描述文件的(元数据文件)，但是和WMTS服务不同的是，TMS的瓦片只能是正方形，而WMTS的瓦片是矩形(可以是正方形也可以不是)，最重要的一点区别是，WMTS的原点的地图的左上角，所以它的y轴从上向下的，而WMS的原点在地图的左下角，所以它的是从下向上的，二者顺序恰好相反。所以在加载WMS服务的时候，需要设置参数{tms:true}才行，否则会出现瓦片错乱，加载WMTS服务则不需要设置，因为leaflet引擎默认地图瓦片原点在左上角。
WMTS：它是由OGC这个组织定义的标准，它是有一个描述文件的，它的特点已经在TMS的描述中提过了。
XYZ：它是由谷歌制定的一套标准，后来很多厂商也纷纷效仿这个标准进行发布瓦片服务，它的x轴方向和TMS以及WMTS服务一样，都是从左向右的，y轴没有规定方向，但大部分都和WMTS服务一样，方向是从上向下。