In the past two days, we have been working on the heat map. JS for plug-ins on the official website Open the plug-in, it's disgusting that I didn't find the plug-in to download the compression package, but I did it with the js in the given demo.
1, js to be dragged
<link href="Script/leaflet/leaflet.css" rel="stylesheet" />
<style>
#map{
height: 1000px;
width: 1500px;
}
</style>
<script src="Script/leaflet/leaflet.js"></script>
<script src="data/heatmap.min.js"></script>
<script src="data/leaflet-heatmap.js"></script>You can download it here if you want to save time
2, Parameter meaning in configuration
var config = { //Configuration items of thermodynamic diagram
radius: 'radius', //Set the radius of each thermal point
maxOpacity: 0.9, //Set maximum opacity
// minOpacity: 0.3, / / set the minimum opacity
scaleRadius: true, //Set whether the thermal point has smooth transition
blur: 0.95, //The higher the coefficient, the smoother the gradient. The default value is 0.85,
//The filter factor will be applied to all hot spot data.
useLocalExtrema: true, //Use local extremum
latField: 'latitude', //dimension
lngField: 'longitude', //longitude
valueField: 'count', //Value of thermal point
gradient: { "0.99": "rgba(255,0,0,1)",
"0.9": "rgba(255,255,0,1)",
"0.8": "rgba(0,255,0,1)",
"0.5": "rgba(0,255,255,1)",
"0": "rgba(0,0,255,1)"
},
//Transition, color transition and transition scale, example:
/*
{ "0.99": "rgba(255,0,0,1)",
"0.9": "rgba(255,255,0,1)",
"0.8": "rgba(0,255,0,1)",
"0.5": "rgba(0,255,255,1)",
"0": "rgba(0,0,255,1)"
}
*/
// backgroundColor: 'rgba(27,34,44,0.5)' / / heat map Canvas background
};3, All source code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>leaflet Thermodynamic chart</title>
<link href="Script/leaflet/leaflet.css" rel="stylesheet" />
<style>
#map{
height: 1000px;
width: 1500px;
}
</style>
<script src="Script/leaflet/leaflet.js"></script>
<script src="data/heatmap.min.js"></script>
<script src="data/leaflet-heatmap.js"></script>
</head>
<body>
<div id="map"></div>
<script>
//data
var testData = {
max: 8,
data: [{ lat: 24.6408, lng: 46.7728, count: 3 },
{ lat: 50.75, lng: -1.55, count: 1 },
{ lat: 51.55, lng: -1.55, count: 9 },
{ lat: 52.65, lng: -1.45, count: 8 },
{ lat: 53.45, lng: -1.35, count: 7 },
{ lat: 54.35, lng: -1.25, count: 6 },
{ lat: 5.25, lng: -1.15, count: 5 },
]
};
//To configure
var cfg = {
"radius": 2,
"maxOpacity": .8,
"scaleRadius": true,
"useLocalExtrema": true,
latField: 'lat',
lngField: 'lng',
valueField: 'count'
};
var heatmapLayer = new HeatmapOverlay(cfg);
//layer
var baseLayer = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '...',
maxZoom: 18
}
);
var map = new L.Map('map', {
center: new L.LatLng(25.6586, -80.3568),
zoom: 4,
layers: [baseLayer, heatmapLayer]
});
heatmapLayer.setData(testData);
</script>
</body>
</html>
Four, summary
The thermal diagram effect here can put these longitude, latitude, quantity and other information into the database. When it is needed, it can obtain resources through ajax asynchronous interaction and render. The plug-in seems to have OL plug-ins, too. In this way, the OL can be used for loading point rendering. demo reference website code