leaflet - geojson 点数据标记未在传单地图中聚类
问题描述
我正在使用leaflet-markercluster 插件对我的点数据进行聚类。我已经将名为“街道”的 geojson 数据加载到地图中。该数据具有大约 40 个点及其各自的属性。我想将这些点聚集在传单地图中。但即使是标记也没有显示在我的地图上。请帮我找出错误。我的代码在这里:
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var street = {...my_geojson_data...}
var s_light_style = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
var markers = L.markerClusterGroup();
L.geoJSON(street, {
onEachFeature : function(feature, layer){
var popupContent = '<h4 class = "text-primary">Street Light</h4>' +
'<div class="container"><table class="table table-striped">' +
'<thead><tr><th>Properties</th><th>Value</th></tr></thead>' +
'<tbody><tr><td> Name </td><td>'+ feature.properties.Name +'</td></tr>' +
'<tr><td>Elevation </td><td>' + feature.properties.ele +'</td></tr>' +
'<tr><td> Power (watt) </td><td>' + feature.properties.Power_Watt + '</td></tr>' +
'<tr><td> Pole Height </td><td>' + feature.properties.pole_hgt + '</td></tr>' +
'<tr><td> Time </td><td>' + feature.properties.time + '</td></tr>';
layer.bindPopup(popupContent)
},
pointToLayer: function (feature, latlng) {
return markers.addLayer(L.marker(latlng))
}
}).map.addTo(markers);
解决方案
将代码替换为
L.geoJSON(street, {
onEachFeature : function(feature, layer){
var popupContent = '<h4 class = "text-primary">Street Light</h4>' +
'<div class="container"><table class="table table-striped">' +
'<thead><tr><th>Properties</th><th>Value</th></tr></thead>' +
'<tbody><tr><td> Name </td><td>'+ feature.properties.Name +'</td></tr>' +
'<tr><td>Elevation </td><td>' + feature.properties.ele +'</td></tr>' +
'<tr><td> Power (watt) </td><td>' + feature.properties.Power_Watt + '</td></tr>' +
'<tr><td> Pole Height </td><td>' + feature.properties.pole_hgt + '</td></tr>' +
'<tr><td> Time </td><td>' + feature.properties.time + '</td></tr>';
layer.bindPopup(popupContent)
},
pointToLayer: function (feature, latlng) {
return markers.addLayer(L.circleMarker(latlng, s_light_style))
}
})
map.addLayer(markers);
在上面的代码中,我指定了 map.addTo(markers)。但实际上我必须用“addLayer”替换“addTo”关键字。我必须添加图层。这样我解决了geojson markerCluster 问题。
推荐阅读
- node.js - Node + Express 路由器 + 类型脚本:字符串 arg 不可分配给 requesthandlerparams 类型
- javascript - 完整的日历 Jquery 插件,我想显示月份而不是 prev 和 next 箭头
- mongodb - C# MongoDB 驱动程序:如何将新的子文档插入到现有文档中
- javascript - 根据高度固定标题自动调整内容部分的边距顶部
- javascript - 如何在 javascript 中循环遍历 XML 节点?
- spring - 如何处理协程中的 Spring 事务?
- javascript - 如何定义从二维数组生成的对象的 id
- ruby - 创建数组和推送值的更好方法
- ssl-certificate - 使用 SSL 客户端证书进行进一步的服务器端身份验证
- laravel - Sendgrid API动态teamplate数据访问问题