3D棱柱覆盖物展示
功能场景
该示例介绍如何在地图上添加3D棱柱,以及棱柱的鼠标交互。
DEMO
https://bj.bcebos.com/v1/mapopen/api-demos/video/3D棱柱.mp4
3D棱柱覆盖物
核心接口
类 | 接口 | 描述 | 参考文档 |
Prism | new BMapGL.Prism(path, height, opts) | 创建3d棱柱 | 暂无 |
Prism | addEventListener('mouseover',function) | 给3d棱柱添加鼠标事件 | 暂无 |
Prism | map.addOverlay(prism) | 将3D棱柱添加到地图上 | 暂无 |
核心代码
var bd1 = new BMapGL.Boundary(); bd1.get('北京市', function (rs) { let count = rs.boundaries.length; // 行政区域的点有多少个 for (let i = 0; i < count; i++) { let path = []; let str = rs.boundaries[i].replace(' ', ''); let points = str.split(';'); for (let j = 0; j < points.length; j++) { let lng = points[j].split(',')[0]; let lat = points[j].split(',')[1]; path.push(new BMapGL.Point(lng, lat)); } let prism = new BMapGL.Prism(path, 5000, { topFillColor: '#5679ea', topFillOpacity: 0.5, sideFillColor: '#5679ea', sideFillOpacity: 0.9 }); map.addOverlay(prism); prism.addEventListener('mouseover', function (e) { document.getElementById('city').innerHTML = '北京市'; this.setTopFillColor('#f00'); console.log(this.getTopFillColor()); }); prism.addEventListener('mouseout', function (e) { console.log(this.getTopFillColor()); e.target.setTopFillColor('#ccc'); console.log(e.target.getTopFillColor()); }); } });
复制
深色
复制成功