Как нарисовать круг кластера в соответствии со свойствами тех мест, которые находятся за ним в Mapbox js? - PullRequest
Новая
       27

Как нарисовать круг кластера в соответствии со свойствами тех мест, которые находятся за ним в Mapbox js?

0 голосов
/ 06 апреля 2019

У меня есть карта, которая содержит 3 слоя:

  1. уровень кластера, 2. уровень счетчика кластеров, 3. слой точек.

Точки - это некоторые местоположения, каждое из которых имеет свойство -> locationStatus. Согласно этому статусу я закрашиваю эту точку черным или желтый. Сейчас я пытаюсь стилизовать круг кластера в соответствии со свойствами тех мест, которые находятся за ним, поэтому

если все местоположения за этим кластером имеют статус == 0, тогда круг кластера будет желтым,

если все местоположения имеют статус == 1, тогда круг кластера будет черным

в противном случае, если есть оба местоположения со статусом 1 и 2, тогда круг скопления будет черно-желтым.

То, что я нашел до сих пор, это изменить цвет кластера в соответствии с количеством мест. Вместо этого я пытаюсь отфильтровать местоположения по их статусу. https://docs.mapbox.com/mapbox-gl-js/example/cluster/

map.addLayer({
                    id: "clusters",
                    type: "circle",
                    source: "wemap",
                    filter: ["has", "point_count"],
                    paint: {
                        "circle-stroke-width": 4,
                        "circle-stroke-color": "#fff",
                        "circle-color": [
                            "step",
                            ["get", "point_count"],
                            "#8398af",
                            100,
                            "#8398af",
                            750,
                            "#8398af"
                        ],
                        "circle-radius": [
                            "step",
                            ["get", "point_count"],
                            17,
                            100,
                            17,
                            750,
                            17
                        ]
                    }
                });

                map.addLayer({
                    id: "cluster-count",
                    type: "symbol",
                    source: "wemap",
                    filter: ["has", "point_count"],
                    layout: {
                        "text-field": "{point_count_abbreviated}",
                        "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
                        "text-size": 13,

                    },
                    paint: {
                        "text-color": "#ffffff"
                    }
                });

                map.addLayer({
                    id: "points",
                    type: "circle",
                    source: "wemap",
                    filter: ["!", ["has", "point_count"]],
                    paint: {
                        "circle-stroke-width": 2,
                        'circle-color': ['get', 'markerColor'],
                        "circle-radius": 6,
                        "circle-stroke-color": "#fff",
                    }
                });

И вот как я создаю элементы для местоположений: 

var features = this.props.locations.map((item, i) => {
            return {
                "type": "Feature",
                "properties": {
                    "markerColor": item.locationStatus === 0 ? '#000' : '#f8c146',
                    "description": createDescription(item)
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [item.longitude, item.latitude]
                }
            }
        });
...