Изменение непрозрачности для KML со связанным значком, выбираемым по карте листовки - PullRequest
Новая
       12

Изменение непрозрачности для KML со связанным значком, выбираемым по карте листовки

0 голосов
/ 14 октября 2019

Я изо всех сил пытался установить правильную непрозрачность в изображении значка, связанном с файлом .kml, который затем был реализован на карте 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, делая его прозрачным,тогда как изображение остается непрозрачным.

Как изменить непрозрачность изображения, импортированного как значок в документе KML?

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 ...

Изменить непрозрачность с помощью листовки без плагина

Возможно, эта ссылка может дать какое-то решение:

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

но, к сожалению, я не могу увидеть исходный код автономной карты.

У вас есть какие-либо решения?

Спасибо и с уважением

enter image description here

1 Ответ

0 голосов
/ 22 октября 2019

Ответ на этот вопрос может принести использование другого плагина KML для листовки, основанного на файле KML.js согласно плагину ниже:

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>

enter image description here

...