Question

我有一个项目，其中许多地点具有完全相同的纬度和经度。这个问题可以在巴黎的20个景点看到。

群集不会像我在别处看到的那样去群集。为什么？

<html>
<head>
<meta charset=utf-8 />
<title>Custom marker styles for imported data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />

<!--Cluster Links-->
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />


<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>



<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />    
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>

<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiYnVkZHliIiwiYSI6ImtseXhGOTQifQ.f2aqgCg7-rXrhy5FxYcLSw';
var map = L.mapbox.map('map', 'mapbox.light')
  .setView([38, 0], 1);

// Omnivore will AJAX-request this file behind the scenes and parse it:
// note that there are considerations:
// - The CSV file must contain latitude and longitude values, in column
//   named roughly latitude and longitude
// - The file must either be on the same domain as the page that requests it,
//   or both the server it is requested from and the user's browser must
//   support CORS.
        var clusterGroup = new L.MarkerClusterGroup();

omnivore.csv('June15thGrid.csv')
    .on('ready', function(layer) {
        // An example of customizing marker styles based on an attribute.
        // In this case, the data, a CSV file, has a column called 'state'
        // with values referring to states. Your data might have different
        // values, so adjust to fit.
        this.eachLayer(function(marker) {

            if (marker.toGeoJSON().properties.Status === 'Lead') {
                // The argument to L.mapbox.marker.icon is based on the
                // simplestyle-spec: see that specification for a full
                // description of options.
                layer.target.eachLayer(function(layer) {
        clusterGroup.addLayer(layer);
    });
                marker.setIcon(L.mapbox.marker.icon({
                    'marker-color': '#ff8888',
                    'marker-size': 'large'
                }));
            } else {
                marker.setIcon(L.mapbox.marker.icon({}));
            }
            // Bind a popup to each icon based on the same properties 

            marker.bindPopup(marker.toGeoJSON().properties.RelationshipName + "<br>" + marker.toGeoJSON().properties.MetroArea + "<br>" + marker.toGeoJSON().properties.Website);
        });
    })
    map.addLayer(clusterGroup);
</script>
</body>
</html>

Mapbox Cluster Leaflet相同的纬度和经度不会取消群集。

0 个答案: