Leaflet aggregate graph function (with source code download)

Foreword

Leaflet entry development series of environmental knowledge points to understand:

• Leaflet api document introduction , detailed introduction to the functions and attributes of each class of leaflet
• leaflet online example
• leaflet plugin , leaflet plugin library, very useful

Content overview

leaflet aggregate graph function
source code demo download

The effect chart is as follows:

This article mainly refers to Leaflet.markercluster, the aggregation effect plug-in for the official website of leaflet: https://github.com/Leaflet/Leaflet.markercluster.
See the github address for specific usage of this aggregation plug-in. There are detailed instructions and examples there.

• The simulation data geojson format is as follows:

var geojson = {"type":"FeatureCollection", "features": [
{"type":"Feature","geometry":{"type":"Point","coordinates":[113.16305738210656,23.13667404697526]},"properties":{"Name_CHN":"赤岗塔","StationNum":1,"Status":1}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[113.18383377370634,23.100037587172096]},"properties":{"Name_CHN":"海心沙","StationNum":2,"Status":1}},
……
]};

• Enlarge the map to a certain level, according to the different attribute values ​​of the simulated data, corresponding to different types of icons:

// Load different icons according to different status types 
var img = './img/projectPoint_HGX.png' ;
 switch (properties.Status) {
 case 1 : 
img = './img/projectPoint_HGX.png' ;
 break ;
 case 2 : 
img = './img/projectPoint_JSZT.png' ;
 break ;
 case 3 : 
img = './img/projectPoint_XMXZ.png' ;
 break ;
 case 4 : 
img = './img/projectPoint_XMZS.png' ;
 break ; 
} 
var myIcon = L.icon({
iconUrl: img,
iconSize: [25, 25],
});
var marker = L.marker(new L.LatLng(coordinate[1], coordinate[0]), {
properties: properties,
icon: myIcon,
});

• Part of the core code, complete see the source code demo download

var map = L.map ('map' ); 
L.tileLayer ( 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x} ' ) .addTo (map); 
map.setView (L.latLng ( 22.95186415, 113.90271877), 9); // Set zoom level and center point 
 
// Aggregation map 
var projectPointLayer = L.markerClusterGroup ({ 
showCoverageOnHover: false , 
zoomToBoundsOnClick: true , 
chunkedLoading: true , 
maxClusterRadius: 40, // default 80 
}). addTo (map); 
 
if (geojson) {
addProjectClusterLayers (geojson, projectPointLayer);
projectPointLayer.on ( "click", function (e) { 
e.layer.unbindPopup (); 
var elements = getProjectPopupContent ( 
e.layer.options.properties 
); 
e.layer.bindPopup (elements [ 0 ]). openPopup (e .latlng); 
}); 
} 
 
/ * 
* Click content function 
* / 
function getProjectPopupContent (item) { 
const {toPopupItemStr} = this ; 
const me = this ;
 // Content and click event 
const elements = $ ( 
` < div> , item.Name_CHN)}
$ {toPopupItemStr ( "Name" 
$ {toPopupItemStr ( " Number of stations" , item.StationNum)}
 <a class="edit"> details </a> & nbsp; 
</ div> ` );
 return elements; 
} / / Turn to popup item function toPopupItemStr (name, value) {
 return value? `<B> $ {name}: </ b> $ {value} <br>`: "";
 }; / * 
* Load the aggregation layer * / function addProjectClusterLayers (geojson, clusterlayer) {
 var markerList = [];
 if (geojson.features.length> 0 ) {
 for ( var i = 0; i <geojson.features.length; i++) {


 


 


if (geojson.features[i].geometry) {
var properties = geojson.features [i] .properties;
 var coordinate = geojson.features [i] .geometry.coordinates;
 // Load different icons according to different Status types 
var img = './img/projectPoint_HGX.png' ;
 switch ( properties.Status) {
 case 1 : 
img = './img/projectPoint_HGX.png' ;
 break ;
 case 2 : 
img = './img/projectPoint_JSZT.png' ;
 break ;
 case 3 : 
img = './img/projectPoint_XMXZ .png ' ;
 break ;
 case 4:
img = './img/projectPoint_XMZS.png';
break;
}
var myIcon = L.icon({
iconUrl: img,
iconSize: [25, 25],
});
var marker = L.marker(new L.LatLng(coordinate[1], coordinate[0]), {
properties: properties,
icon: myIcon,
});
markerList.push(marker);
}
}
}
clusterlayer.addLayers(markerList);
};

For the complete demo source code, see the end of the small column : small column

The source code is provided at the end of the article. If you are interested in this column, you can follow a wave