更改 featureGroup 内的 Leaflet 图层样式

Question

在构建地图和加载 *.geojson 图层时，我需要对其进行样式设置。我需要通过 featureGroup 执行此操作，因为我计划稍后将数据添加到地图控件。这是一个可重现的例子：

<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 1500px; height: 800px;"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>

var map = L.map('mapid').setView([41.15, 25.9], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox/streets-v11',
  tileSize: 512,
  zoomOffset: -1
}).addTo(map);
$.getJSON('https://raw.githubusercontent.com/tekija/LCd/master/Dimidos_lofos.geojson', function(data) {
console.log(data)
var feature_group_wpp = L.featureGroup(
  {}
).addTo(map);

var myStyle = {
  "fill": "red",
  "weight": 5,
  "opacity": 0.65
};
var geo_json_wpp = L.geoJson(data, {style : myStyle }).addTo(feature_group_wpp);

})
</script>

</body>
</html>

显然，我想看到红色标记，但什么也没发生，它们保持蓝色，没有抛出任何错误。我怎样才能让它们变红？

Answer 1

标记是png图片。您不能为 png 图像添加样式只能更改 png 图像本身

使用 leaflet-color-markers 以蓝色以外的其他颜色显示标记。

<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
</head>

<body>
  <div id="mapid" style="width: 1500px; height: 800px;"></div>
  <script>
    var map = L.map('mapid').setView([41.15, 25.9], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1
    }).addTo(map);

    const icon = L.icon({
      iconSize: [25, 41],
      iconAnchor: [10, 41],
      popupAnchor: [2, -40],
      iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png",
      shadowUrl: "https://unpkg.com/leaflet@1.6/dist/images/marker-shadow.png"
    });

    fetch('https://raw.githubusercontent.com/tekija/LCd/master/Dimidos_lofos.geojson').then(response => response.json())
      .then((data) => {
        var geo_json_wpp = L.geoJson(data, {
          pointToLayer: function(feature, latlng) {
            return L.marker(latlng, {
              icon
            });
          }
        }).addTo(map);

        map.fitBounds(geo_json_wpp.getBounds())
      })
  </script>

</body>

</html>

更改 featureGroup 内的 Leaflet 图层样式

change Leaflet layer style inside featureGroup

html

javascript

json

leaflet