如何隐藏集群中的标记(Mapbox.js / leafmarkercluster)

How to hide markers that are in a cluster (Mapbox.js / Leaflet Markercluster)?

本文关键字:Mapbox js leafmarkercluster 何隐藏 隐藏      更新时间:2023-09-26

我正在展示地图上的照片,这些照片聚集在一起。由于某些原因,我无法弄清楚,标记集群中的标记仍然显示—或者低于或高于它们所在的集群。(参见这里的演示)。

当它们碰巧在集群下面时,这仅仅是一个外观问题(我仍然想解决这个问题),因为单击集群仍然会按预期放大该集群。

但是,当标记呈现在集群上方时,单击集群几乎总是会注册为单击标记,这不是预期的行为。

长话短说,我如何使包含的标记从我的集群中消失(显然,一旦它们不在集群组中,它们就会重新出现)?

这是相关代码:

< script >
  L.mapbox.accessToken = '###MyMapboxToken###';
var map = L.mapbox.map('home-worldmap', 'mapbox.dark', {
  // These options apply to the tile layer in the map.
  tileLayer: {
    // This map option disables world wrapping. by default, it is false.
    continuousWorld: false,
    // This option disables loading tiles outside of the world bounds.
    noWrap: true
  }
}).setView([30, 0], 2);
map.scrollWheelZoom.disable();
var clusterGroup = new L.MarkerClusterGroup();
map.addLayer(clusterGroup);
var myLayer = L.mapbox.featureLayer().addTo(map);
var geojson = {
  type: 'FeatureCollection',
  features: [{
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [-19.512555, 63.530581666667]
      },
      properties: {
        title: 'Skógafoss from Below',
        'marker-size': 'small',
        'marker-color': '#ffcc11',
        'marker-symbol': 'camera',
        url: 'http://phototastic.world/photo/skogafoss-from-below/'
      }
    }, {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [-23.31073, 64.92612]
      },
      properties: {
        title: 'Kirkjufellsfoss on a Cloudy Day',
        'marker-size': 'small',
        'marker-color': '#ffcc11',
        'marker-symbol': 'camera',
        url: 'http://phototastic.world/photo/kirkjufellsfoss-on-a-cloudy-day/'
      }
    }
    /* more Features in the same format ... */
  ]
};
myLayer.setGeoJSON(geojson);
myLayer.on('click', function(e) {
  document.location.href = e.layer.feature.properties.url;
});
clusterGroup.addLayer(myLayer);
map.fitBounds(myLayer.getBounds()); < /script>

完整的源代码可以在这里找到:http://phototastic.world/world-travels/

谢谢你的帮助!

我真的不能在一个fiddle测试,因为你使用令牌和东西,但我认为,"问题"是来自这样一个事实,你添加mapbox层到地图,然后集群层到地图,这意味着技术上在传单方面都是在地图上。所以集群层是正确的,聚合数据和东西,但mapbox层也是独立添加的,所以显示。

尝试删除

.addTo(map);

var myLayer = L.mapbox.featureLayer().addTo(map);