时间戳

首页 > 解决方案 > React + Leaflet - 图层的 Setstyle 正在绘制多个 CircleMarkers

javascript - React + Leaflet - 图层的 Setstyle 正在绘制多个 CircleMarkers

问题描述

每当我将鼠标放在 div 上时，我都在使用 React 和 Leaflet 并尝试绘制一些 CircleMarkers。此 div 包含 1 个或多个 CircleMarkers 坐标的信息（这些是我要更改颜色的 circleMarkers）。

我像这样初始化地图：

this.map = L.map("map", { zoomControl: false });
let layer = L.tileLayer(
  "https://api.tiles.mapbox.com/v4/...",
  {   [...]   }
);

然后像这样添加 circleMarkers：（如https://stackoverflow.com/a/43019740/2211939中所建议）

this.totalElements.forEach(value => {
  let circle = new L.CircleMarker(
    [value.geometry.coordinates[1], value.geometry.coordinates[0]],
    {
      renderer: this.myRenderer,
      radius: 5,
      [...]
    }
  )
  .addTo(this.map)
}

然后，当我悬停 div 时，执行的函数是这个：

  changeCirclesColor = parent => {
    this.map.eachLayer(layer => {
      if (layer instanceof L.CircleMarker) {
        for (let child of parent.childrenGeometry) {
          if ( //THE GEOMETRY IS THE SAME) {
            console.log('PAINTED!');   // THIS IS PRINTED ONLY ONCE   
            layer.setStyle({
              fillColor: "#00d3be",
              [...]
            });
         [...]

但是，即使只有一个子元素，也有许多其他 circleMarker 也会改变它们的样式。如果只有一个孩子，当我打印“layer._latlng”时，只有一对坐标，这（我猜）意味着该层中只有 circleMarker。另外，layer.setStyle() 函数只执行一次，我想说，因为 console.log 只打印一次。

我错过了什么？

标签： javascriptreactjsleaflet

解决方案

解决了。显然，我使用的渲染存在问题，在文档的最顶部声明​​： this.myRenderer = L.canvas({ padding: 0.5 });

每次创建渲染器时，我都会将此渲染器添加到 CircleMarker。我不知道删除它可能会产生什么影响，但现在功能正常，所以我就这样离开它，希望我没有把事情搞砸。

老实说，我会删除这篇文章，因为它是如此具体，以至于我认为没有人会遇到同样的问题。但以防万一，我会把它留在这里，希望将来可以为某人节省一些时间。

推荐阅读