我们可以通过 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 属性配置图片地址
var iconLayer = new BMap.PointIconLayer({// 创建图标点图层style: {icon: 'images/bus.png', // 设置图标的图片地址sizes: [100, 300], // 设置图标的宽高,与图片实际尺寸一致scale: 0.3, // 设置图标的缩放比例opacity: 1, // 设置图标的透明度,取值范围0-1anchors: [0, 0], // 设置坐标点对应图标的锚点,中心为[0,0],取值范围[-1,1]},});
图标也可以使用 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
上一篇
下一篇