我是ReactMapGL库的新手，我需要按照我尝试过的方式，使用ReactMapGL库在Mapbox地图上加载openweathermap数据，但没有成功。
<ReactMapGL
{...viewport}
width="100%"
height="300px"
transformRequest={transformRequest(credentials)}
mapStyle={mapName}
onViewportChange={setViewport}
>
<Source id='weatherSource' type='raster' tiles={["https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=874718354841f0e0250b4b06a05a971e"]} tileSize={256}>
<Layer {...weatherLayer} />
</Source>
<div style={{ position: "absolute", right: 20, bottom: 20 }}>
<NavigationControl showCompass={false} />
</div>
</ReactMapGL>
export const weatherLayer: LayerProps = {
id: 'weatherLayer',
type: 'raster',
paint: {
'fill-opacity': 0.7
},
minzoom: 0,
maxzoom: 22
}
但我也尝试过使用HTML的相同方法——它是成功的。
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
zoom: 4,
center: [-87.622088, 41.878781]
});
map.on('load', function(){
map.addLayer({
"id": "simple-tiles",
"type": "raster",
"source": {
"type": "raster",
"tiles": ["https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=874718354841f0e0250b4b06a05a971e"],
"tileSize": 256
},
"minzoom": 0,
"maxzoom": 22
});
});
</script>
</body>
我认为问题出在样式定义上。应该是这样的，没有填充不透明度属性，因为光栅是光栅不透明度：
const weatherLayer: LayerProps = {
id: 'weatherLayer',
type: 'raster',
paint: {
'raster-opacity': 0.5
},
'background-opacity': 0.9,
minzoom: 0,
maxzoom: 22,
};