AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/08/03 16:28
点图层

我们可以通过 BMap.PointShapeLayer 和 BMap.PointIconLayer 在地图上添加点图层,批量展示点数据。当你有大数据量上图的场景,使用点图层上图相比BMap.Marker性能要更好。
其中 PointShapeLayer 使用内置的几何形状绘制点,PointIconLayer 使用图片或自定义canvas绘制点。

形状点

通过 BMap.PointShapeLayer叠加形状点, 形状点图层内置圆形、正方形、三角形、菱形、十字、箭头、五角星、水滴形等图形,可以设置大小、颜色、描边和旋转角度等属性。

var pointLayer = new BMap.PointShapeLayer({
style: {
shapeType: 0, // 设置点的形状,0表示圆形
size: 32,
color: '#2a6cf6',
opacity: 0.9,
strokeColor: '#ffffff',
strokeWeight: 2,
},
});
map.addLayer(pointLayer);
pointLayer.setData(geojson);
图标点

如果内置形状不能满足需求,可以使用图标点BMap.PointIconLayer,通过图片或 Canvas 自定义点的样式:

icon图标

通过icon 属性配置图片地址

var iconLayer = new BMap.PointIconLayer({
// 创建图标点图层
style: {
icon: 'images/bus.png', // 设置图标的图片地址
sizes: [100, 300], // 设置图标的宽高,与图片实际尺寸一致
scale: 0.3, // 设置图标的缩放比例
opacity: 1, // 设置图标的透明度,取值范围0-1
anchors: [0, 0], // 设置坐标点对应图标的锚点,中心为[0,0],取值范围[-1,1]
},
});
自定义canvas

图标也可以使用 Canvas 动态绘制,通过 iconObj 回调函数为每个点生成不同的图标:

var iconLayer = new BMap.PointIconLayer({
style: {
iconObj: function (style, properties) {
// 根据点的属性数据动态绘制Canvas并返回
return { canvas: getTextureCanvas(style, properties) };
},
sizes: [200, 50], // 设置图标的宽高,与Canvas尺寸一致
},
});

相关类参考

BMap.PointShapeLayer
BMap.PointIconLayer

上一篇

矩形

下一篇

线图层
本篇文章对您是否有帮助?