Leaflet自定义图层短暂显示后消失问题求助

问题描述 #

我正在开发一个信息娱乐网站项目，需要在Leaflet地图上展示动态内容。尝试实现一个自定义图层，让每个瓦片呈现不同颜色，但代码里的自定义瓦片会短暂显示后消失，找不到问题原因。

补充说明：按照@mplungjan的建议调整图层顺序后，问题已解决，现在可以实现指定瓦片显示在OSM底图之上的预期效果。

问题根源 #

1. HTML结构错误：原代码中Leaflet的脚本标签写在了DOCTYPE声明之前，不符合HTML规范，会导致库加载异常，进而引发图层渲染故障。
2. 图层顺序影响：Leaflet的图层渲染层级由添加顺序决定，后添加的图层会覆盖在先添加的图层上方。如果图层顺序错误，自定义瓦片会被底图覆盖。
3. 随机隐藏逻辑：代码中getRandomBoolean()会随机隐藏部分瓦片，这也会让部分瓦片看起来“消失”。

解决步骤 #

1. 修正HTML结构，将Leaflet脚本标签放在正确位置（比如body末尾）。
2. 调整图层添加顺序：先加载OSM底图，再添加自定义图层，确保自定义图层渲染在底图上方。
3. 保留随机隐藏逻辑（如果业务需要）。

修正后的完整代码 #

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Leaflet Example</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</body>
</html>

CSS

#map {
  height: 100vh;
}

JavaScript

function getRandomBoolean() {
    return Math.random() < 0.5;
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

var CustomGridLayer = L.GridLayer.extend({
  createTile: function(coords) {
    var size = this.getTileSize();

    var tile = L.DomUtil.create('canvas', 'leaflet-tile');
    tile.width = size.x;
    tile.height = size.y;
    
    var ctx = tile.getContext('2d');
    ctx.fillStyle = getRandomColor();
    ctx.fillRect(0, 0, size.x, size.y);

    // 给瓦片添加文本标识
    ctx.fillStyle = 'white';
    ctx.font = 'bold 16px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('Tile', size.x / 2, size.y / 2);

    // 随机隐藏部分瓦片
    if(!getRandomBoolean()) {
        tile.style.display = 'none';
    } 
    return tile;
  }
});

var customLayer = new CustomGridLayer({
  maxZoom: 18,
  tileSize: 256
});

var map = L.map('map', {
  center: [51.505, -0.09],
  zoom: 13
});

// 先添加OSM底图
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// 后添加自定义图层，确保其在底图上方
map.addLayer(customLayer);

内容的提问来源于stack exchange，提问作者Vinay