更改带有链接图标的KML的不透明度，通过传单地图获取

Question

我一直努力在链接到.k​​ml文件的图标图像中设置适当的不透明度，然后将其实现到Leaflet映射。

我使用了基于此处的leaflet-kml插件：

https://github.com/windycom/leaflet-kml

并且在附加L.KML.js之后，我的代码如下所示：

 var track

    var kml = fetch('Coventry.kml')
      .then( res => res.text() )
      .then( kmltext => {

            // Create new kml overlay
            parser = new DOMParser();
            kml = parser.parseFromString(kmltext,"text/xml");
            track = new L.KML(kml);
            //console.log(kml)

            //const track = new L.KML(kml)
            map.addLayer(track)
            // Adjust map to show the kml
            const bounds = track.getBounds()
            map.fitBounds( bounds )
      });

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

我也在尝试：

  sldOpacity.onchange = function() {
   document.getElementById('image-opacity').innerHTML = this.value;
   track.setStyle({fillOpacity: this.value});
 }

但是没用。

我的CSS看起来像这样：

    #sldOpacity
    {
    opacity: 0.7;
    }

    #image-opacity
    {
    opacity: 0.7;
    }

和HTML

   <span id="image-opacity">0.5</span>
   <input type="range" id="sldOpacity" min="0" max="1" step="0.1" value="0.5" />

CSS仅影响HTML范围，使其透明，而图像仍然不透明。

How to change opacity of image imported as Icon in KML document?

https://jsfiddle.net/woosmap/3za64ksx/

适用于Google Maps API。

一个很好的例子在这里：

但是它仅适用于多边形，而我的问题适用于.kml文件中隐藏的图像，如下所示：

 <GroundOverlay>
<name>Coventry.tif</name>
<description>http://localhost/testc/Coventry.tif</description>
<Icon>
    <href>https://i.imgur.com/58CbNhB.png</href>
    <viewBoundScale>0.75</viewBoundScale>
</Icon>
<color>55ffffff</color>
<LatLonBox>
    <north>52.39388512224325</north>
    <south>52.39299906007814</south>
    <east>-1.458241039649089</east>
    <west>-1.460061203494303</west>
</LatLonBox>
 </GroundOverlay>

图标部分仅在Google Earth中起作用，而在传单中不起作用。

此解决方案看起来还不错，但仅对GeoJSON文件有效...

Change opacity using leaflet without plugin

可能此链接可以带来一些解决方案：

http://michaelminn.net/tutorials/leaflet/

但是很遗憾，我看不到独立的地图源代码。

您有什么解决方案吗？

感谢与问候

Answer 1

此问题的答案可以根据文件KML.js使用不同的KML插件来制作传单，如下所示：

https://github.com/shramov/leaflet-plugins

您的脚本片段应该看起来像这样：

  var track = new L.KML('Coventry.kml', {async: true})
.on('loaded', function (e) {
    map.fitBounds(e.target.getBounds());
})
.addTo(map);
  L.control.layers({}, {'Track':track}).addTo(map);

并且此库可以识别在.XML代码中设置的图像不透明度属性：

   <color>55ffffff</color> 

当图像来自网络时

    <Icon>
<href>https://i.imgur.com/58CbNhB.png</href>
    </Icon>