百度热力地图、自定义窗口
大致需求就是根据设备监测的PM2.5浓度值渲染热力图，并在对应的点显示标注物可以点击标注物查看详情，先看一下完成后的效果
这里面用到的api有百度热力地图，百度自定义信息窗口，js包下载地址
首先数据格式是这样的
[{"count": "35","dataTransmissionTime": "20190516085500","lat": "33.648333","lng": "114.327500","mn": "411623208201001","siteAddress": "xxxxx","siteName": "xxxxxxx"}, {"count": "38","dataTransmissionTime": "20190516085500","lat": "33.702778","lng": "114.287500","mn": "411623209201001","siteAddress": "xxxxxxx","siteName": "xxxxxxx"}, {"count": "38","dataTransmissionTime": "20190516085500","lat": "33.656944","lng": "114.469444","mn": "411623108229001","siteAddress": "xxxxxxx","siteName": "xxxxxxx"}
]
其中加载热力地图重要的参数有lng(经度坐标)，lat(纬度坐标)，count(权重即PM2.5的污染浓度)，
个性化地图的设置
- 1、设置个性化地图
- 到百度提供的设置个性化的网址里设置好自己需要的样式 点这里，在这里设置之前要有自己的ak,怎么获取官网上找很简单的，然后点击右上角的下载JSON按钮下载JSON文件保存到项目中 2、引入到项目中,然后设置
-
//渲染地图map = new BMap.Map("container", {enableMapClick: false});map.centerAndZoom(new BMap.Point(114.864664, 33.640845), 10);map.setMapStyle({ styleJson: baidustyle });//baidustyle 即是设置好的个性地图的样式map.enableScrollWheelZoom(); // 允许滚轮缩放
全部代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<base href="${pageScope.basePath}">
<title>My JSP 'welcome.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="./js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak"></script>
<script type="text/javascript" src="./Heatmap_min.js"></script>//热力地图
<script type="text/javascript" src="./js/baiduMap.js"></script>//个性地图的JSON文件
<script type="text/javascript" src="./js/infoBox.js"></script>//自定义窗口
<script type="text/javascript" src="./js/iconfont.js"></script>//icon图标
<style type="text/css">
ul, li {list-style: none;margin: 0;padding: 0;float: left;
}html {height: 100%
}body {height: 100%;margin: 0px;padding: 0px;font-family: "微软雅黑";
}#container {height: calc(100% + 60px);width: 100%;
}.default-body {position: relative;overflow: hidden;
}.conBox{width: 278px;background: rgba(0, 0, 0, 0.5);padding: 14px;color: #ddd;
}
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;position: absolute;left: 135px;bottom: -14px;color: rgba(0, 0, 0, 0.5);
}
.infoBox > img {width:19px;top:10px;right:10px !important
}
</style></head><body class="default-body"><div id="container"></div>
</body>
<script type="text/javascript">var map = null //初始化百度地图var heatmapOverlay = null //初始化热力地图var pointvar img_url;//marker点imgurlvar mapMarker;//Marker点的信息$(document).ready(function () {//渲染地图map = new BMap.Map("container", {enableMapClick: false});map.centerAndZoom(new BMap.Point(114.864664, 33.640845), 10);map.setMapStyle({ styleJson: baidustyle });map.enableScrollWheelZoom(); // 允许滚轮缩放var getMapData;//加载热力地图和markerfunction getMap(mapData) {var img_l="${pageScope.basePath}resources/common/img/img_l.png";//绿色var img_h="${pageScope.basePath}resources/common/img/img1.png";//黄色var img_c="${pageScope.basePath}resources/common/img/img2.png";//橙色var img_hh="${pageScope.basePath}resources/common/img/img4.png";//红色var img_z="${pageScope.basePath}resources/common/img/img5.png";//紫色var img_hhh="${pageScope.basePath}resources/common/img/img3.png";//褐红色// 循环数据for (var i = 0; i < mapData.length; i++) {if(mapData[i].count<=50) {myIcon = new BMap.Icon(img_l, new BMap.Size(36,36));point = new BMap.Point(mapData[i].lng, mapData[i].lat);//创建覆盖物的点//创建覆盖物的点} else if(mapData[i].count>50 && mapData[i].count<=100) {myIcon = new BMap.Icon(img_h, new BMap.Size(36,36));point = new BMap.Point(mapData[i].lng, mapData[i].lat);//创建覆盖物的点} else if(mapData[i].count>100 && mapData[i].count<=150) {myIcon = new BMap.Icon(img_c, new BMap.Size(36,36));point = new BMap.Point(mapData[i].lng, mapData[i].lat);//创建覆盖物的点} else if(mapData[i].count>150 && mapData[i].count<=200){myIcon = new BMap.Icon(img_hh, new BMap.Size(36,36));point = new BMap.Point(mapData[i].lng, mapData[i].lat);//创建覆盖物的点} else if(mapData[i].count>200 && mapData[i].count<=300){myIcon = new BMap.Icon(img_z, new BMap.Size(36,36));point = new BMap.Point(mapData[i].lng, mapData[i].lat);//创建覆盖物的点} else {myIcon = new BMap.Icon(img_hhh, new BMap.Size(26, 37));point = new BMap.Point(mapData[i].lng, mapData[i].lat);//创建覆盖物的点}var marker = new BMap.Marker(point, {icon: myIcon });map.addOverlay(marker); //添加点图标if (i == mapData.length - 1) {//新建热力地图覆盖heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 50, });//添加热力地图map.addOverlay(heatmapOverlay);//设置热力地图的数据heatmapOverlay.setDataSet({ data: mapData, max: 300 });//data是热力图的详细数据 max 权重的最大值//热力地图的相关设置 gradient（0——1）热力图的渐变区间heatmapOverlay.setOptions({"gradient": {.16: 'rgb(0, 228, 0)',.33: 'rgb(255, 255, 0)',.5: 'rgb(255, 126, 0)',.67: 'rgb(255, 0, 0)',.999: 'rgb(255, 0, 76)',1: 'rgb(126, 0, 35)'},opacity: 0});}//弹出信息窗口marker.addEventListener("click", function () {if(mapMarker) {//判断有暂存点的信息时mapMarker.setAnimation(null)//停止上一次选中中的点的跳动}mapMarker = this//将marker点的信息暂存this.setAnimation(BMAP_ANIMATION_BOUNCE); //选中点跳动的动画openInfo(this);}); }};var mapMarkerInfo={};//对应点的信息var infoBoxCon;//暂存infoBox的信息var infoBox;//声明的infoBox//点中点执行的方法function openInfo(_this){var year='';var month= "";var day='';var hour='';var minute =''var second =''var assembleTime = ''var p = _this.getPosition();//获取marker的位置信息var point = new BMap.Point(p.lng, p.lat );//设置信息窗口的位置信息for(var i=0;i<getMapData.length;i++) {if(p.lng == +getMapData[i].lng) {var dataTransmissionTime = getMapData[i].dataTransmissionTime;if(dataTransmissionTime)year = dataTransmissionTime.slice(0,4)month = dataTransmissionTime.slice(4,6);day =dataTransmissionTime.slice(6,8)hour = dataTransmissionTime.slice(8,10)minute = dataTransmissionTime.slice(10,12)second =dataTransmissionTime.slice(12,14)assembleTime = year+'-'+ month+"-"+day+' '+ hour+':'+ minute+':'+secondgetMapData[i].dataTransmissionTime=assembleTimemapMarkerInfo = getMapData[i]}}var content = "站点名称："
+mapMarkerInfo.siteName+"站点地址："
+mapMarkerInfo.siteAddress+"PM2.5："
+mapMarkerInfo.count+"监测时间："
+mapMarkerInfo.dataTransmissionTime+""}//判断有暂存的infoBox的数据时if(infoBoxCon) {infoBoxCon.close();//删除上次的信息窗口}//设置infoBox信息窗口infoBox = new BMapLib.InfoBox(map,content,{closeIconUrl:"${pageScope.basePath}resources/plugins/daiduMap/img/gb.png",//设置关闭按钮的图片offset : new BMap.Size(0, 25)//信息窗口的偏移});infoBoxCon = infoBox;//将本次点中的信息存起来infoBox.open(_this)//打开infoBox，要在哪个marker或者point上打开infobox，_this是本次点中的marker点infoBox.addEventListener("close", function() {//infoBox的关闭事件mapMarker.setAnimation(null)//停止上一次选中中的点的跳动});infoBox.addEventListener("open", function() {//infoBox的打开事件_this.setAnimation(BMAP_ANIMATION_BOUNCE)//选中点跳动的动画});}
</script></html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！