leaflet聚合圖功能(附源碼下載)

前言

leaflet 入門開發系列環境知識點了解：

• leaflet api文檔介紹，詳細介紹 leaflet 每一個類的函數以及屬性等等
• leaflet 在線例子
• leaflet 插件，leaflet 的插件庫，很是有用

內容概覽

leaflet聚合圖功能
源代碼demo下載

效果圖以下：

本篇主要參考leaflet官網聚合效果插件Leaflet.markercluster:https://github.com/Leaflet/Leaflet.markercluster
這個聚合插件具體使用看github地址，那裏有詳細說明以及例子。

• 模擬數據geojson格式以下：

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}},
……
]};

• 放大地圖到必定級別，根據模擬數據的屬性值Status不一樣，對應不一樣類型的圖標：

//根據Status類型不一樣加載不一樣圖標
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,
});

• 部分核心代碼，完整的見源碼demo下載

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); //設置縮放級別及中心點
 
//聚合圖
var projectPointLayer = L.markerClusterGroup({
showCoverageOnHover: false,
zoomToBoundsOnClick: true,
chunkedLoading: true,
maxClusterRadius: 40, //默認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);
});
}
 
/*
* 點單擊內容函數
*/
function getProjectPopupContent(item) {
const { toPopupItemStr } = this;
const me = this;
// 內容及單擊事件
const elements = $(
`<div>
${toPopupItemStr("名稱", item.Name_CHN)}
${toPopupItemStr("站口個數", item.StationNum)}
<a class="edit">詳情</a>&nbsp;
</div>`
);
return elements;
}
 
// 轉爲popup項
function toPopupItemStr(name, value){
return value ? `<b>${name}：</b>${value}<br>` : "";
};
 
/*
* 加載聚合圖層
*/
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;
//根據Status類型不一樣加載不一樣圖標
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);
};

完整demo源碼見小專欄文章尾部：小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，能夠關注一波