Question

我有一个地方数组，我在表格和地图中显示。我正在为表格中的每个元素显示标记和圆形或多边形之一。当我从表标记图标中选择ant元素时，对该特定元素进行更改。我还有一个滑块可以改变每个元素的圆半径。所有这一切都成功发生但我想分别分离标记，圆形和多边形层，然后使用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

如果我理解正确，您只想在使用滑块时更改所有圆圈的半径。

您已经构建了一些Leaflet图层并将它们存储在this.layers属性的图层组中。

在这种情况下，您只需：

使用eachLayer方法迭代图层组中的图层。
检查layer是L.Circle的实例（如果Circle，则为import {circle, Circle} from 'leaflet'）
使用setRadius方法更改圆半径。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 2

我认为问题在于您将this.layers直接分配给layerGroup，这是不允许的。 this.layers需要是一个数组或一个可迭代的（这就是你得到错误的原因）。

请改为尝试：

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

    ...

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

ngx-leaflet插件期望this.layers是一个数组。它可以是Leaflet识别为Layer的任何数组。这意味着它可以是一个layerGroups数组......例如：

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

在Angular 5

2 个答案: