PointShapeLayer
构造函数
创建点形状图层实例
参数 类型 说明 options可选PointShapeLayerOptions配置项 属性 类型 说明 autoSelectboolean是否允许鼠标悬浮事件 crsstring来源坐标系，可选BD09LL、BD09MC、GCJ02 enablePickedboolean是否允许鼠标点击事件 idKeystring数据项属性key isFlatboolean是否贴地渲染 maxZoomnumber最大显示缩放等级 minZoomnumber最小显示缩放等级 opacitynumber透明度，取值范围0 - 1 pickHeightnumber点击拾取矩形高，单位像素 pickWidthnumber点击拾取矩形宽，单位像素 popEventboolean事件是否冒泡 selectedColorstring选中数据颜色 selectedIndexnumber选中数据索引 stylePointShapeStyle点形状显示样式配置对象 visibleboolean是否显示 zIndexnumber显示层级 返回值 PointShapeLayer
示例代码1
// 简单用法：默认圆形点
const pointShapeLayer = new BMap.PointShapeLayer({
style: { size: 20, color: '#ff0000', opacity: 0.8 },
});
map.addLayer(pointShapeLayer);
pointShapeLayer.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 } },
],
});示例代码2
// 五角星形状 + 描边 + 可点击
const pointShapeLayer = new BMap.PointShapeLayer({
enablePicked: true,
selectedColor: 'rgba(255, 0, 0, 1.0)',
style: {
shapeType: 7,
size: 40,
color: '#ffcc00',
opacity: 1,
strokeColor: '#ff6600',
strokeWeight: 2,
},
});
map.addLayer(pointShapeLayer);
pointShapeLayer.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.910] }, properties: { id: 2 } },
],
});示例代码3
// 数据驱动：不同要素显示不同形状和颜色
const pointShapeLayer = new BMap.PointShapeLayer({
enablePicked: true,
isFlat: true,
style: {
shapeType: ['match', ['get', 'type'], 'warning', 2, 'info', 0, 0],
size: 28,
color: ['match', ['get', 'type'], 'warning', '#ff3300', 'info', '#0099ff', '#999999'],
rotation: ['get', 'heading'],
scale: 1,
strokeColor: '#ffffff',
strokeWeight: 1,
},
});
map.addLayer(pointShapeLayer);
pointShapeLayer.setData({
type: 'FeatureCollection',
features: [
{ type: 'Feature', geometry: { type: 'Point', coordinates: [116.404, 39.915] }, properties: { id: 1, type: 'warning', heading: 45 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [116.414, 39.905] }, properties: { id: 2, type: 'info', heading: 0 } },
],
});
属性
#Anchor: {
BOTTOM_CENTER: 6;
BOTTOM_LEFT: 7;
BOTTOM_RIGHT: 5;
CENTER: 0;
LEFT_CENTER: 8;
RIGHT_CENTER: 4;
TOP_CENTER: 2;
TOP_LEFT: 1;
TOP_RIGHT: 3;
}
BOTTOM_CENTER: 6;
BOTTOM_LEFT: 7;
BOTTOM_RIGHT: 5;
CENTER: 0;
LEFT_CENTER: 8;
RIGHT_CENTER: 4;
TOP_CENTER: 2;
TOP_LEFT: 1;
TOP_RIGHT: 3;
}
锚点位置枚举
Type Declaration
BOTTOM_CENTER: 6
下中
BOTTOM_LEFT: 7
左下
BOTTOM_RIGHT: 5
右下
CENTER: 0
中心
LEFT_CENTER: 8
左中
RIGHT_CENTER: 4
右中
TOP_CENTER: 2
上中
TOP_LEFT: 1
左上
TOP_RIGHT: 3
右上
#ShapeType: {
ARROW: 5;
ARROW_TAIL: 6;
CIRCLE: 0;
CROSS: 4;
DIAMOND: 3;
SQUARE: 1;
STAR: 7;
TRIANGLE: 2;
WATERDROP: 9;
}
ARROW: 5;
ARROW_TAIL: 6;
CIRCLE: 0;
CROSS: 4;
DIAMOND: 3;
SQUARE: 1;
STAR: 7;
TRIANGLE: 2;
WATERDROP: 9;
}
图形类型枚举
Type Declaration
ARROW: 5
箭头
ARROW_TAIL: 6
箭头+尾巴
CIRCLE: 0
圆形
CROSS: 4
十字
DIAMOND: 3
菱形
SQUARE: 1
正方形
STAR: 7
五角星
TRIANGLE: 2
三角形
WATERDROP: 9
水滴形
方法
添加不显示数据索引
参数 类型 说明 indexnumber数据索引 返回值 void
示例代码1
pointShapeLayer.addDelIndex(3);
清空不显示数据索引
返回值 void
清空对象状态
返回值 void
触发图层重绘
返回值 void
获取所有要素状态
返回值 object
获取图层基础配置项
返回值 PointShapeLayerOptions
获取数据源
返回值 object
返回图层最大显示等级
返回值 number
返回图层最小显示等级
返回值 number
返回图层透明度
返回值 number
根据数据索引获取数据项
参数 类型 说明 indexnumber数据索引 modelstring取值 'onmousemove'或'onclick'返回值 { dataIndex: number; dataItem: object }
示例代码1
const item = pointShapeLayer.getPickedItem(0, 'onclick');
获取图层样式配置项
返回值 PointShapeStyle
返回图层显示/隐藏状态
返回值 boolean
返回图层层级
返回值 number
移除不显示数据索引
参数 类型 说明 indexnumber数据索引 返回值 void
示例代码1
pointShapeLayer.removeDelIndex(3);
根据id移除对象状态
参数 类型 说明 keysstring数据id或id数组 返回值 void
示例代码1
pointShapeLayer.removeState([1, 2]);
全量替换所有要素状态
参数 类型 说明 inputsobjectid到状态对象的映射 返回值 void
示例代码1
pointShapeLayer.replaceAllState({ 1: { hovered: true }, 2: { hovered: false } });
运行时修改图层基础配置项（如坐标系、拾取设置等），合并到现有配置。不会自动触发重绘，如需生效可调用doOnceDraw()
参数 类型 说明 optionsPointShapeLayerOptions要合并的配置项 属性 类型 说明 autoSelectboolean是否允许鼠标悬浮事件 crsstring来源坐标系，可选BD09LL、BD09MC、GCJ02 enablePickedboolean是否允许鼠标点击事件 idKeystring数据项属性key isFlatboolean是否贴地渲染 maxZoomnumber最大显示缩放等级 minZoomnumber最小显示缩放等级 opacitynumber透明度，取值范围0 - 1 pickHeightnumber点击拾取矩形高，单位像素 pickWidthnumber点击拾取矩形宽，单位像素 popEventboolean事件是否冒泡 selectedColorstring选中数据颜色 selectedIndexnumber选中数据索引 stylePointShapeStyle点形状显示样式配置对象 visibleboolean是否显示 zIndexnumber显示层级 返回值 void
示例代码1
pointShapeLayer.setBaseOptions({ crs: 'GCJ02', enablePicked: true, selectedColor: 'rgba(255,0,0,1)' });
pointShapeLayer.doOnceDraw();
设置数据源为GeoJSON数据对象
参数 类型 说明 dataobjectGeoJSON数据 返回值 void
示例代码1
pointShapeLayer.setData({
type: 'FeatureCollection',
features: [
{ type: 'Feature', geometry: { type: 'Point', coordinates: [116.404, 39.915] }, properties: { id: 1 } },
],
});
向下移动一层
返回值 void
设置图层最大显示等级
参数 类型 说明 zoomnumber最大缩放等级 返回值 void
示例代码1
pointShapeLayer.setMaxZoom(18);
设置图层最小显示等级
参数 类型 说明 zoomnumber最小缩放等级 返回值 void
示例代码1
pointShapeLayer.setMinZoom(5);
设置图层透明度
参数 类型 说明 opacitynumber透明度，取值范围0 - 1 返回值 void
示例代码1
pointShapeLayer.setOpacity(0.5);
运行时修改图层样式配置项，合并到现有样式。修改后需调用doOnceDraw()触发重绘才能看到效果
参数 类型 说明 optionsPointShapeStyle要合并的样式配置项 返回值 void
示例代码1
pointShapeLayer.setStyleOptions({ shapeType: 7, size: 40, color: '#ffcc00' });
pointShapeLayer.doOnceDraw();
向上移动一层
返回值 void
设置图层显示/隐藏
参数 类型 说明 visibleboolean是否显示 返回值 void
示例代码1
pointShapeLayer.setVisible(false);
设置图层叠加顺序
参数 类型 说明 zIndexnumber层级值 返回值 void
示例代码1
pointShapeLayer.setZIndex(10);
将当前图层设置为最上层
返回值 void
- #updateState(
keys: string | number | (string | number)[],
params: object,
ifAppend?: boolean,
): void根据id设置要素状态，状态会参与样式表达式的求值（如feature-state条件判断）。状态变更会触发数据重新解析和重绘
参数 类型 说明 keysstring数据id或id数组（对应idKey字段的值） paramsobject状态对象，可包含任意键值对，在样式表达式中通过feature-state访问 ifAppend可选boolean是否追加合并。true=将params合并到已有状态；false=用params替换该要素的整个状态对象 返回值 void
示例代码1
pointShapeLayer.updateState([1, 2], { hovered: true }, true);
点形状图层，使用2D几何图形（圆形、方形、三角形等）渲染点数据