Question

我在地图上渲染了具有初始不透明度的geoJson地图区域。我有一个滑块可以动态改变不透明度。

这是我在运行中设置不透明度（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

使用L.Util.setOptions

所以而不是

layer.setStyle({ fillOpacity: vm.mapOptions.heatmapOpacity });

使用

L.Util.setOptions(layer, { style: { fillOpacity: vm.mapOptions.heatmapOpacity } });

Answer 2

Leaflet GeoJSON Layer Group的resetStyle方法重新应用创建该组时应用的style，如果您没有提供样式，则重新应用默认值：

将给定的矢量图层样式重置为原始GeoJSON样式，对悬停事件后重置样式非常有用。

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

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

group.options.style = newStyle;

（这是@GabyakaGPetrioli的答案，但您必须将其应用于组，而不是单个功能）

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

＆＃13;

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

＆＃13;

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

＆＃13;

在Leaflet中，如何从现在开始将样式设置为默认样式

2 个答案: