リーフレットで、今からスタイルをデフォルトのスタイルにする方法

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

作成時に適用されたリーフレットにGeoJSON層群styleを再適用するのresetStyle方法あなたがスタイルを提供していない場合はデフォルトのものです：

与えられたベクトルレイヤのスタイルを元のGeoJSONスタイルにリセットします。ホバーイベント後のスタイルをリセットするのに便利です。

後で1またはそのグループのベクトルレイヤーのすべてのスタイルを変更した場合、それはあなたがresetStyleを使用するときため、上書きされます、そして初期のスタイルが適用されます。

簡単な回避策は、GeoJSONレイヤーグループのstyleオプションも同様にに変更するだけです。

group.options.style = newStyle; 

（つまり@ GabyakaGPetrioliの答えで提案されているものですが、あなたはグループではなく、個々の機能にそれを適用する必要がある）

：しかし、それは すべてその子層に影響を与えます

もう1つの解決策は、各ベクトルレイヤの新しいスタイルを記録し、グループの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>