リーフレット：マウスオーバーと不透明を使用すると競合が発生する

Question

無色のレイヤーの上にマウスを置くための関数を作成しました。これまでのところとても良いし、マウスの前に戻って戻ってくる機能も作りました。しかし、私が不透明度を使用すると、リセット関数は正常に戻らず、不透明度はデフォルト状態（0.7）になり、現時点の状態ではなくなります。

function highlightFeature_stComerciais(e) { 
      layerStComerciais = e.target; 

      layerStComerciais.setStyle({ 
       weight: 5, 
       color: '#666', 
       dashArray: '' 
      }); 

      info.update(layerStComerciais.feature.properties); 
     } 

機能を

function resetHighlight_stComerciais(e) { 
      setoresComerciaisOverlay.resetStyle(e.target); 
      info.update(); 
     } 

不透明マウスアウトする：

$('#sldOpacity').on('change', function(){ 
      $('#image-opacity').html(this.value); 
      setoresComerciaisOverlay.setStyle({ fillOpacity: this.value }) 
     }); 

デフォルトの不透明度は私が行うとき、私は不透明度の0を置くと仮定すると、0.7であるmouseouverする

機能マウスをレイヤーの上に置いておけばいいのに、マウスを外すと0.7に戻り、私はこれを望んでいない。どうして私のリセットがうまくいかないのですか？ありがとう！

Answer 1

私はあなたにGeoJSONデータやリーフレットにGeoJSON層群を返すL.geoJSON工場を、使用してベクタレイヤーを構築すると思います。

そのグループの作成時に適用されたそのグループのresetStyle方法再適用style、またはデフォルトのスタイルを提供しなかった場合：

は、与えられたベクトルレイヤーのスタイルをリセットしますホバーイベント後にスタイルをリセットするのに便利なオリジナルのGeoJSONスタイルに変換します。

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

簡単な回避策は、同様にGeoJSON層群のstyleオプションを変更するだけです。ただし、すべての子レイヤーに影響します。

group.options.style = newStyle; 

別の解決策ではなく、グループの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>