宣传单 - 在地图上绘制半透明帆布图案

Question

我正在扩展Leaflet的GridLayer以显示我在其上绘制一些数据点的画布图块 - 问题是在放大和缩小后其他缩放图层仍然可见，或者是以随机的方式部分切断。

E.g。左边是缩放级别13，右边是缩小到11并返回到13 -

如何仅显示当前缩放级别，并防止画布切割掉？

Answer 1

这就是我最终修复它的方法，尽管可能有更好的方法......

这是我的GridCanvas类 -

L.GridLayer.GridCanvas = L.GridLayer.extend({

  onAdd: function (map) {
    L.GridLayer.prototype.onAdd.call(this, map);
    map.on('zoomend', e => this.onZoomEnd(e.target._zoom));
  },

  // on zoom end, want to hide all the tiles that are not on this zoom level,
  // and show all the ones that are
  onZoomEnd: function (zoom) {
    Object.values(this._levels).forEach(level => {
      level.el.style.display = (level.zoom === zoom) ? 'block' : 'none';
    });
  },

  createTile,

});

瓷砖的visibility也会以看似随机的方式设置 - 这似乎可以解决问题 - 在画布元素中添加一个类并将它们设置为始终可见 -

function createTile(coords, done) {
  const canvas = L.DomUtil.create('canvas', 'grid-canvas-tile');
  ...
}

使用styles.css：

.grid-canvas-tile {
  visibility: visible !important;
}