0

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

我收到以下错误：“尝试区分'[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 }),
  );
}
4

2 回答 2

0

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

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

在这种情况下，您只需：

  1. 使用该方法迭代图层组中的图层eachLayer。
  2. 检查是否是（或者如果你）layer的一个实例L.CircleCircleimport {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>

于 2018-05-29T13:13:17.057 回答
0

我认为问题在于您要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 识别为图层的任何内容的数组。这意味着它可以是 layerGroups 的数组...例如：

this.layers = [ layerGroup([...], layerGroup[...], ...];
于 2018-05-29T13:14:53.797 回答