没有match的答案？试试对话大模型
| 第1行： | 第1行： | ||
| − | <div id="examples_api_center"><div class="title-hd">3D棱柱覆盖物展示</div></div> | + | <div id="examples_api_center"><div class="title-hd">3D棱柱覆盖物展示</div></div><div class="demos_wrap"><div class="header"><div class="active">功能场景</div></div><div class="wrap-mi">该示例介绍如何在地图上添加3D棱柱，以及棱柱的鼠标交互。</div><div class="header"><div class="active">DEMO</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="pc-video"><div class="video-box infor"><div class="video-control1"></div><pre>https://bj.bcebos.com/v1/mapopen/api-demos/video/3D棱柱.mp4</pre> |
| − | <div class="demos_wrap"><div class="header"><div class="active">功能场景</div></div> | + | |
| − | <div class="wrap-mi">该示例介绍如何在地图上添加3D棱柱，以及棱柱的鼠标交互。</div><div class="header"><div class="active">DEMO</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="pc-video"><div class="video-box infor"><div class="video-control1"></div><pre>https:// | + | |
</div><div class="video-title1">3D棱柱覆盖物</div></div></div><div class="api-table-box"><div class="api-info-box"><div class="pre-nav"><div class="left-icon"></div><div>核心接口</div><br/></div> | </div><div class="video-title1">3D棱柱覆盖物</div></div></div><div class="api-table-box"><div class="api-info-box"><div class="pre-nav"><div class="left-icon"></div><div>核心接口</div><br/></div> | ||
{| width="370" border="1" | {| width="370" border="1" | ||
| 第25行： | 第23行： | ||
| 暂无 | | 暂无 | ||
|} | |} | ||
| − | </div></div><div class="header"><div class="active">核心代码</div></div><div class="pre-wrap"> | + | </div></div><div class="header"><div class="active">核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and"> var bd1 = new BMapGL.Boundary(); |
| − | + | ||
| − | + | ||
| − | + | ||
bd1.get('北京市', function (rs) { | bd1.get('北京市', function (rs) { | ||
let count = rs.boundaries.length; // 行政区域的点有多少个 | let count = rs.boundaries.length; // 行政区域的点有多少个 | ||
2020年10月9日 (五) 16:07的版本
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());
});
}
});
复制
深色
复制成功