hotmap.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="hotmap.css">
</head>
<link href="<%=basePath%>assets/js/plugin/bootstrapSelect/css/bootstrap-select.min.css?v=0.0.0.1" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="hotmap2.js"></script>
<body>
<div id="hotmapbox">
<div class="populationdensity">
<p class="populationtop clearfloat">
<span class="populatiol">颜色对应人口密度</span><span class="populatior">人/100平方米</span>
</p>
<p class="populationcenter">
<img src="populationdensity.png" alt="">
</p>
<div class="populationb">
<ul>
<li><span class="spone">0-5</span></li>
<li><span class="sptwo">6-11</span></li>
<li><span class="spthree">12-17</span></li>
<li><span class="spfour">18-20</span></li>
<li><span class="splast">>20</span></li>
</ul>
</div>
</div>
<!-- <div id="searchbtn" class="BMapLib_box BMapLib_rectangle BMapLib_last" drawingtype="rectangle" title="画矩形" onfocus="this.blur()">
<p>区域框选</p>
</div> -->
<div id="hotmap">
</div>
<div id="progressbar">
<div class="barinterval">
<div class="line">
</div>
</div>
<div id="timebar">
<div class="colorline">
</div><!-- 背景条 -->
<div class="showtime">
<span class="showtimeinfo"></span>
</div> <!--显示时间 -->
<ul class='timer clearfloat'>
<li class="sq"><p id="sq0"></p><div>00:00</div></li>
<li class="sq"><p id="sq1"></p><div>01:00</div></li>
<li class="sq"><p id="sq2"></p><div>02:00</div></li>
<li class="sq"><p id="sq3"></p><div>03:00</div></li>
<li class="sq"><p id="sq4"></p><div>04:00</div></li>
<li class="sq"><p id="sq5"></p><div>05:00</div></li>
<li class="sq"><p id="sq6"></p><div>06:00</div></li>
<li class="sq"><p id="sq7"></p><div>07:00</div></li>
<li class="sq"><p id="sq8"></p><div>08:00</div></li>
<li class="sq"><p id="sq9"></p><div>09:00</div></li>
<li class="sq"><p id="sq10"></p><div>10:00</div></li>
<li class="sq"><p id="sq11"></p><div>11:00</div></li>
<li class="sq"><p id="sq12"></p><div>12:00</div></li>
<li class="sq"><p id="sq13"></p><div>13:00</div></li>
<li class="sq"><p id="sq14"></p><div>14:00</div></li>
<li class="sq"><p id="sq15"></p><div>15:00</div></li>
<li class="sq"><p id="sq16"></p><div>16:00</div></li>
<li class="sq"><p id="sq17"></p><div>17:00</div></li>
<li class="sq"><p id="sq18"></p><div>18:00</div></li>
<li class="sq"><p id="sq19"></p><div>19:00</div></li>
<li class="sq"><p id="sq20"></p><div>20:00</div></li>
<li class="sq"><p id="sq21"></p><div>21:00</div></li>
<li class="sq"><p id="sq22"></p><div>22:00</div></li>
<li class="sq"><p id="sq23"></p><div>23:00</div></li>
<li class="sq"><p id="sq24"></p><div>23:59</div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
hotmap.css
#hotmapbox{
width:1754px;
height:772px;
background: #778811;
position: relative;
}
ul li{
list-style:none;
}
/* 地图鼠标绘图框*/
.BMapLib_Drawing_panel{
border:0 none!important;
}
.BMapLib_hander{
display: none!important;
}
.BMapLib_marker{
display: none!important;
}
.BMapLib_circle{
display: none!important;
}
.BMapLib_polyline{
display: none!important;
}
.BMapLib_polygon{
display: none!important;
}
.BMapLib_rectangle_hover {
display: inline-block!important;
width: 138px!important;
height: 48px!important;
background:url(../images/searchbtn.png) no-repeat 10px 13px rgba(35,177,58,0.7)!important;
border:2px solid rgba(35,177,58,1)!important;
box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.1)!important;
border-radius:4px!important;
position: absolute!important;
top: 12px!important;
right: 13px!important;
z-index: 99999!important;
}
.BMapLib_rectangle{
display: inline-block!important;
width: 138px!important;
height: 48px!important;
background:url(../images/searchbtn.png) no-repeat 10px 13px rgba(35,177,58,0.7)!important;
border:2px solid rgba(35,177,58,1)!important;
box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.1)!important;
border-radius:4px!important;
position: absolute!important;
top: 12px!important;
right: 13px!important;
z-index: 99999!important;
}
.red{
background: red;
}
.clearfloat:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0
}
#hotmapbox #searchbtn{
/* display: none; */
width: 138px;
height: 48px;
background:rgba(35,177,58,0.7);
border:2px solid rgba(35,177,58,1);
box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.1);
border-radius:4px;
position: absolute;
top: 12px;
right: 13px;
z-index: 99999;
}
.BMapLib_rectangle p{
height:48px;
font-size:18px;
line-height: 48px;
font-family:MicrosoftYaHei;
font-weight:400;
margin:0;
color:rgba(255,255,255,1);
text-align: center;
padding-left:30px;
background: url(../images/searchbtn.png) no-repeat 10px 13px;
}
#hotmap{
width: 100%;
height: 100%;
background:#ccc;
}
#hotmapbox .populationdensity {
width:438px;
height:98px;
background:rgba(9,18,33,1);
opacity:0.7;
border-radius:10px;
position: absolute;
bottom: 120px;
right: 15px;
z-index: 99999;
padding-left: 0.15px;
}
#hotmapbox .populationdensity .populationtop {
width: 438px;
height: 10px;
font-family:NotoSansHans-Regular;
font-weight:400;
color:rgba(255,255,255,1);
margin-top: 14px;
}
#hotmapbox .populationdensity .populationtop {
font-size: 14px;
margin-left: 12px;
}
#hotmapbox .populationdensity .populationtop .populatiol {
float: left;
}
#hotmapbox .populationdensity .populationtop .populatior {
float: right;
padding-right: 30px;
}
#hotmapbox .populationdensity .populationcenter {
margin:20px 0 0 10px;
width: 409px;
height: 10px;
/* background: url(../images/new_first/populationdensity.png)no-repeat; */
}
#hotmapbox .populationdensity .populationcenter img {
width: 100%;
height: 100%;
display: block;
padding-top: 5px;
}
#hotmapbox .populationdensity .populationb {
display: inline-block;
font-family:NotoSansHans-Regular;
font-weight:400;
color:rgba(255,255,255,1)
}
#hotmapbox .populationdensity .populationb ul li {
float: left;
}
/* 人口密度 数字排列*/
#hotmapbox .populationdensity .populationb ul li span {
display: inline-block;
width: 42px;
color: #fff;
font-size: 14px;
text-align: center;
/* margin-left: 25px; */
}
/* 人口密度 0-5 */
#hotmapbox .populationdensity .populationb ul li .spone {
/* padding-left: 5px; */
}
#hotmapbox .populationdensity .populationb ul li .sptwo{
margin-left: 30px;
}
#hotmapbox .populationdensity .populationb ul li .spthree{
margin-left: 40px;
}
#hotmapbox .populationdensity .populationb ul li .spfour{
margin-left: 40px;
}
/* 人口密度 >20 */
#hotmapbox .populationdensity .populationb ul li .splast {
margin-left: 40px;
}
/* padding-right: 0;
padding-left: 25px; */
/* 进度条 */
#progressbar{
height: 104px;
width: 100%;
background:rgba(247,247,247,1);
position: absolute;
bottom: 0;
left: 0;
}
#progressbar .barinterval{
width:1664px;
height: 10px;
margin-top:52px;
margin-left: 45px;
/* background: red; */
}
#progressbar .barinterval .line{
width:1664px;
height:1px;
background:rgba(228,228,228,1);
box-shadow:0px 1px 2px 0px rgba(216,215,215,0.58);
}
#progressbar .barinterval .timeaxis li {
width:24px;
height:25px;
background:rgba(247,247,247,1);
opacity:0.9;
border-radius:50%;
float: left;
margin-left: 49px;
}
#progressbar .barinterval .timeaxis{
margin:0;
padding: 0;
position: absolute;
left: 23px;
top: 40px;
}
#progressbar .barinterval .timeaxis li:first-child{
margin: 0;
}
/* 时间 */
/* 进度条背景 */
#progressbar #timebar .colorline{
height: 10px;
background: #BABABA;
/* width: 1680px; */
position: absolute;
top: 52px;
margin-left: 40px;
/* left: 40px; */
}
/* 显示时间框 */
#progressbar #timebar .showtime{
width: 66px;
height: 30px;
background: url(./shoutime.png) no-repeat;
position: absolute;
top: 10px;
display: none;
}
#progressbar #timebar .showtime .showtimeinfo{
display: inline-block;
font-size:12px;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(255,255,255,1);
width: 100%;
text-align: center;
}
/* 圆点 */
#progressbar #timebar .timer{
position: absolute;
top: 12px;
left: 15px;
padding: 0;
z-index: 99999;
}
#progressbar #timebar .timer li{
width: 40px;
float: left;
margin-left: 30px;
text-align: center;
}
#progressbar #timebar .timer li p{
width:24px;
height:25px;
background:#fff;
border-radius:50% ;
margin-left: 8px;
margin-bottom: 5px;
}
#progressbar #timebar .timer li span{
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#progressbar #timebar .timer li:first-child{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
hotmap2.js
$(function () {
// var $p = "<p>区域框选</p>"
// console.log($p)
// $('.BMapLib_rectangle').html("区域框选")
// $('.BMapLib_rectangle_hover').html($p)
// 进度条点击事件
var arr = []; //保存点击的对象索引
var fLeft = '';//进度条开始位置
var fright = '';//时间框显示位置
var lastpoint //保存最后一个时间点的索引
var time = ''//显示时间
$(".sq").on("click", function () {
var index = $(this).index();
var chang = '';//进度条长度 每次点击先清空
$('.showtime').hide();
$('.colorline').width(chang);
if (arr.length == 2) {
//清空数组
arr = [];
//清空背景颜色
for (var i = 1; i <= 20; i++) {
$(".sq").find('p').css({ background: "#fff" });
}
}
arr.push(index);
arr.sort(function (num1, num2) {
if (num1 > num2) {
return 1;
} else {
return -1;
}
});
var num = arr[1] - arr[0]; //两个点击数索引相减的差
chang = num * 70//进度条
if (arr.length > 1) {
fLeft = arr[0] * 70 //进度条第一个点击的开始位置
fright = arr[1] * 70//进度条的最后一个时间点的位置
// 进度条背景
$('.colorline').width(chang);
$('.colorline').css("left", fLeft);
$('.showtime').css("left", fright);
// 显示时间
$('.showtime').show()//时间框显示
// 判断最后一个点击的idnex是多少,如果是24 显示"23:59:59",<10 +"0",
if (arr[1] < 10) {
time = "0" + arr[1] + ":00:00";
$('.showtimeinfo').html(time)//显示时间
} else if (arr[1] >= 10 && arr[1] <= 23) {
time = arr[1] + ":00:00";
$('.showtimeinfo').html(time)//显示时间
} else if (arr[i] = 24) {
time = "23:59:59";
$('.showtimeinfo').html(time)//显示时间
}
}
//第一次点击显示的背景
$(this).find('p').css({ background: "rgba(132,197,230,1)" });
//两次点击的区间
for (var i = arr[0]; i < arr[1]; i++) {
// 渲染区间内的背景颜色
$('#sq' + (i + 1)).css({ background: "rgba(132,197,230,1)" });
}
lastpoint = arr[1]//保存最后一个时间点的索引
// 渲染最后一个时间点的背景颜色
$('#sq' + lastpoint).css({ background: 'URl("point.png")no-repeat' });
});
//点击进度条事件end
//地图
// // 编写自定义函数,创建标注
// function addMarker(point) {
// var marker = new BMap.Marker(point);
// map.addOverlay(marker);
// }
// // 添加标注
// var map = new BMap.Map("hotmap");
// var content = "<table>";
// content = content + "<tr><td> 姓名:" + jsonObject.personName + " " + jsonObject.personLevel + " " + jsonObject.personTag + "</td></tr>";
// content = content + "<tr><td> 时间:" + item.dateStr + "</td></tr>";
// content = content + "<tr><td> 地点:" + item.address + "</td></tr>";
// content += "</table>";
// var infowindow = new BMap.InfoWindow(content);
// marker.addEventListener("click", function () {
// this.openInfoWindow(infowindow);
// });
// // 热力图
// var points = [
// { "lng": 116.418261, "lat": 39.921984, "count": 50 },
// { "lng": 116.423332, "lat": 39.916532, "count": 51 },
// { "lng": 116.419787, "lat": 39.930658, "count": 15 },
// { "lng": 116.418455, "lat": 39.920921, "count": 40 },
// { "lng": 116.418843, "lat": 39.915516, "count": 100 },
// { "lng": 116.416244, "lat": 39.920215, "count": 91 },
// { "lng": 116.41929, "lat": 39.915908, "count": 54 },
// { "lng": 116.422116, "lat": 39.919658, "count": 21 },
// { "lng": 116.4183, "lat": 39.925015, "count": 15 },
// { "lng": 116.421969, "lat": 39.913527, "count": 3 },
// { "lng": 116.422936, "lat": 39.921854, "count": 24 },
// { "lng": 116.41905, "lat": 39.929217, "count": 12 },
// { "lng": 116.424579, "lat": 39.914987, "count": 57 },
// { "lng": 116.42076, "lat": 39.915251, "count": 70 },
// { "lng": 116.425867, "lat": 39.918989, "count": 8 }];
// var map = new BMap.Map("hotmap");
// map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
// var heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 10, "visible": true, "opacity": 70 });
// heatmapOverlay.setDataSet({ data:points,max: 100 });//data是热力图的详细数据
// heatmapOverlay.show();
// var selectedObjArr = [];
// var defaultDistance = 25000;
// var defaultCount = 10;
// var maxCount = defaultCount;
// function heatPointArr(PointArr) {
// selectedObjArr = [];
// var distance;
// for (var i = 0; i < PointArr.length; i++) {
// var count = defaultCount;
// for (var j = 0; j < PointArr.length - 1; j++) {
// distance = map.getDistance(PointArr[j], PointArr[j + 1]);
// if (distance < defaultDistance) {
// count += (defaultDistance - distance) / defaultDistance;
// }
// }
// if (maxCount < count) {
// maxCount = count;
// }
// var obj = {};
// obj["lng"] = PointArr[i].lng;
// obj["lat"] = PointArr[i].lat;
// obj["count"] = Math.round(count);
// selectedObjArr.push(obj);
// }
// }
/**
* 图形画完执行的方法
*
*/
// function overlaycomplete(e) {
// this.localOverlay = e.overlay;
// var path = e.overlay.getPath();
// this.localOverlayPath = JSON.stringify(path);
// this.getLocalCars(1);
// $('#localModal').modal({
// backdrop: 'static'
// });
// }
var overlaycomplete = function(e){
overlays.push(e.overlay);
};
var map = new BMap.Map("hotmap"); // 创建地图实例
var point = new BMap.Point(116.418261, 39.921984);
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(); // 允许滚轮缩放
var overlays = [];
var overlaycomplete = function(e){
overlays.push(e.overlay);
var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组
for(var i=0;i<path.length;i++){
console.log("lng:"+path[i].lng+"\n lat:"+path[i].lat);
}
};
var styleOptions = {
strokeColor:"rgba(0,0,255,1)", //边线颜色。
fillColor:"#fff", //填充颜色。当参数为空时,圆形将没有填充效果。
strokeWeight: 3, //边线的宽度,以像素为单位。
strokeOpacity: 0.8, //边线透明度,取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度,取值范围0 - 1。
strokeStyle: 'dashed' //边线的样式,solid或dashed。
}
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
},
rectangleOptions: styleOptions //矩形的样式
});
//添加鼠标绘制工具监听事件,用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
function clearAll() {
for(var i = 0; i < overlays.length; i++){
map.removeOverlay(overlays[i]);
}
overlays.length = 0
}
$('.BMapLib_rectangle').on('click',function(){
console.log($('.BMapLib_rectangle').prop('className'))
console.log($('.BMapLib_rectangle_hover').prop('className'))
// $('.BMapLib_rectangle').removeClass("BMapLib_rectangle_hover")
})
// $('.BMapLib_rectangle_hover').on('click',function(){
// console.log($('.BMapLib_rectangle_hover').prop('className'))
// })
var points = [
{ "lng": 116.418261, "lat": 39.921984, "count": 50 },
// { "lng": 116.423332, "lat": 39.916532, "count": 51 },
// { "lng": 116.419787, "lat": 39.930658, "count": 15 },
// { "lng": 116.418455, "lat": 39.920921, "count": 40 },
// { "lng": 116.418843, "lat": 39.915516, "count": 100 },
// { "lng": 116.416244, "lat": 39.920215, "count": 91 },
// { "lng": 116.41929, "lat": 39.915908, "count": 54 },
// { "lng": 116.422116, "lat": 39.919658, "count": 21 },
// { "lng": 116.4183, "lat": 39.925015, "count": 15 },
// { "lng": 116.421969, "lat": 39.913527, "count": 3 },
// { "lng": 116.422936, "lat": 39.921854, "count": 24 },
// { "lng": 116.41905, "lat": 39.929217, "count": 12 },
// { "lng": 116.424579, "lat": 39.914987, "count": 57 },
// { "lng": 116.42076, "lat": 39.915251, "count": 70 },
{ "lng": 116.425867, "lat": 39.918989, "count": 100 }];
if (!isSupportCanvas()) {
alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
}
heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 20 });
map.addOverlay(heatmapOverlay);
heatmapOverlay.setDataSet({ data: points, max: 100 });
//是否显示热力图
heatmapOverlay.show();
// addDataPoint(points)
function setGradient() {
var gradient = {};
var colors = document.querySelectorAll("input[type='color']");
colors = [].slice.call(colors, 0);
colors.forEach(function (ele) {
gradient[ele.getAttribute("data-key")] = ele.value;
});
heatmapOverlay.setOptions({ "gradient": gradient });
}
//判断浏览区是否支持canvas
function isSupportCanvas() {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
// ///
function addMarker(point) {
console.log(point)
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
var abc = []
$.each(points, function (index,item) {
abc.push({
lng:item.lng,
lat:item.lat
})
})
console.log(abc)
for (var i = 0; i < abc.length; i++) {
console.log(abc[i])
var points = new BMap.Point(abc[i].lng, abc[i].lat);
addMarker(points);
}
// ///
// var customLayer = new BMap.CustomLayer({
// geotableId: 30960,
// q: '', //检索关键字
// tags: '', //空格分隔的多字符串
// filter: '' //过滤条件,参考http://lbsyun.baidu.com/index.php?title=lbscloud/api/geosearch
// });
// map.addTileLayer(customLayer)
// customLayer.addEventListener('onhotspotclick', callback);//单击图层事件
// function callback(e) {
// // //单击热点图层
// var customPoi = e.customPoi, //获取poi对象
// str = [];
// str.push("address = " + customPoi.address);
// str.push("phoneNumber = " + customPoi.phoneNumber);
// var content = '<p style="width:280px;margin:0;line-height:20px;">地址:' + customPoi.address + '<br>电话:' + customPoi.phoneNumber + '</p>';
// var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { //带检索的信息窗口
// title: customPoi.title, //标题
// width: 290, //宽度
// height: 40, //高度
// panel: "panel", //检索结果面板
// enableAutoPan: true, //自动平移
// enableSendToPhone: true, //是否显示发送到手机按钮
// searchTypes: [
// BMAPLIB_TAB_SEARCH, //周边检索
// BMAPLIB_TAB_TO_HERE, //到这里去
// BMAPLIB_TAB_FROM_HERE //从这里出发
// ]
// });
// var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
// searchInfoWindow.open(point);
// }
});