leaflet - Leaflet中如何让一个样式成为默认样式

Question

我在 map 上渲染了具有初始不透明度的 geoJson map 区域。我有一个 slider 可以动态更改不透明度。

这是我动态设置不透明度的部分( typescript )，这是我在自定义传单控件中对输入更改事件执行的:

this.layers.forEach((r: L.GeoJSON<any>) => {
      r.eachLayer((layer: any) => {
             layer.setStyle({ fillOpacity: vm.mapOptions.heatmapOpacity });
      });
});
setTimeout(() => this.map.invalidateSize());

我还可以将鼠标悬停在区域上，在这种情况下，我会降低不透明度并在鼠标悬停时在事件区域​​上放置边框。

当他们离开该区域时，它当前在该区域上使用 resetStyles 将其重置回以前的样式。我在选项 onFeature 回调中设置了它。该区域在 mouseover 事件中突出显示，并在 mouseout 事件中重置，如下所示。

options = {
            style: { stroke: false,
                     fillColor: regionColor,
                     fillOpacity: mapOptions.heatmapOpacity },
            onEachFeature: (feature, layer) => {
                layer.on({
                    mouseover: (e)=> {
                         const lr = e.target;
                         lr.setStyle({
                            weight: 5,
                            color: "#666",
                            dashArray: "",
                            fillOpacity: 0.7,
                           stroke: true
                         });
                        if (!L.Browser.ie && !L.Browser.opera12 && !L.Browser.edge) {
                           lr.bringToFront();
                        }
                    },
                    mouseout: (e) => {
                       prop.featureGeoJson.resetStyle(e.target);
                    }
                });
            }
        };

问题是，如果我使用 setStyle 将不透明度设置为不同的值，然后我进入一个区域，然后我再次离开该区域，调用 resetStyle 将样式重置为更改前的原始默认样式对不透明度进行了调整。

是否可以在图层上设置默认样式，以便调用 resetStyle 将样式设置为具有新不透明度的我的值，而不是创建区域时设置的原始不透明度？我该怎么做？

Answer 1

resetStyle Leaflet GeoJSON 层组的方法重新应用 style在创建该组时应用的样式，如果您没有提供样式，则使用默认样式:

Resets the given vector layer's style to the original GeoJSON style, useful for resetting style after hover events.

如果您稍后更改该组中一个或所有矢量图层的样式，则当您使用 resetStyle 时，它将因此被覆盖，并应用初始样式。

一个简单的解决方法是修改 GeoJSON 图层组的 style 选项以及。但是，它会影响所有它的子层:

group.options.style = newStyle;

(这是@GabyakaGPetrioli 的回答中的建议，但您必须将其应用于组，而不是应用于个别特征)

另一种解决方案是记录每个矢量图层的新样式，并在您想要恢复以前的状态时使用该记录的值，而不是使用组的 resetStyle 方法。

var map = L.map("map").setView([48.85, 2.35], 12);

var geojson = {
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [2.35, 48.85]
  }
};

var point;
var startStyle = {
  color: "red"
};
var newStyle = {
  color: 'green'
};

var group = L.geoJSON(geojson, {
  style: startStyle,
  pointToLayer: function(feature, latlng) {
    point = L.circleMarker(latlng);
    assignStyle(point, startStyle);
    return point;
  }
}).addTo(map);

// Record the style to the individual vector layer if necessary.
function assignStyle(leafletLayer, newStyle) {
  leafletLayer.setStyle(newStyle);
  leafletLayer._recordedStyle = newStyle;
}

// When desired, apply the style that has been previously recorded.
function reassignStyle(leafletLayer) {
  leafletLayer.setStyle(leafletLayer._recordedStyle);
}

document.getElementById('button').addEventListener('click', function(event) {
  event.preventDefault();

  // Either use the wrapper function that records the new style…
  //assignStyle(point, newStyle);

  // Or simply modify the group's style option, if it is acceptable affecting all child layers.
  point.setStyle(newStyle);
  group.options.style = newStyle;
});

group.on({
  mouseover: function(e) {
    e.target.setStyle({
      color: 'blue'
    });
  },
  mouseout: function(e) {
    //reassignStyle(e.layer);
    group.resetStyle(e.layer);
  }
});

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.0.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"></script>

<div id="map" style="height: 100px"></div>
<button id="button">Change color to Green…</button>
<p>…then mouseover and mouseout</p>