Группировка маркерных, круговых и полигональных слоев в Ангуляр 5

Question

У меня есть один массив мест, которые я отображаю в таблице, а также в карте.Я показываю маркер и один из круга или многоугольника для каждого элемента в таблице.Когда я выбираю муравей элемент из таблицы маркер значок меняется для этого конкретного элемента.У меня также есть один ползунок, чтобы изменить радиус кругов для каждого элемента.Все это происходит успешно, но я хочу разделить слой маркера, круга и многоугольника по отдельности, а затем сгруппировать их с помощью layerGroup, чтобы при изменении радиуса я обновлял только слой круга (сейчас мне нужно сбросить слой и обновить маркер, многоугольник и круг),Точно так же, если я выбираю какой-либо элемент в таблице, мне нужно обновить только маркерный слой, а не все три.Я попытался сгруппировать слои следующим образом:

    updateLayers(layerData) {
    this.marker = [];
    for (const ld of layerData) {
      this.marker.push(
        marker([ld['latitude'], ld['longitude']], {
          icon: icon({
            iconSize: [20, 32],
            iconAnchor: [10, 16],
            iconUrl: this.selectedPlaces.indexOf(ld) !== -1 ? this.iconEnablelink : this.iconDisableLink
          })
        }),
        // ld['geofence_type'] && ld['geofence_type'] == 'POLYGON' ? polygon([ld['geofence']['coordinates'][0][0]]) : circle([ld['latitude'], ld['longitude']], { radius: this.radius }),
      );
    }
    console.log('lg', layerGroup([this.marker]));
    this.layers = layerGroup([this.marker]);
  }

Ответ выглядит следующим образом:

   options: {}
   _initHooksCalled: true
   _layers: {45: Array(25)}
   __proto__: NewClass

Я получаю следующую ошибку: «Ошибка при попытке diff '[object Object]'.Разрешены только массивы и итерации "

. Есть ли способ реализовать это эффективно.

Редактировать: Ниже приведен рабочий код.Каждый раз, когда я нажимаю на флажок, я добавляю или удаляю этот элемент в selectedPlaces.Тогда я вызываю эту функцию.Даже при смене слайдера мне приходится снова и снова вызывать эту функцию.Я использую маркер, многоугольник и ползунок в слоях, но я хочу разделить слои на три части, чтобы при выборе любого элемента я обновлял только маркер (если возможно, затем маркер для этого конкретного элемента), а не все круги и многоугольники.Если я обновлю радиус с помощью ползунка, я смогу обновлять только круги без изменения маркеров и полигонов.

updateLayers(layerData) {
this.layers = [];
for (const ld of layerData) {
  this.layers.push(
    marker([ld['latitude'], ld['longitude']], {
      icon: icon({
        iconSize: [20, 32],
        iconAnchor: [10, 16],
        iconUrl: this.selectedPlaces.indexOf(ld) !== -1 ? this.iconEnablelink : this.iconDisableLink
      })
    }),
    ld['geofence_type'] && ld['geofence_type'] == 'POLYGON' ? polygon([ld['geofence']['coordinates'][0][0]]) : circle([ld['latitude'], ld['longitude']], { radius: this.radius }),
  );
}

Answer 1

Я думаю, проблема в том, что вы назначаете this.layers непосредственно в layerGroup, что недопустимо.this.layers должен быть массивом или повторяемым (вот почему вы получаете ошибку).

Попробуйте вместо этого:

updateLayers(layerData) {
    this.marker = [];

    ...

    console.log('lg', layerGroup([this.marker]));
    this.layers = [ layerGroup([this.marker]) ];
}

Плагин ngx-leaflet ожидает этого.слои должны быть массивом.Это может быть массив всего, что Leaflet распознает как слой.Это означает, что это может быть массив layerGroups ... например:

this.layers = [ layerGroup([...], layerGroup[...], ...];

Answer 2

Если я правильно понимаю, вы просто хотите изменить радиус всех ваших кругов при использовании ползунка.

Вы уже создали несколько слоев Leaflet и сохранили их в группе слоев в своем свойстве this.layers.

В этом случае вы просто:

1. Итерируйте слои в вашей группе слоев с помощью метода eachLayer.
2. Проверьте, является ли layer экземпляром L.Circle (или Circle, если вы import {circle, Circle} from 'leaflet')
3. Измените радиус окружности, используя setRadius метод.

var paris = [48.86, 2.35];
var map = L.map('map').setView(paris, 11);
var group = L.layerGroup().addTo(map);

document.getElementById('radius').addEventListener('input', changeRadius);

function changeRadius(event) {
  var newRadius = event.target.value;

  group.eachLayer(function(layer) {
    if (layer instanceof L.Circle) {
      layer.setRadius(newRadius);
    }
  });
}

var circle = L.circle(paris, {
  radius: 1000,
}).addTo(group);

var marker = L.marker(paris).addTo(group);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<input id="radius" type="range" min=500 max=3000 value=1000 />
<div id="map" style="height: 160px"></div>