如何更改在 KML 文档中作为图标导入的图像的不透明度？

Question

我正在尝试修改作为 KML 文档中的图标导入的图像的不透明度。我如何实现这个 objective ？请耐心等待我，我是编程初学者。

根据 Google 的文档，我尝试在 Icon 标签周围使用 Style 和 IconStyle 标签，并提到了 opacity0.4opacity 以及 color#64ffffffcolor 和 color#66ffffffcolor，但它不起作用。

我也试过在没有 Style 和 IconStyle 标签的情况下只在图标周围插入不透明度或颜色标签，它也不起作用。

测试环境：http://display-kml.appspot.com/ Google 的参考文档：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>

预期结果：40% 不透明度实际结果：不透明度没有变化

Answer 1

您不能直接在 KML 中修改图像的不透明度。

实现此目的的一种方法是使用已具有所需不透明度的 PNG 图像。

另一种方法是设置自定义 CSS class。

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

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

这是一个 jsFiddle 示例：

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

Answer 2

您可以通过向 KML 添加颜色标签来更改叠加层图像的不透明度，它可以在 Google 地球和许多其他 KML 渲染器中使用，但在某些地方无法使用，例如Google 地图。如果您查看 Google 地图 (documentation here) 中支持的 KML 元素列表，您会看到 <color> 标签受 "partially" 支持，但不支持与 <GroundOverlay> 一起使用。这就是为什么您的示例 KML 在 GMaps 中不起作用，即使它在 Google 地球专业版中运行良好（显示部分透明的叠加层）。

请注意，您的示例 KML 文件中还有许多其他小问题。 Google Earth 和许多其他 KML 渲染器通常会忽略它们，但最佳做法是正确设置它们，尤其是当您想要拥有模式有效的 KML 文件并避免意外问题时。

<Name> 标签（在 <Document> 下）应该是小写的：<name>
<Description> 标签（在 <GroundOverlay> 下）应该是小写的：<description>
您 <GroundOverlay> 中的某些标签顺序错误...它们应该是名称、描述、颜色、绘制顺序、图标、LatLonBox。
你在<Icon>标签里面的<color>标签是无效的（图标不能直接包含颜色），所以需要去掉。此外，该颜色值包含 # 符号，这对 KML 颜色无效。

这里是经过更正的示例 KML：

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

虽然这在地球上也有效，但由于我上面提到的问题，它在 Google 地图中仍然无效，因此希望您能找到一种直接将不透明度应用于图像文件的方法，如盖尔提议。

如何更改在 KML 文档中作为图标导入的图像的不透明度？

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

xml

google-maps

kml