PointIconLayer

点图标图层，支持点图标的渲染

构造函数

  • 创建点图标图层实例

    参数类型说明
    options 可选PointIconLayerOptions配置项
    属性类型说明
    autoSelectboolean是否允许鼠标悬浮事件
    crsstring来源坐标系，可选BD09LL、BD09MC、GCJ02
    enablePickedboolean是否允许鼠标点击事件
    idKeystring数据项属性key
    isFixedboolean是否保持图标跟随地图层级改变而尺寸不变
    isFlatboolean是否是贴地图标
    maxZoomnumber最大显示缩放等级
    minZoomnumber最小显示缩放等级
    opacitynumber透明度，取值范围0 - 1
    pickHeightnumber点击拾取矩形高，单位像素
    pickWidthnumber点击拾取矩形宽，单位像素
    popEventboolean事件是否冒泡
    selectedColorstring选中数据颜色
    selectedIndexnumber选中数据索引
    stylePointIconStyle点图标显示样式配置对象
    visibleboolean是否显示
    zIndexnumber显示层级

    返回值 PointIconLayer

    示例代码1

    // 简单用法：贴地固定大小图标
    const pointIconLayer = new BMap.PointIconLayer({
      style: { icon: 'https://jsapi-demo.bj.bcebos.com/images/markers/marker_demo_1.png', width: 25, height: 25 },
    });
    map.addLayer(pointIconLayer);
    pointIconLayer.setData({
      type: 'FeatureCollection',
      features: [
        { type: 'Feature', geometry: { type: 'Point', coordinates: [116.404, 39.915] }, properties: { id: 1 } },
      ],
    });

    示例代码2

    // 非贴地 + 跟随缩放 + 偏移锚点
    const pointIconLayer = new BMap.PointIconLayer({
      isFlat: false,
      isFixed: false,
      style: { icon: 'https://jsapi-demo.bj.bcebos.com/images/markers/marker_demo_2.png', width: 48, height: 48, anchors: [0, -1], offset: [0, -24] },
    });
    map.addLayer(pointIconLayer);
    pointIconLayer.setData({
      type: 'FeatureCollection',
      features: [
        { type: 'Feature', geometry: { type: 'Point', coordinates: [116.404, 39.915] }, properties: { id: 1 } },
        { type: 'Feature', geometry: { type: 'Point', coordinates: [116.414, 39.905] }, properties: { id: 2 } },
      ],
    });

    示例代码3

    // 可点击 + 数据驱动旋转和缩放
    const pointIconLayer = new BMap.PointIconLayer({
      enablePicked: true,
      selectedColor: 'rgba(255, 0, 0, 1.0)',
      isFlat: true,
      isFixed: true,
      style: {
        icon: 'https://jsapi-demo.bj.bcebos.com/images/markers/marker_demo_1.png',
        width: 32,
        height: 32,
        rotation: (properties) => properties.heading || 0,
        scale: (properties) => properties.level > 3 ? 1.5 : 1.0,
        opacity: 0.9,
      },
    });
    map.addLayer(pointIconLayer);
    pointIconLayer.setData({
      type: 'FeatureCollection',
      features: [
        { type: 'Feature', geometry: { type: 'Point', coordinates: [116.404, 39.915] }, properties: { id: 1, heading: 45, level: 5 } },
        { type: 'Feature', geometry: { type: 'Point', coordinates: [116.414, 39.905] }, properties: { id: 2, heading: 120, level: 2 } },
      ],
    });

方法

  • 添加不显示数据索引

    参数类型说明
    indexnumber数据索引

    返回值 void

    示例代码1

    pointIconLayer.addDelIndex(3);

  • 清空不显示数据索引

    返回值 void

  • 清空对象状态

    返回值 void

  • 触发图层重绘

    返回值 void

  • 获取所有要素状态

    返回值 object

  • 获取数据源

    返回值 object

  • 返回图层最大显示等级

    返回值 number

  • 返回图层最小显示等级

    返回值 number

  • 返回图层透明度

    返回值 number

  • 根据数据索引获取数据项

    参数类型说明
    indexnumber数据索引
    modelstring取值 'onmousemove' 或 'onclick'

    返回值 { dataIndex: number; dataItem: object }

    示例代码1

    const item = pointIconLayer.getPickedItem(0, 'onclick');

  • 返回图层显示/隐藏状态

    返回值 boolean

  • 返回图层层级

    返回值 number

  • 移除不显示数据索引

    参数类型说明
    indexnumber数据索引

    返回值 void

    示例代码1

    pointIconLayer.removeDelIndex(3);

  • 根据id移除对象状态

    参数类型说明
    keysstring数据id或id数组

    返回值 void

    示例代码1

    pointIconLayer.removeState([1, 2]);

  • 全量替换所有要素状态

    参数类型说明
    inputsobjectid到状态对象的映射

    返回值 void

    示例代码1

    pointIconLayer.replaceAllState({ 1: { hovered: true }, 2: { hovered: false } });

  • 运行时修改图层基础配置项（如坐标系、拾取设置等），合并到现有配置。不会自动触发重绘，如需生效可调用doOnceDraw()

    参数类型说明
    optionsPointIconLayerOptions要合并的配置项
    属性类型说明
    autoSelectboolean是否允许鼠标悬浮事件
    crsstring来源坐标系，可选BD09LL、BD09MC、GCJ02
    enablePickedboolean是否允许鼠标点击事件
    idKeystring数据项属性key
    isFixedboolean是否保持图标跟随地图层级改变而尺寸不变
    isFlatboolean是否是贴地图标
    maxZoomnumber最大显示缩放等级
    minZoomnumber最小显示缩放等级
    opacitynumber透明度，取值范围0 - 1
    pickHeightnumber点击拾取矩形高，单位像素
    pickWidthnumber点击拾取矩形宽，单位像素
    popEventboolean事件是否冒泡
    selectedColorstring选中数据颜色
    selectedIndexnumber选中数据索引
    stylePointIconStyle点图标显示样式配置对象
    visibleboolean是否显示
    zIndexnumber显示层级

    返回值 void

    示例代码1

    pointIconLayer.setBaseOptions({ crs: 'GCJ02', enablePicked: true, selectedColor: 'rgba(255,0,0,1)' });
    pointIconLayer.doOnceDraw();

  • 设置数据源为GeoJSON数据对象

    参数类型说明
    dataobjectGeoJSON数据

    返回值 void

    示例代码1

    pointIconLayer.setData({
      type: 'FeatureCollection',
      features: [
        { type: 'Feature', geometry: { type: 'Point', coordinates: [116.404, 39.915] }, properties: { id: 1 } },
      ],
    });

  • 向下移动一层

    返回值 void

  • 设置图层最大显示等级

    参数类型说明
    zoomnumber最大缩放等级

    返回值 void

    示例代码1

    pointIconLayer.setMaxZoom(18);

  • 设置图层最小显示等级

    参数类型说明
    zoomnumber最小缩放等级

    返回值 void

    示例代码1

    pointIconLayer.setMinZoom(5);

  • 设置图层透明度

    参数类型说明
    opacitynumber透明度，取值范围0 - 1

    返回值 void

    示例代码1

    pointIconLayer.setOpacity(0.5);

  • 运行时修改图层样式配置项，合并到现有样式。修改后需调用doOnceDraw()触发重绘才能看到效果

    参数类型说明
    optionsPointIconStyle要合并的样式配置项

    返回值 void

    示例代码1

    pointIconLayer.setStyleOptions({ icon: 'https://jsapi-demo.bj.bcebos.com/images/markers/marker_demo_2.png', width: 32, height: 32 });
    pointIconLayer.doOnceDraw();

  • 向上移动一层

    返回值 void

  • 设置图层显示/隐藏

    参数类型说明
    visibleboolean是否显示

    返回值 void

    示例代码1

    pointIconLayer.setVisible(false);

  • 设置图层叠加顺序

    参数类型说明
    zIndexnumber层级值

    返回值 void

    示例代码1

    pointIconLayer.setZIndex(10);

  • 将当前图层设置为最上层

    返回值 void

  • 根据id设置要素状态，状态会参与样式表达式的求值（如feature-state条件判断）。状态变更会触发数据重新解析和重绘

    参数类型说明
    keysstring数据id或id数组（对应idKey字段的值）
    paramsobject状态对象，可包含任意键值对，在样式表达式中通过feature-state访问
    ifAppend 可选boolean是否追加合并。true=将params合并到已有状态；false=用params替换该要素的整个状态对象

    返回值 void

    示例代码1

    pointIconLayer.updateState([1, 2], { hovered: true }, true);