时间戳

首页 > 解决方案 > 如何在 React 框架中将不透明度应用于 Google 地图之上的 KML 层？

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

问题描述

我遇到了 2 个问题： 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英寸2011年初

我尝试了以下方法： 1. 在 React 中使用 CSS 类应用不透明度。2. 在 React 中使用 CSS ID 应用不透明度。

有人建议通过先将图像转换为 .png 然后通过 KML 文件调用它们来修改图像的不透明度。但是做731张图片是很讲究的。

这是有关代码和框的问题的最小再现： 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 上的免费配额。

标签： xmlreactjsgoogle-mapskml

解决方案

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

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

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

推荐阅读