百度热力地图、自定义窗口

最新推荐文章于 2023-11-02 14:19:46 发布

爬坑之路

最新推荐文章于 2023-11-02 14:19:46 发布

阅读量457

点赞数

分类专栏：技术学习文章标签：热力地图自定义窗口个性化地图自定义覆盖物 js

本文链接：https://blog.csdn.net/qq_39584800/article/details/100118027

版权

技术学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

大致需求就是根据设备监测的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 = "<div class='conBox'><p>站点名称："+mapMarkerInfo.siteName+"</p><p>站点地址："+mapMarkerInfo.siteAddress+"</p><p>PM2.5："+mapMarkerInfo.count+"</p><p>监测时间："+mapMarkerInfo.dataTransmissionTime+"</p><svg class='icon' aria-hidden='true'><use xlink:href='#icon-zhankaijiantou'></use></svg></div>"
      }
      //判断有暂存的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>