Javascript 单击后如何清除传单层

我尝试使用鼠标单击来选择/取消选择图层。首先，我的地图是这样的

点击一个图层后，我想选择它并高亮显示

现在，如果我再次单击以前选择的图层，我想取消选择它并重置高光。这是我用来做这件事的代码：

  onEachFeature: function(feature,layer) {

      layer.setStyle({fillOpacity: 0.0 , color: '#424a44', weight: 2});
      layer.on('click', function(e) {

      let isLayerAlreadySelected =  // Some logic to undestand if layer alreeady selected

      if(isLayerAlreadySelected) 
         layer.setStyle({fillOpacity: 0.0 , color: '#424a44', weight: 2});
      else
          layer.setStyle({fillOpacity: 0.4 , color: '#004691', weight: 3});
      }

  }

---

但有时，当我尝试取消选择以前选定的图层时，图层样式不会重置不透明度。对此有何建议

您可以测试图层的颜色：

onEachFeature: function(feature,layer) {

      layer.setStyle({fillOpacity: 0.0 , color: '#424a44', weight: 2});
      layer.on('click', function(e) {

          let isLayerAlreadySelected =  e.target.options.color === '#004691';

          if(isLayerAlreadySelected) 
             e.target.setStyle({fillOpacity: 0.0 , color: '#424a44', weight: 2});
          else
             e.target.setStyle({fillOpacity: 0.4 , color: '#004691', weight: 3});

     });
}

---

您可以通过颜色和/或权重进行检查，这意味着您必须覆盖高亮显示的当前行为（悬停，即鼠标悬停和鼠标悬停）行为，以便您可以在单击时进行区分。这将意味着做类似的事情

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: selectLayer
    });
}

然后选择图层，如下所示

function selectLayer(e) {
      let isLayerAlreadySelected =  ((e.target.options.color === '#004691') &&(e.target.options.weight === 3))

      if(isLayerAlreadySelected) 
         layer.setStyle({fillOpacity: 0.0 , color: '#424a44', weight: 2});
      else
          layer.setStyle({fillOpacity: 0.4 , color: '#004691', weight: 3});
}

这意味着Highlight功能将如下所示

//Here you should set the highlight features different from when its clicked particularly take note of your wight and color since its what we use for the logic.
function highlightFeature(e) {
    let layer = e.target;

    layer.setStyle({
        weight: 1,
        color: '#666',
        fillOpacity: 0.1
    });

}

类似地，你会是这样的

//basically you will be putting the styles to their default here what ever values you choosed as default
function resetHighlight(e) {
    let layer = e.target;

    layer.setStyle({
        weight: 0,
        color: '#424a44',
        fillOpacity: 0
    });

}

您可能会发现此文档很有用

---

首先，您可以使用传单GeoJSON工厂选项设置“基本”样式，从而稍微简化代码。这样，高亮显示功能可以使用传单GeoJSON图层组方法方便地重置样式：

let selected=false；
功能onEachFeature（功能，图层）{
层上（“单击”，函数（）{
选中=！选中；
如果（选定）{
layer.setStyle({
填充不透明度：0.4，
颜色：“#004691”，
体重：3
});
}否则{
geojsonLayerGroup.resetStyle（图层）；
}
});
}
const map=L.map（'map'）.setView（[48.86,2.35]，11）；
常数geojsonData={
“类型”：“功能”，
“几何学”：{
“类型”：“多边形”，
“坐标”：[
[
[2.35, 48.88],
[2.32, 48.84],
[2.38, 48.84],
[2.35, 48.88]
]
]
},
“属性”：{}
};
const geojsonLayerGroup=L.geoJSON（geojsonData{
onEachFeature:onEachFeature，
风格：{
填充不透明度：0.0，
颜色：“#424a44”，
体重：2
}
}).addTo（地图）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）
html，
身体，
#地图{
身高：100%；
保证金：0；
}

只需使用方法将给定向量层的样式重置为原始GeoJSON样式即可


var-map=L.map（'map'）.setView（[37.8，-96]，4）；
L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
maxZoom:18，
属性：“©；贡献者”
}).addTo（地图）；
//根据“总体密度”值获取颜色
函数getColor（d）{
返回d>1000？“#800026”：
d>500？“#BD0026”：
d>200？“#E31A1C”：
d>100？“#FC4E2A”：
d>50？“#FD8D3C”：
d>20？“#2月24日c”：
d>10？“#1976年2月”：
#FFEDA0"；
}
功能样式（特征）{
返回{
体重：2，
不透明度：1，
颜色：'白色'，
dashArray:'3'，
不透明度：0.7，
fillColor:getColor（feature.properties.density）
};
}
功能高亮功能（e）{
geojson.resetStyle（）；
var层=e.目标；
layer.setStyle({
体重：5，
颜色：'#666'，
dashArray:“”，
填充不透明度：0.7
});
如果（！L.Browser.ie&&！L.Browser.opera&&！L.Browser.edge）{
层。布氏体（）；
}
}
var-geojson；
功能重置突出显示（e）{
geojson.resetStyle（e.target）；
}
函数ZoomTof性质（e）{
fitBounds（e.target.getBounds（））；
}
//设置填充颜色属性的“设置样式”函数
功能样式（特征）{
返回{
填充颜色：'#004691'，
填充不透明度：0.5，
体重：1，
不透明度：1，
颜色：“#424a44”，
dashArray:'1'
};
}
变量突出显示={
'填充颜色'：'黄色'，
“重量”：1，
“不透明度”：1
};
功能onEachFeature（功能，图层）{
分层({
单击：highlightFeature
});
}
geojson=L.geojson（statesData{
风格：风格，
onEachFeature:onEachFeature
}).addTo（地图）
#地图{
宽度：600px；
高度：400px；
}


您可以选择交换鼠标事件函数来删除高亮显示的层

defaultfeature（）定义为执行取消选择

函数getRandomColor（）{
变量字母='0123456789ABCDEF'；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
功能高亮功能（e）{
highlightLayer=e.target；
if（e.target.feature.geometry.type==='LineString'）{
highlightLayer.setStyle({
颜色：'#ffff00'，
});
}否则{
highlightLayer.setStyle({
fillColor:getRandomColor（），
填充不透明度：.25
});
}
}
函数defaultFeature（e）{
如果（例如，目标！=null）{
highlightLayer.setStyle({
颜色：getRandomColor（），
填充不透明度：.50
});
}否则{
highlightLayer.setStyle({
fillColor:highlightFeature（），
填充不透明度：.25
});
}
}
我测试了你说的内容，但有时我看到选择的图层也是高亮显示的图层。选项。颜色是#424A44对不起，你必须使用
e.target.options.color
，我更新了答案同样的问题：（这不是一个系统性错误，但仍然经常发生，你能创建stackblitz吗？
layer.setStyle({
                    fillColor: getRandomColor(),
                    fillOpacity: 0.50,
                    stroke: false
                });
                layer.on('mouseover', function(e) {
           highlightFeature(e);
  //open popup;
    var popup = L.popup()
   .setLatLng(e.latlng)
   .setContent(feature.properties.Name)
   .openOn(mymap);

   });
      layer.on('mouseout', function(e) {
           defaultFeature(e);
  //open popup;
    var popup = L.popup()
   .setLatLng(e.latlng)
   .setContent(feature.properties.Name)
   .openOn(mymap);
    });

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}


function highlightFeature(e) {
    highlightLayer = e.target;
    if (e.target.feature.geometry.type === 'LineString') {
      highlightLayer.setStyle({
        color: '#ffff00',
      });
    } else {
      highlightLayer.setStyle({
        fillColor: getRandomColor(),
        fillOpacity: .25
      });
    }
}
function defaultFeature(e) {

    if (e.target!=null) {
      highlightLayer.setStyle({
        color: getRandomColor(),
        fillOpacity:.50
      });
    } else {
      highlightLayer.setStyle({
        fillColor: highlightFeature(),
        fillOpacity: .25
      });
    }
}