百度热力地图、自定义窗口
大致需求就是根据设备监测的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 point
var img_url;//marker点imgurl
var 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;
//加载热力地图和marker
function 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+':'+second
getMapData[i].dataTransmissionTime=assembleTime
mapMarkerInfo = 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>