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

Question

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

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

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

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

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;
}

这是一个 jsFiddle 示例：

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

Answer 2

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

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

• <Name> 标签（在<Document> 下）应为小写：<name>
• <Description> 标签（在<GroundOverlay> 下）应为小写：<description>
• <GroundOverlay> 中的某些标签顺序错误...它们应该是名称、描述、颜色、drawOrder、图标、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 地图中运行，因此希望您能找到一种方法，将不透明度直接应用于图像文件，正如 Gael 建议的那样。