DOMLayer

自定义DOM覆盖物图层，用于批量管理自定义DOM覆盖物。 通过 map.addLayer() / map.removeLayer() 方法管理。

构造函数

  • 创建自定义DOM覆盖物图层

    参数类型说明
    createDOM(properties: object, point: Point) => HTMLElement创建DOM元素的回调函数，接收properties和point参数，返回HTMLElement
    opts 可选DOMLayerOptions配置选项

    返回值 DOMLayer

    示例代码1

    const domLayer = new BMap.DOMLayer(function(properties, point) {
      const div = document.createElement('div');
      div.style.cssText = 'background:#ff5722;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;';
      div.textContent = properties.name;
      return div;
    }, {
      minZoom: 5,
      maxZoom: 18,
      enableDraggingMap: true,
    });
    domLayer.setData({
      type: 'FeatureCollection',
      features: [
        { type: 'Feature', geometry: { type: 'Point', coordinates: [116.404, 39.915] }, properties: { name: '天安门' } },
        { type: 'Feature', geometry: { type: 'Point', coordinates: [116.397, 39.908] }, properties: { name: '前门' } },
        { type: 'Feature', geometry: { type: 'Point', coordinates: [116.391, 39.916] }, properties: { name: '西单' } },
      ],
    });
    map.addLayer(domLayer);

方法

  • 添加事件监听

    参数类型说明
    eventstring事件类型
    callbackFunction回调函数

    返回值 void

    示例代码1

    domLayer.addEventListener('click', (e) => {
      console.log('点击了覆盖物', e);
    });

  • 获取当前图层所有的自定义覆盖物

    返回值 Overlay[]

    示例代码1

    const overlays = domLayer.getCustomOverlays();
    console.log('覆盖物数量:', overlays.length);

  • 隐藏图层

    返回值 void

    示例代码1

    domLayer.hide();

  • 移除图层上所有的覆盖物

    返回值 void

    示例代码1

    domLayer.removeAllOverlays();

  • 移除指定的覆盖物

    参数类型说明
    cusItemstring覆盖物实例或覆盖物id

    返回值 void

    示例代码1

    const overlays = domLayer.getCustomOverlays();
    domLayer.removeOverlay(overlays[0]);

  • 设置图层数据，传入GeoJSON格式的FeatureCollection

    参数类型说明
    dataobjectGeoJSON FeatureCollection对象

    返回值 void

    示例代码1

    domLayer.setData({
      type: 'FeatureCollection',
      features: [
        { type: 'Feature', geometry: { type: 'Point', coordinates: [116.404, 39.915] }, properties: { name: '天安门' } },
        { type: 'Feature', geometry: { type: 'Point', coordinates: [116.397, 39.908] }, properties: { name: '前门' } },
      ],
    });

  • 更新图层样式配置

    参数类型说明
    optionsDOMLayerOptions样式配置项

    返回值 void

    示例代码1

    domLayer.setStyleOptions({
      minZoom: 8,
      maxZoom: 16,
      anchors: [0.5, 0.5],
    });

  • 显示图层

    返回值 void

    示例代码1

    domLayer.show();