Leaflet中如何让GeoJSON道路线绘制在地图道路名称下方？

这问题我做项目时也踩过坑！Leaflet里图层的绘制顺序完全由zIndex属性控制——默认情况下，GeoJSON图层的zIndex会比包含道路名称的地图瓦片图层更高，所以才会把道路文字盖住。下面给你两种简单的解决思路：

方法一：给GeoJSON图层设置更低的zIndex #

直接在创建GeoJSON图层时，通过style选项指定一个比地图瓦片图层更小的zIndex值就行。Leaflet的TileLayer（地图瓦片）默认zIndex是2，所以我们把GeoJSON的zIndex设为1或者更小，就能让它跑到道路名称下面：

L.geoJSON(feature, {
  style: function() {
    return {
      zIndex: 1 // 数值小于瓦片图层的默认值2即可
    };
  }
}).addTo(mymap);

如果你已经创建好了GeoJSON图层，也可以事后通过setZIndex方法调整：

const roadGeoJson = L.geoJSON(feature).addTo(mymap);
roadGeoJson.setZIndex(1);

方法二：提高地图瓦片图层的zIndex #

如果你不想动GeoJSON的设置，也可以反过来把地图瓦片图层的zIndex调得更高，让它盖在GeoJSON上面。比如把瓦片图层的zIndex设为5（比GeoJSON默认的4更高）：

// 创建瓦片图层时指定更高的zIndex
const mapTileLayer = L.tileLayer('你的地图瓦片URL', {
  zIndex: 5
}).addTo(mymap);

小提示 #

Leaflet里图层的zIndex数值越小，图层越靠下；数值越大越靠上。你可以根据自己的图层数量灵活调整，只要保证包含道路名称的瓦片图层zIndex比你的GeoJSON道路线高就行。

内容的提问来源于stack exchange，提问作者敬錞 潘