Prism
此类表示一个棱柱覆盖物。
构造函数
| 构造函数 | 描述 |
|---|---|
| Prism(points: Array<Point>, altitude: Number, opts: PrismOptions) | 创建棱柱覆盖物,构造函数中需要定义底面和高度 |
PrismOptions
| 属性名 | 类型 | 描述 |
|---|---|---|
| topFillColor | String | 顶面填充颜色 |
| topFillOpacity | Number | 顶面填充颜色透明度,取值范围0 - 1 |
| sideFillColor | String | 侧面填充颜色 |
| sideFillOpacity | Number | 侧面填充颜色透明度,取值范围0 - 1 |
| enableMassClear | Boolean | 是否在调用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);
});常见用途
建筑物展示:
- 3D建筑物模型
- 城市规划展示
- 建筑物高度对比
数据可视化:
- 区域统计数据展示
- 人口密度展示
- 房价分布展示
注意事项
底面设置:
- 底面多边形点数建议在3-8个之间
- 点的顺序决定了多边形的形状
- 确保多边形不自相交
高度设置:
- 高度单位为米
- 建议根据地图缩放级别调整高度
- 过高的棱柱可能影响地图视觉效果
性能优化:
- 避免创建过多的棱柱
- 适当调整透明度,避免遮挡
- 根据视距调整显示细节
