<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="referrer" content="no-referrer"/>
<title>Historic Topographic Maps</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN -->
<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/axios.min.js"></script>
<script src="lib/turf/turf.min.js"></script>
<script src="lib/leaflet-heat.js"></script>
</head>
<body>
<input type="button" onclick='heatmap();' value="300万(1亿)数据热力图"
style='position:absolute;left:50px;top:50px;background: blue;color:white;z-index: 9999;font-size: 24px'/>
<div style='position:absolute;left:50px;top:100px;background: blue;color:white;z-index: 9999;font-size: 24px'>当前地图级别：<span id="levelDiv">11</span></div>
<div id="map"></div>
<script>
console.log("300万数据");
var map = L.map('map');
//高德地址：http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
//osm地图：https://tile.openstreetmap.org/{z}/{x}/{y}.png
//openstreetmap：https://tile.openstreetmap.org/{z}/{x}/{y}.png
//openstreetmap二版：https://tile-b.openstreetmap.fr/hot/{z}/{x}/{y}.png
new L.TileLayer('https://tile-b.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 20,
minZoom: 1,
attribution: 'ⓒ 2012 Daum'
}).addTo(map);
var center_point=[24.40921859702493,118.08517456054688];
map.setView(center_point, 11);
//聚合半径
var option = {
//像素为单位，热力半径（热力根据级别设计监控）
max:1,
radius: 10,//单位像素
maxZoom:1,
gradient: {0.2:"white",0.4: "blue", 0.6: "cyan", 0.7: "lime", 0.8: "yellow", 1: "red"},
//显示范围
showRadius:200,//单位米
};
//范围
var latlngs = [
[24.2,117.7],
[24.2,118.3],
[24.6,118.3],
[24.6,117.7],
[24.2,117.7],
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
map.on("moveend", heatmap, "heatmap");
map.on("movestart",clearHeatmap, "heatmap");
function clearHeatmap(){
//删除热力图
if(map.heatmapLayer!=null){
map.removeLayer(map.heatmapLayer);
map.heatmapLayer=null;
}
}
function heatmap(){
console.log("当前级别：",map.getZoom());
var zoom=map.getZoom();
document.getElementById("levelDiv").innerHTML=zoom;
if(zoom<=10){
option.max=1000;
option.radius=8;
}
if(zoom==11){
option.max=100;
option.radius=10;
}
if(zoom==12){
option.max=100;
option.radius=10;
}
if(zoom==13){
option.max=50;
option.radius=10;
}
if(zoom==14){
option.max=25;
option.radius=10;
}
if(zoom==15){
option.max=5;
option.radius=10;
}
if(zoom>=16){
option.max=1;
option.radius=10;
}
if(zoom<16){
heatmap300(option);
}else{
heatmap30(option);
}
}
function heatmap30(option){
var bound=map.getBounds();
var viewparams = [
'x1:' + bound.getWest(), 'y1:' + bound.getSouth(),
'x2:' + bound.getEast(), 'y2:' + bound.getNorth()
];
var urlString = "http://10.11.0.87:8088/geoserver/postgres/wfs";
var param = {
service: 'WFS',
version: '1.0.0',
request: 'GetFeature',
typeName: 'postgres:postgresHeatmap',
outputFormat: 'application/json',
maxFeatures: 40000,
srsName: 'EPSG:4326',
};
axios({
methods:"GET",
url: urlString + L.Util.getParamString(param, urlString),
// get请求用params携带请求信息(这里无请求信息，所以是个空对象)
params:{viewparams: viewparams.join(';')}
}).then(res=>{
var result=res.data.features;
var heatPoints=[];
console.log("返回结果",result);
for(var i=0;i<result.length;i++){
var zby = result[i].geometry.coordinates[0][1];
var zbx = result[i].geometry.coordinates[0][0];
var value=result[i].properties.sum;
heatPoints.push([zby, zbx,value]);
}
console.log("heatPoints",heatPoints);
if(map.heatmapLayer==null){
var heatmapLayer=L.heatLayer(heatPoints, option);
map.heatmapLayer=heatmapLayer;
map.addLayer(heatmapLayer);
}else{
clearHeatmap();
heatmap();
}
}).catch(error=>{
console.log("请求失败，失败信息"+ error);
});
}
function heatmap300(){
var zoom=map.getZoom();
var bound=map.getBounds();
//var startCoord=[118.08345794677736,24.46535110473633];
//var destCoord=[118.17993164062499 ,24.524917602539062];
if(zoom<=10){
zoom=11
}
var viewparams = [
'level:'+zoom,
'x1:' + bound.getWest(), 'y1:' + bound.getSouth(),
'x2:' + bound.getEast(), 'y2:' + bound.getNorth(),
];
var urlString = "http://10.11.0.87:8088/geoserver/postgres/wfs";
var param = {
service: 'WFS',
version: '1.0.0',
request: 'GetFeature',
typeName: 'postgres:heatmapoptimize',
outputFormat: 'application/json',
maxFeatures: 1000000,
srsName: 'EPSG:4326',
};
axios({
methods:"GET",
url: urlString + L.Util.getParamString(param, urlString),
// get请求用params携带请求信息(这里无请求信息，所以是个空对象)
params:{viewparams: viewparams.join(';')}
}).then(res=>{
console.log("res",res);
var result=res.data.features;
var heatPoints=[];
console.log("返回结果",result);
for(var i=0;i<result.length;i++){
var zby = result[i].geometry.coordinates[1];
var zbx = result[i].geometry.coordinates[0];
var value=result[i].properties.sum;
heatPoints.push([zby, zbx,value]);
}
console.log("heatPoints",heatPoints);
if(map.heatmapLayer==null){
var heatmapLayer=L.heatLayer(heatPoints, option);
map.heatmapLayer=heatmapLayer;
map.addLayer(heatmapLayer);
}else{
clearHeatmap();
heatmap();
}
}).catch(error=>{
console.log("请求失败，失败信息"+ error);
});
}
</script>
</body>
</html>
3.（高级示例篇）leaflet+postgres+postgis+geoserver实现高性能热力图（亿级别数据量）.zip
版权申诉
5星 · 超过95%的资源 9 浏览量
2021-10-19
13:51:13
上传
评论
收藏 361KB ZIP 举报 
3.（高级示例篇）leaflet+postgres+postgis+geoserver实现高性能热力图（亿级别数据量）.zip （17个子文件） 
map images 
end.png 4KB start.png 4KB
300万.html 6KB lib proj4 
proj4.js 72KB proj4leaflet.js 7KB proj4-compressed.js 72KB turf turf.min.js 590KB axios.min.js 13KB leaflet images marker-icon-2x.png 4KB marker-icon.png 2KB layers.png 1KB layers-2x.png 3KB marker-shadow.png 797B leaflet.js 136KB leaflet-src.js 388KB leaflet.css 13KB leaflet-heat.js 6KB资源评论
zenmedouyoulene2022-05-31用户下载后在一定时间内未进行评价，系统默认好评。- xiaofeixia52022-06-17用户下载后在一定时间内未进行评价，系统默认好评。
追夢人生2022-06-21用户下载后在一定时间内未进行评价，系统默认好评。
朴树与海2024-03-08资源很赞，希望多一些这类资源。
