标签：javascript leaflet openstreetmap html
我正在制作一个使用滑块来显示或隐藏标记的地图,我想添加聚类功能,每个都可以完美地工作,但我希望滑块显示标记,如果标记非常接近使用群集.问题是,个人和标记集群都在显示,我希望所显示的标记集群而不是集群一直存在
<script type="text/javascript">
var sliderControl = null;
//creating layers
var cities = new L.LayerGroup();
var mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenstreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png';
var grayscale = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {id: 'remote-sensing.n8k508ak', attribution: mbAttr, accessToken: 'pk.eyJ1IjoicmVtb3RlLXNlbnNpbmciLCJhIjoiYWNiYzg0ZWU2Mjk3ZTU5NjE4MmQyZWEzZTY2ZWNlYjIifQ.U7mp4MXdcjaIwW_syAqriQ'})
, streets = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {id: 'remote-sensing.84f6c85a', attribution: mbAttr, accessToken: 'pk.eyJ1IjoicmVtb3RlLXNlbnNpbmciLCJhIjoiYWNiYzg0ZWU2Mjk3ZTU5NjE4MmQyZWEzZTY2ZWNlYjIifQ.U7mp4MXdcjaIwW_syAqriQ'});
//create and add the layers to the map
var map = L.map('map', {
center: [33.9, 35.877],
zoom: 10,
layers: [ streets, cities]
});
//get length of the entries array
var len = "{{events|length}}";
var date = 1;
var time = 2;
var lat = 4;
var lon = 5;
//get events from database
var stri = "{% for event in events %} {{event.timestamp|date:"Y-m-d H"}} {{event.lat}} {{event.lon}} <br> {% endfor %}";
var entry = stri.split(" ");
//create the clustermarker object
var markers = new L.markerClusterGroup();
//create markers and add to cluster
var mymark;
for (var t = 0; t < len; t++) {
mymark = new L.marker([entry[lat], entry[lon]], {time: "\"" + entry[date] + entry[time] + "+01\""});
mymark.bindPopup("<b>Accident</b><br>this is marker number " + (t + 1) + " with coordinates :[" + entry[lat] + "," + entry[lon] + "]").openPopup();
markers.addLayer(mymark);
date += 8;
time += 8;
lat += 8;
lon += 8;
}
mymark = new L.marker([33.8,35.5]);
markers.addLayer(mymark);
mymark = new L.marker([33.8,35.5]);
markers.addLayer(mymark);
mymark = new L.marker([33.8,35.5]);
markers.addLayer(mymark);
mymark = new L.marker([33.8,35.5]);
markers.addLayer(mymark);
mymark = new L.marker([33.8,35.5]);
markers.addLayer(mymark);
mymark = new L.marker([33.8,35.5]);
markers.addLayer(mymark);
mymark = new L.marker([33.8,35.5]);
markers.addLayer(mymark);
mymark = new L.marker([33.8,35.5]);
markers.addLayer(mymark);
mymark = new L.marker([33.8,35.5]);
markers.addLayer(mymark);
//add cluster to map
// map.addLayer(markers);
//baseLayers for the map
var baseLayers = {
"Grayscale": grayscale,
"streets": streets
};
layerGroup = L.layerGroup(markers);
// $.getJSON("data.geojson", function(data) {
// var testlayer = L.geoJson(data);
var sliderControl = L.control.sliderControl({ position: "topright", layer: markers, range: false , follow: 3});
// ({position: "topright", layer: testlayer, follow: 3});
map.addControl(sliderControl);
sliderControl.startSlider();//});
</script>抱歉一些评论,有些只是作为debuggung评论的实际代码
解决方法:
2016年3月编辑：
您现在只需使用插件Leaflet.MarkerCluster.LayerSupport即可实现此目的,而无需更改Leaflet Slider插件代码.
见演示LayerSupport with LeafletSlider plugin.
在你的情况下,你会这样做：
var markers = L.layerGroup();
// Add all your markers into `markers` Layer Group.
// Check into MCG Layer Support!
// Add to map first before checking in.
L.markerClusterGroup.layerSupport().addTo(map).checkIn(markers);
var sliderControl = L.control.sliderControl({
position: "topright",
layer: markers,
range: false,
follow: 3
});
map.addControl(sliderControl);
sliderControl.startSlider();
Disclosure: I am the author of that plugin.
原始答案：
当地图上的MarkerClusterGroup同时处理它们时,不要直接向(从)地图添加(删除)单个标记.
MCG希望成为唯一一个管理标记的组,如果你想显示/隐藏一些标记,你必须使用markers.addLayer(myMarker); (或removeLayer),其中标记是你的MCG.
因此,Leaflet Time-Slider(sliderControl)插件与MCG不兼容：它直接向(从)地图添加(移除)标记.它对您的MCG一无所知.
不过,您应该能够通过在插件代码中使用markers.addLayer(对于removeLayer来说相同)替换任何map.addLayer,使其与MCG兼容.不要忘记将MCG添加到地图中.
标签：javascript,leaflet,openstreetmap,html 来源： https://codeday.me/bug/20190702/1357770.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。