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

问题

I am trying to modify the opacity of an image imported as an icon in a KML document. How do I achieve this objective ? Please be patient with me, I am a beginner in programming.

As per Google's documentation I have tried to use Style and IconStyle tags around the Icon tag and mentioned opacity0.4opacity as well as color#64ffffffcolor and color#66ffffffcolor but it doesn't work.

I have also tried to insert only opacity or color tags around the icon without the Style and IconStyle tags, it doesn't work either.

Test environment : http://display-kml.appspot.com/ Google's reference documentation : https://developers.google.com/kml/documentation/kmlreference

<Document>
<Name>World Atlas Artificial Night Sky Brightness</Name>
<GroundOverlay>
<name>ArtificialSkyBrightness537.JPG</name>
<drawOrder>15</drawOrder>
<color>64ffffff</color>
<Description></Description>
<Icon>
<href>https://nightskybrightness.s3.eu-west-3.amazonaws.com/ArtificialSkyBrightness537.JPG</href>
<color>#64ffffff</color>
</Icon>
<LatLonBox>
<north>50.9375138445</north>
<south>42.4041839245</south>
<east>4.2499263</east>
<west>-4.12507035</west>
<rotation>0</rotation>
</LatLonBox>
</GroundOverlay>
</Document>

Expected result : 40% opacity Actual result : No change in opacity

回答1:

You can't modify the Opacity of your image right inside the KML.

One way to achieve this could be by using a PNG image with already desired opacity.

the other way is by setting a custom CSS class.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'));
  var kmlLayer = new google.maps.KmlLayer({
    url: 'https://demo.woosmap.com/stackoverflow/testkmlalpha.kml',
    //to test with css use the following URL:
    //url: 'https://demo.woosmap.com/stackoverflow/testkml.kml',
    map: map
  });
}

#map img[src*="googleusercontent.com"] {
  opacity: 0.4;
}

Here is a jsFiddle sample:

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

回答2:

You CAN change the opacity of an overlay image by adding a color tag to the KML, and it will work in Google Earth, and many other KML renderers, but it will not work in some places like Google Maps. If you look at the list of KML elements supported in Google Maps (documentation here), you'll see that the <color> tag is "partially" supported, but is NOT supported for use with a <GroundOverlay>. That's why your sample KML is not working in GMaps, even though it works fine in Google Earth Pro (shows overlay with partial transparency).

Note that there are a number of other minor issues in your sample KML file. Google Earth and many other KML renderers will usually ignore them, but it's best practice to get them right, especially if you want to have a schema-valid KML file and avoid unexpected issues.

The <Name> tag (under <Document>) should be lower-case: <name>
The <Description> tag (under <GroundOverlay>) should be lower-case: <description>
Some of the tags inside your <GroundOverlay> are in the wrong order... they should be name, description, color, drawOrder, Icon, LatLonBox.
The <color> tag you have inside the <Icon> tag is invalid (Icon cannot directly contain color), so it needs to be removed. Also, that color value contains a # sign, which is not valid for a KML color.

A sample KML with the corrections is here:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2">
<Document>
  <name>World Atlas Artificial Night Sky Brightness</name>
    <GroundOverlay>
      <name>ArtificialSkyBrightness537.JPG</name>
      <description></description>
      <color>64ffffff</color>
      <drawOrder>15</drawOrder>
      <Icon>
        <href>https://nightskybrightness.s3.eu-west-3.amazonaws.com/ArtificialSkyBrightness537.JPG</href>
      </Icon>
      <LatLonBox>
        <north>50.9375138445</north>
        <south>42.4041839245</south>
        <east>4.2499263</east>
        <west>-4.12507035</west>
        <rotation>0</rotation>
      </LatLonBox>
    </GroundOverlay>
</Document>
</kml>

While that will also work in Earth, it will still not work in Google Maps due to the issue I mentioned above, so hopefully you can find a way of applying opacity directly to the image file, as Gael suggested.

来源：https://stackoverflow.com/questions/57589514/how-to-change-opacity-of-image-imported-as-icon-in-kml-document

标签

xml

google-maps

kml