我正在尝试学习 leaflet 和 geoJSON，但我被卡住了。
我想用圆形标记而不是基本的蓝色标记来聚集标记。我已经设法对标记进行聚类，latlng 是正确的，但弹出窗口只显示最后一个函数的特征。
<!DOCTYPE html>
<html>
<head>
<!-- leaflet css -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<!-- leaflet js -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- geojson data -->
<script src="./data/database.js"></script>
<!-- markercluster -->
<link rel="stylesheet" href="data/Leaflet.markercluster-1.4.1/dist/MarkerCluster.css" />
<link rel="stylesheet" href="data/Leaflet.markercluster-1.4.1/dist/MarkerCluster.Default.css" />
<script src="data/Leaflet.markercluster-1.4.1/dist/leaflet.markercluster-src.js"></script>
<script src="data/Leaflet.markercluster-1.4.1/src/MarkerCluster.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
<!-- map -->
<script>
var map = L.map('map').setView([52.1326, 5.2913], 8);
//osm layer
var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
osm.addTo(map);
var geojsonMarkerOptions = {
radius: 10,
fillColor: "#f7becf",
color: "#000",
weight: 2,
opacity: 2,
fillOpacity: 0.8,
};
var markers = L.markerClusterGroup();
var marker = L.geoJSON(databaseJson);
<!-- geojson -->
var geojson = L.geoJSON(databaseJson, {
onEachFeature: function (feature, layer) {
layer.bindPopup(`<b>` + feature.properties.Omschrijving +
`</b></br> Locatie: ` + feature.properties.Locatie +
`</br>Datum: ` + feature.properties.Dag +
` ` + feature.properties.Maand +
` ` + feature.properties.Jaar +
`</br>Bron: ` + "<a href='" + feature.properties.Bron + "'>" + feature.properties.Bron + "</a>" )
},
pointToLayer: function (feature, latlng) {
return markers.addLayer(L.circleMarker(latlng, geojsonMarkerOptions));
},
}).addTo(map);
</script>
我也试过：
var geojson = L.geoJSON(databaseJson, {
onEachFeature: function (feature, layer) {
layer.bindPopup(`<b>` + feature.properties.Omschrijving +
`</b></br> Locatie: ` + feature.properties.Locatie +
`</br>Datum: ` + feature.properties.Dag +
` ` + feature.properties.Maand +
` ` + feature.properties.Jaar +
`</br>Bron: ` + "<a href='" + feature.properties.Bron + "'>" + feature.properties.Bron + "</a>" )
},
pointToLayer: function (feature, latlng) {
return markers.addLayer(L.circleMarker(latlng, geojsonMarkerOptions));
},
}).addTo(map);
然后弹出文本 + latlng 是正确的，但是蓝色基本标记显示在圆形标记旁边。
所以，我在标记上犯了一个错误，但我不知道我做错了什么。有人可以帮我指出我的错误吗？我似乎无法在教程的帮助下弄明白。