如何在 React 框架中将不透明度应用于 Google 地图之上的 KML 图层？

Question

我面临两个问题： 1. 如何使用 React 框架将不透明度应用于 Google 地图之上的 KML 图层？ 2. 我有一组由 KML 层调用的 731 张图像，Google 求助于这些图像需要通过可公开访问的 URL 进行访问。我将它们托管在 AWS S3 上，但我已经用完了免费配额，而且我只在我的计算机上进行本地测试。如果我明天有成百上千的用户，我该如何实施可扩展的解决方案？

开发环境：React v16.6.1, react-google-maps/api v1.6.0, node v10.10.0, MacBook Pro 13 inches early 2011

我尝试了以下操作： 1. 在 React 中使用 CSS class 应用不透明度。 2. 在 React 中使用 CSS ID 应用不透明度。

有人建议修改图像的不透明度，方法是先将图像转换为 .png，然后通过 KML 文件调用它们。但是做 731 个图像是很挑剔的。

这里是 codesandbox 上问题的最小再现： https://codesandbox.io/embed/jolly-wilson-slhed

return (
<LoadScript
googleMapsApiKey="Google Maps API Key"
>
<GoogleMap
center={{ lat: this.state.lat, lng: this.state.lng }}
mapContainerStyle={mapContainerStyle}
options={mapOptions}
zoom={4}>

<KmlLayer
url="https://nightskybrightness.s3.eu-west- 
3.amazonaws.com/artificialNightSkyBrightness_example.kml">
</KmlLayer>

</GoogleMap>
</LoadScript>
)

预期结果：具有 40% 不透明度的 KML 图层和可扩展以供数百或数千用户使用的解决方案。

实际结果：100% 不透明度的 KML，我已经在 AWS S3 上使用了免费配额。

Answer 1

使用 CSS 方法，在您的 codesandbox 示例中，在文件 styles.css 中添加以下 css 规则：

.App img[src*='googleusercontent.com']{
  opacity: .4;
}

要实施可扩展的解决方案，我强烈建议您在最终用户和 amazon S3 之间放置一个 CDN。我个人使用 Cloudflare，并且有一个免费计划。试试吧！

如何在 React 框架中将不透明度应用于 Google 地图之上的 KML 图层？

How to apply opacity to KML layer on top of Google Maps in the React framework?

xml

reactjs

google-maps

kml