HERE Maps API for JS 创建灰度OSM图层的实现方法咨询

你提出的通过onTileLoad回调处理瓦片实现灰度化的方案是完全可行的，以下是可直接使用的完整实现逻辑：

const greyscale = (tile: H.map.provider.Tile): H.map.provider.Tile  => {
  const img = tile.getImage() as HTMLImageElement;
  // 处理图片加载完成的逻辑
  const processImg = () => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d')!;
    canvas.width = img.width;
    canvas.height = img.height;
    // 绘制原始瓦片
    ctx.drawImage(img, 0, 0);
    // 获取像素数据
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    // 遍历像素转换为灰度（采用人眼感知权重计算灰度值）
    for (let i = 0; i < data.length; i += 4) {
      const gray = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
      data[i] = data[i + 1] = data[i + 2] = gray;
    }
    ctx.putImageData(imageData, 0, 0);
    // 替换瓦片的原始图片为处理后的canvas
    tile.setContent(canvas);
  };

  if (img.complete) {
    processImg();
  } else {
    img.onload = processImg;
  }
  return tile;
}

// 初始化provider时引入回调
const osmProvider = new H.map.provider.ImageTileProvider({
  getURL: (x: number, y: number, z: number): string => {
    return `https://tile.openstreetmap.org/${z}/${x}/${y}.png`;
  },
  onTileLoad: greyscale
});

如果仅需要展示灰度效果，不需要对瓦片数据做二次处理，更推荐使用CSS滤镜方案，该方案依赖浏览器硬件加速，性能远高于逐瓦片canvas处理，代码量极少：

1. 给OSM图层添加自定义类名

const osmLayer = new H.map.layer.TileLayer(osmProvider, {
  class: 'osm-greyscale-layer'
});

2. 添加对应CSS样式

.osm-greyscale-layer {
  filter: grayscale(100%) !important;
  /* 可配合调整亮度、对比度达到更符合预期的灰度效果 */
  /* filter: grayscale(100%) brightness(0.9) contrast(1.1) !important; */
}

• 仅需展示灰度效果：优先选CSS方案，性能最优，维护成本最低
• 需要导出灰度瓦片、自定义灰度计算逻辑：选择onTileLoad canvas处理方案

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