Marker3d

带高度的点

更新时间：2020年10月22日

简介

基于 WebGL 点图元，百度地图 JSAPI GL 提供了 BMapGL.Marker3D 类进行带高度的点覆盖物绘制，支持对覆盖物点的高度、大小、形状、颜色及透明度的自定义，并可以进行纹理贴图以满足更多场景需求。

带高度的点

贴纹理

DEMO详情

Marker3D类参考

构造函数：

构造函数	说明
BMapGL.Marker3D(point, height, options)	Marker3D继承Overlay，用于创建带有高度的点，可以通过options自定义点的样式

参数说明：

构造函数	类型	说明
point	Point	点坐标，通过Point创建的点对象
height	number	点的高度
options	Object	点的自定义样式，可选

options属性变量：

options属性	类型	说明
size	number	点的大小，默认为50
shape	number	点的形状，1 为圆形，2 为正方形，默认为 1。也可以使用对应的常量 BMAP_SHAPE_CIRCLE 和 BMAP_SHAPE_RECT
fillColor	string	点的颜色，格式为 '#xxxxxx'，比如'#f00'
fillOpacity	number	点的透明度，范围0-1，默认0.8
icon	Icon	点的纹理贴图，格式为通过Icon创建的Icon对象

使用示例

1创建地图参照展示地图

2创建带高度的点，并添加到地图上

创建带高度的点使用BMapGL.Marker3D类，其继承自Overlay，通过map.addoverlay()方法将创建的点覆盖物添加到地图上。

    // 创建位置点
    var point = new BMapGL.Point(116.404, 39.915);
    // 创建带高度的点
    var marker3d = new BMapGL.Marker3D(point, 8000, {
        size: 50,
        shape: BMAP_SHAPE_CIRCLE,
        fillColor: '#454399',
        fillOpacity: 0.6
    });
    // 将点添加到地图上
    map.addOverlay(marker3d);

纹理贴图

1贴纹理

纹理图片首先需要通过Icon类创建实例，然后通过Marker3D类创建带高度的点实例时，将得到的Icon实例传给icon属性。

    // 创建位置点
    var pt = new BMapGL.Point(point.lng, point.lat);
    // 创建贴图纹理Icon
    var icon = new BMapGL.Icon(citys[i].img, new BMapGL.Size(40, 40));
    // 创建带高度的点，这里只需要size和icon
    var marker = new BMapGL.Marker3D(pt, 8000, {
        size: 80,
        icon: icon
    });
    // 将点添加到地图上
    map.addOverlay(marker);

文档全面上新