Маркеры кластера в MapBox, как накапливать только отдельные свойства?

Я хочу показать маркеры на карте, где каждый маркер - это UserLocation. User может иметь несколько UserLocation. Когда я кластеризирую маркеры, я хотел бы показать список пользователей этих кластерных маркеров без дубликатов.

Например, возьмем эти 3 маркера рядом:

      { // Marker1
        type: 'Feature',
        properties: {user_id : "Daniele"},
        geometry: { type        : 'Point',
                    coordinates : [lng0, lat0]
                  }
      },
      {// Marker2
        type: 'Feature',
        properties: {user_id : "Daniele"},
        geometry: { type        : 'Point',
                    coordinates : [lng1, lat1]
                  }
      },
      {// Marker3
        type: 'Feature',
        properties: {user_id : "Roberto"},
        geometry: { type        : 'Point',
                    coordinates : [lng2, lat2]
                  }
      }

Когда я сгруппирую их, щелкнув сгруппированный кружок, я хочу увидеть Даниэле, Роберто. Как я могу это сделать?

Кроме того, я хотел бы установить размер круга в соответствии с различным количеством разных пользователей, сгруппированных (в приведенном выше примере должно быть 2).

** ОБНОВЛЕНИЕ 2

JSFIDDLE ‹-

Идея могла бы состоять в том, чтобы построить массив различных имен, а затем использовать выражение length для определения размера круга.

В любом случае должна быть какая-то синтаксическая ошибка ...

 clusterProperties: {
  distinctNames : 
                ['case', 
                   /*cond  */ ["!", ['in',['get', 'user_id'], ['accumulated']]], 
                   /*result*/ ['concat', ['concat', ['get', 'user_id'], ',']],
                                                         
                   /*default*/ ['accumulated']
                ]
}

mapbox mapbox-gl-js mapbox-marker
person DeLac    schedule 09.03.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Согласно документации, вы хотите сделай что-нибудь вроде этого:

map.addSource(userData, {
   id: 'user-locations',
   type: 'geojson',
   data: 'myuserdata.geojson',
   cluster: true,
   clusterProperties: {
      names: ['concat', ['concat', ['get', 'user_id'], ',']]
   }
}

Кластеризованные точки в вашем источнике теперь будут иметь свойство names, которое будет содержать строку имен, разделенных запятыми (и заканчивающихся запятыми).

Более того, я хотел бы установить размер круга в соответствии с разным количеством разных пользователей, сгруппированных (в приведенном выше примере должно быть 2).

Звучит ... сложно. Один из способов, который я могу придумать, - это написать пользовательскую функцию аккумулятора в следующих строках:

  • Сделайте так, чтобы функция возвращала массив из двух значений, [distinctNames, allNames], где первое - целое число, а второе - строка.
  • Если allNames содержит наше текущее имя, просто верните массив.
  • В противном случае верните массив [distinctNames + 1, allNames + thisName].

Подобное манипулирование массивами в выражениях Mapbox GL возможно, но довольно неудобно. Вам нужно использовать ['literal', ...] и ['at', ...]

Код будет выглядеть примерно так:

   clusterProperties: {
      names: ['concat', ['concat', ['get', 'user_id'], ',']],
      distinctNames: [
          ['case', ['in', ['get', 'distinctNames'], ['at', ['accumulated'], 1]
            ['accumulated'],
            ['literal', ['+', ['at', ['accumulated'], 0], 1], ['concat', ['at', ['accumulated'], 1], ['get', 'distinctNames']]]
          ],
          ['concat', '%', ['get', 'user_id'], '%'] // wrap user ID in some unique character so we don't accidentally find user "rob" within another user "robin" for instance.
      ]
   }

Из документации неясно, как именно работает функция аккумулятора или как вы получаете доступ к текущему значению. Их пример подразумевает, что это будет ['get', <name of cluster property>], хотя это кажется немного странным.

person Steve Bennett    schedule 10.03.2021
comment
Спасибо за ваш ответ. Я понял вашу логику, я ее протестирую и дам вам знать. благодарю вас! - person DeLac; 10.03.2021
comment
забудьте об этом ... Я еще не очень хорошо знаю синтаксис выражения, и я немного запутался в коде. Я думаю, скобки отсутствуют ... не могли бы вы исправить это, пожалуйста? Это поможет мне понять :) - person DeLac; 10.03.2021
comment
Я обновил свой вопрос, добавив комментарий к вашему ответу. Я пытался следовать вашим инструкциям, но что-то упустил .. - person DeLac; 10.03.2021
comment
update2. пытаясь получить "накопленную" работу - person DeLac; 11.03.2021
comment
Как я уже сказал, это довольно сложная задача. У меня нет простого способа проверить этот код, я просто надеюсь указать вам в правильном направлении. - person Steve Bennett; 11.03.2021