AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/27 10:37
您当前查看的是 JSAPI GL 历史版本文档。该版本仅用于维护现有项目,不建议用于新项目开发。新项目请使用 JSAPI 4.0,如需升级现有项目,请参考升级指南
You are viewing the legacy JSAPI GL documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.
带高度的点
简介

基于 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);
纹理贴图

纹理图片首先需要通过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);

上一篇

绘制点、线、面

下一篇

镂空面绘制
本篇文章对您是否有帮助?