Skip to content

Prism

此类表示一个棱柱覆盖物。

构造函数

构造函数描述
Prism(points: Array<Point>, altitude: Number, opts: PrismOptions)创建棱柱覆盖物,构造函数中需要定义底面和高度

PrismOptions

属性名类型描述
topFillColorString顶面填充颜色
topFillOpacityNumber顶面填充颜色透明度,取值范围0 - 1
sideFillColorString侧面填充颜色
sideFillOpacityNumber侧面填充颜色透明度,取值范围0 - 1
enableMassClearBoolean是否在调用map.clearOverlays清除此覆盖物,默认为true

方法

方法返回值描述
setPath(path: Array<Point>)none设置底面多边形的点数组
getPath()Array<Point>返回底面多边形的点数组
setAltitude(altitude: Number)none设置棱柱的高,单位:米
getAltitude()Number返回棱柱的高,单位:米
setTopFillColor(color: String)none设置棱柱顶面的填充颜色
getTopFillColor()String返回棱柱顶面的填充颜色
setTopFillOpacity(opacity: Number)none设置棱柱顶面透明度,取值范围0 - 1
getTopFillOpacity()Number返回棱柱顶面透明度
setSideFillColor(color: String)none设置棱柱侧面的填充颜色
getSideFillColor()String返回棱柱侧面的填充颜色
setSideFillOpacity(opacity: Number)none设置棱柱侧面透明度,取值范围0 - 1
getSideFillOpacity()Number返回棱柱侧面透明度
enableMassClear()none允许覆盖物在map.clearOverlays方法中被清除
disableMassClear()none禁止覆盖物在map.clearOverlays方法中被清除
getMap()Map返回覆盖物所在的map对象
addEventListener(event: String, handler: Function)none添加事件监听函数
removeEventListener(event: String, handler: Function)none移除事件监听函数

事件

事件参数描述
click{type: string, target: any, point: Point}点击棱柱时触发此事件
dblclick{type: string, target: any, point: Point}双击棱柱时触发此事件
mousedown{type: string, target: any, point: Point}鼠标在棱柱上按下时触发此事件
mouseup{type: string, target: any, point: Point}鼠标在棱柱上释放时触发此事件
mouseover{type: string, target: any, point: Point}鼠标移入棱柱时触发此事件
mouseout{type: string, target: any, point: Point}鼠标移出棱柱时触发此事件

示例

创建底面多边形的顶点:

ts
const points = [
  new BMapGL.Point(116.400, 39.900),
  new BMapGL.Point(116.405, 39.900),
  new BMapGL.Point(116.405, 39.905),
  new BMapGL.Point(116.400, 39.905)
];

创建棱柱并添加到地图:

ts
const prism = new BMapGL.Prism(points, 100, {  // 高度100米
  topFillColor: '#FF0000',     // 顶面红色
  topFillOpacity: 0.8,         // 顶面80%不透明度
  sideFillColor: '#00FF00',    // 侧面绿色
  sideFillOpacity: 0.6         // 侧面60%不透明度
});

map.addOverlay(prism);

添加事件监听:

ts
prism.addEventListener('click', function(e) {
  console.log('棱柱被点击', e.point);
});

常见用途

  1. 建筑物展示:

    • 3D建筑物模型
    • 城市规划展示
    • 建筑物高度对比
  2. 数据可视化:

    • 区域统计数据展示
    • 人口密度展示
    • 房价分布展示

注意事项

  1. 底面设置:

    • 底面多边形点数建议在3-8个之间
    • 点的顺序决定了多边形的形状
    • 确保多边形不自相交
  2. 高度设置:

    • 高度单位为米
    • 建议根据地图缩放级别调整高度
    • 过高的棱柱可能影响地图视觉效果
  3. 性能优化:

    • 避免创建过多的棱柱
    • 适当调整透明度,避免遮挡
    • 根据视距调整显示细节

基于 MIT 许可发布