Mapbox - полностью отключить кластеризацию - PullRequest
Новая
       10

Mapbox - полностью отключить кластеризацию

0 голосов
/ 05 июля 2019

Я начал играть с Mapbox, и все работает так, как мне хотелось бы, за исключением того, что я не смог понять, как отключить кластеризацию. Вот мой код: 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add custom icons with Markers</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

    <style>
        .marker {
            /*display: block;*/
            border: none;
            /*border-radius: 50%;*/
            cursor: pointer;
            padding: 0;
            background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Map_pin_icon.svg/176px-Map_pin_icon.svg.png');
            background-size: cover;
            width: 20px;
            height: 27px;
            /*border-radius: 50%;*/
            /*cursor: pointer;*/
        }
    </style>

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

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoibmFiZWxla3QiLCJhIjoiY2p4ZXVubnQwMGVmcTN6cGU0c3JpZmM2diJ9.peecDCcSljWhChxCknv7AQ';

        var coordinates = [
            [6.73579, 78.72300],
            [2.70886, 11.51694],
            [34.05482, -57.09742],
            [-39.05019, 89.79126],
            [17.44893, 35.57014],
            [23.60105, 168.12674],
            [-4.87631, 72.99334],
            [39.7392, -104.9903],
            [39.79905,-105.78118],
            [39.80266,-105.78692],
            [39.79758,-105.78061],
            [39.80314,-105.78978],
            [39.80313,-105.78999],
            [39.80103,-105.78272],
            [39.80096,-105.78259],
            [39.80187,-105.78407],
            [39.80283,-105.78593],
            [39.79937,-105.78134],
            [39.80023,-105.78164],
            [39.80272,-105.78765],
            [39.80263,-105.78673],
            [39.80264,-105.78676],
            [39.80125,-105.78326],
            [39.7976,-105.78028],
            [39.80316,-105.7905],
        ]
        var num_coordinates = Object.keys(coordinates).length

        var geojson = {
          "type": "FeatureCollection",
          "features": []
        }

        for (var coord_ind = 0; coord_ind < num_coordinates; coord_ind++) {
          geojson.features.push({
            "type": "Feature",
            "properties": {
                "message": "Bar",
                "iconSize": [300, 300]
            },
            "geometry": {
                "type": "Point",
                "coordinates": [coordinates[coord_ind][1],    coordinates[coord_ind][0]]  // Longitude then Latitude
            }
          })
        }

        var map = new mapboxgl.Map({
            container: 'map', // container id
            style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
            // style: 'mapbox://styles/mapbox/satellite-v9', // stylesheet location
            center: [-99.66, 38.46], // starting position [lng, lat]
            zoom: 5.5 // starting zoom
        });

        map.on('load', function() {
            map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Map_pin_icon.svg/176px-Map_pin_icon.svg.png', function(error, image) {
                if (error) throw error;
                map.addImage('pin', image);
                map.addSource("photo_locations", {
                    type: "geojson",
                    data: geojson,
                    cluster: false,
                    clusterMaxZoom: 1, // Max zoom to cluster points on
                    clusterRadius: 1 // Radius of each cluster when clustering points (defaults to 50)
                });
                map.addLayer({
                    "id": "points",
                    "type": "symbol",
                    "source": "photo_locations",
                    "layout": {
                        "icon-image": "pin",
                        "icon-size": 0.12
                    }
                });
            });
        });

    </script>

</body>
</html>

Вы видите, что для моего источника установлено значение cluster: false. Однако, если вы отобразите это в своем браузере, контакты по-прежнему будут сгруппированы вместе. Если вы увеличите размер булавки к западу от Денвера, вы увидите, что она разделена на несколько булавок.

Как можно полностью отключить кластеризацию, чтобы каждый отдельный вывод был виден при любом уровне масштабирования? Любые мысли приветствуются. Спасибо!

1 Ответ

1 голос
/ 12 июля 2019

Как и предполагал Географа, добавление "icon-allow-overlap": true помогает. Это необходимо добавить в секцию layout слоя. Итак, теперь у меня есть: 

...
"layout": {
    "icon-image": "pin",
    "icon-size": 0.08,
    "icon-allow-overlap": true
}
...
...