使用链接图标更改 KML 的不透明度，由传单地图获取答案

【问题标题】：Changing opacity for KML with linked icon, fetched by leaflet map使用链接图标更改 KML 的不透明度，由传单地图获取
【发布时间】：2019-10-14 12:29:07
【问题描述】：

我一直在努力在链接到 .kml 文件的图标图像中设置适当的不透明度，该文件接下来将在 Leaflet 地图中实现。

我使用了基于here的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 地球，不适用于传单。

这个解决方案看起来也不错，但它仅对 GeoJSON 文件有效......

Change opacity using leaflet without plugin

这个链接可能会带来一些解决方案：

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

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

你有什么解决办法吗？

感谢和问候

【问题讨论】：

标签： javascript leaflet kml

【解决方案1】：

这个问题的答案可以根据以下插件在 KML.js 文件中为传单使用不同的 KML 插件：

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

您的脚本 sn-p 应如下所示：

  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>

【讨论】：