<!--
实现主要功能:
(1)距离相近点进行热力上图
(2)地图可点击查看点击点的周边数量
(3)动态上热力图
-->
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>Historic Topographic Maps</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link rel="stylesheet" href="lib/leaflet/leaflet.css"/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
<script src="lib/leaflet/leaflet-src.js"></script>
<script src="lib/proj4/proj4.js"></script>
<script src="lib/proj4/proj4leaflet.js"></script>
<script src="lib/heatmap/leaflet-heat.js"></script>
</head>
<body>
<input type="button" onclick='addHeatmap();' value="热力图"
style='position:absolute;left:50px;top:50px;background: blue;color:white;z-index: 9999;font-size: 24px'/>
<div id="map"></div>
<script>
//L.CRS.EPSG4326
var map = L.map('map');
//高德、google图层,地图服务地址可替换成爬取离线部署的地图服务,如:http://106.53.28.207/baidu_sl/{z}/{x}/{y}.png
//高德URL:http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
//openstreetmap:https://tile.openstreetmap.org/{z}/{x}/{y}.png
//googleURL:xxxxxx
//以上地址如果不能访问到新版地图URL,可通过访问新版地图,通过F12-->network获取
new L.TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 20,
minZoom: 1,
attribution: 'ⓒ 2012 Daum'
}).addTo(map);
var center_point = [24.522422570142833,118.11471659369913];
map.setView(center_point, 12);
var heatPoints = new Array();//测试数据点
var heatmap=null;//热力图
function addHeatmap(){
console.log("添加热力图");
//聚合半径
var option = {
//像素为单位,热力半径(热力根据级别设计监控)
max:30,
radius: 10,//单位像素
maxZoom:15,
gradient: {0.2:"white",0.4: "blue", 0.6: "cyan", 0.7: "lime", 0.8: "yellow", 1: "red"},
//显示范围
showRadius:200,//单位米
};
console.log("heatPoints",heatPoints);
heatmap = L.heatLayer(heatPoints, option);
map.addLayer(heatmap);
addHeatMapData();
//移除热力图
//map.removeLayer(heatmap);
map.on("click", function (e) {
console.log(e.latlng);
var count=0;
for(var i=0;i<heatPoints.length;i++){
var flag=pointlnCicle(heatPoints[i][1],heatPoints[i][0],e.latlng.lng,e.latlng.lat,option.showRadius);
if(flag==true){
count=count+heatPoints[i][2];
}
}
var popupOption={className: 'custom',minWidth:20};
var point=[e.latlng.lat,e.latlng.lng];
addPopup(popupOption,point,"周边200米总量:"+count);
});
}
var timeFlag=0;
function addHeatMapData(){
if(timeFlag>39){
return;
}
for (var i = 0; i < 200; i++) {
var zby = 24.44 + Math.random() * 0.20;
var zbx = 118.08 + Math.random() * 0.20;
var value=Math.floor(Math.random() * 100);
heatPoints.push([zby, zbx,value]);
}
console.log("timeFlag",timeFlag);
//console.log("热力点heatPoints:",heatPoints);
if(timeFlag<40){
timeFlag=timeFlag+1;
heatmap.setLatLngs(heatPoints);
window.setTimeout(addHeatMapData,100);
}else{
}
}
/**
* 添加气泡框
* @param option
* @param point
* @param html
* @returns {*}
*/
function addPopup(option, point, html) {
var popup = L.popup(option)
.setLatLng([point[0], point[1]])
.setContent(html)
.openOn(map);
return popup;
}
//判断点与圆的空间关系
function pointlnCicle(x1,y1,x2,y2,r){
var radiusMeter=r/(1000*101.11);
var xdi=x2-x1;
var ydi=y2-y1;
//console.log("radiusMeter",radiusMeter);
if(Math.pow((xdi*xdi+ydi*ydi),0.5)<radiusMeter){
return true;
}else{
return false;
}
};
</script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
16.(leaflet篇)leaflet动态热力图.zip
共13个文件
js:6个
png:5个
css:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 2 下载量 191 浏览量
2021-07-02
15:19:10
上传
评论 1
收藏 203KB ZIP 举报
温馨提示
下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为:https://blog.csdn.net/QQ98281642/article/details/118416366
资源推荐
资源详情
资源评论
收起资源包目录
16.(leaflet篇)leaflet动态热力图.zip (13个子文件)
map
lib
leaflet
images
layers.png 1KB
marker-icon-2x.png 4KB
marker-icon.png 2KB
marker-shadow.png 797B
layers-2x.png 3KB
leaflet-src.js 388KB
leaflet.js 136KB
leaflet.css 13KB
proj4
proj4-compressed.js 72KB
proj4leaflet.js 7KB
proj4.js 72KB
heatmap
leaflet-heat.js 6KB
16.(leaflet篇)leaflet动态热力图.html 5KB
共 13 条
- 1
资源评论
- 追夢人生2022-06-14用户下载后在一定时间内未进行评价,系统默认好评。
- w88563922023-03-25资源简直太好了,完美解决了当下遇到的难题,这样的资源很难不支持~
地图之家家长
- 粉丝: 4770
- 资源: 138
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功