百度地图3D棱柱鼠标事件

百度地图2D API JavaScript API | 百度地图API SDK

百度地图3D API jspopularGL | 百度地图API SDK

3D棱柱效果如下

一. 渲染地图

var map = new BMapGL.Map('container', {style: {styleJson: styleJson2}
})
map.centerAndZoom(new BMapGL.Point(116.404, 39.925), 9);
map.enableScrollWheelZoom(true);
map.setTilt(50);

这块加了一个地图样式是从百度地图 API 上扣的

<script src="http://bj.bcebos.com/v1/mapopen/api-demos/js/mapStyle.js"></script>

二. 获取行政边界点位并添加鼠标点击事件

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.6,sideFillColor: '#5679ea',sideFillOpacity: 0.9});map.addOverlay(prism);// 绑定鼠标事件var events = ['click', 'mouseover', 'mouseout'];for (let i = 0; i < events.length; i++) {prism.addEventListener(events[i], e => {switch (events[i]) {case 'click':alert('北京市');break;case 'mouseover':e.target.setTopFillColor('#475fab');e.target.setTopFillOpacity(1);break;case 'mouseout':e.target.setTopFillColor('#5679ea');e.target.setTopFillOpacity(0.5);break;}});}}
});

首先调用了百度地图获取市级行政边界的方法 Boundary() 去获取了北京市的行政边界

获取到是这个样子的

所以要处理一下 spilt(";") 通过分号处理成另外一个数组

长这个样子

我们平常通过后端获取到的点位格式大概是 [{lat:114, lng: 30}, {lat:114, lng: 30}] 这样的，我们将其循环 new BMapGL.Point(lng, lat) 添加到地图点位当中然后 push 到一个数组里储存起来

例如 path.push(new BMapGL.Point(lng, lat));

打印一下 path

下方就可以直接把这个 path 里的点位渲染成3D棱柱图了

let prism = new BMapGL.Prism(path, 5000, {topFillColor: '#5679ea',topFillOpacity: 0.6,sideFillColor: '#5679ea',sideFillOpacity: 0.9
});
map.addOverlay(prism);

鼠标事件

// 绑定鼠标事件
var events = ['click', 'mouseover', 'mouseout'];
for (let i = 0; i < events.length; i++) {prism.addEventListener(events[i], e => {switch (events[i]) {case 'click':alert('北京市');break;case 'mouseover':e.target.setTopFillColor('#475fab');e.target.setTopFillOpacity(1);break;case 'mouseout':e.target.setTopFillColor('#5679ea');e.target.setTopFillOpacity(0.5);break;}});
}

如果只需要点击事件

prism.addEventListener('click', e => {alert('北京市');
});

百度地图3D棱柱鼠标事件相关推荐

百度地图--3D棱柱效果---省边界数据抽取---Boundary、Point、Prism
3D棱柱效果上代码 var map = new BMapGL.Map("allmap");var point = new BMapGL.Point(116.404, 39.925 ...
百度地图 app 点击事件无效、不触发解决方案
百度地图 app 点击事件无效.不触发解决方案参考文章: (1)百度地图 app 点击事件无效.不触发解决方案 (2)https://www.cnblogs.com/muzhe/articles ...
百度地图3D地球闪动点(修复不在视野内时无法隐藏marker的bug)
一.效果图二.详解本质上为自定义Marker,使用css来做动画特效有关通用模式相关操作,请看<百度地图3D地球接入> 1. 自定义CSS样式 ComplexCustomOverla ...
百度地图路线规划onchange事件触发两次冲突解决
var map = new BMap.Map("allmap",{enableMapClick:false}); map.centerAndZoom("福州市&q ...
vue使用百度地图获取可视区域四角坐标（百度地图四角坐标，百度地图3D可视区域四角坐标）
百度地图api只提供了左下角和右上角两个坐标,左上角坐标和右下角坐标需要自己操作获取,方法如下: 地图自带获取坐标的方法:var bounds = map.getBounds(); //获取地图可视区 ...
centerandzoom 无效_百度地图 app 点击事件无效、不触发解决方案
参考 https://blog.csdn.net/Davis_Dxs/article/details/82425211 具体问题: 对 "地图" 添加 click 事件,在点击地图 ...
百度地图infowindow的close事件_百度地图蒙圈：车主要加油误导母婴店跑偏理由令人啼笑皆非...
常在江湖飘,哪有不挨刀.经常驾车出门在外的您,有过被导航坑的经历么?其实在早些年手机导航刚刚兴起的时候,这类现象确实比较常见,但是到了如今大数据的时代,手机导航数据更新比较及时,问题已经少了很多.不过 ...
百度地图infowindow的close事件_高德地图，百度地图，腾讯地图哪个更准？
先说结论高德第一,百度第二,腾讯第三这些地图商,他们是怎么知道"我家门口新开了一家咖啡店"这一事件的,并且标注上去还拍了照片呢?有些店新开了,有些店倒闭了,10年以前这条街上的 ...
百度地图api点击事件及鼠标滚动缩放
首先找百度拿到密钥http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey不解释, 把ip和密钥设置好干货在此: <!DOC ...
百度地图3d效果和卫星图效果
3D图 3d案例如上图代码如下 <!DOCTYPE html> <html> <head><meta http-equiv="Content-Ty ...

百度地图3D棱柱鼠标事件

一. 渲染地图

二. 获取行政边界点位并添加鼠标点击事件

百度地图3D棱柱鼠标事件相关推荐

最新文章

热门文章

百度地图3D棱柱鼠标事件

一. 渲染地图

二. 获取行政边界点位 并添加鼠标点击事件

百度地图3D棱柱鼠标事件相关推荐

最新文章

热门文章

二. 获取行政边界点位并添加鼠标点击事件