如何解决当更新任何不相关的状态变量时,react-leaflet WMSTileLayer 'params' 选项会导致地图层闪烁
我正在使用 react-leaflet:3.2.0 通过 WMSTileLayer 组件显示 WMS 平铺层。只要我不包含 params
选项,它就可以很好地工作。如果我通过 params
选项包含任何内容,则更新任何状态变量都会导致图层闪烁。
在下面的示例中,我将 params={{hello:'world'}}
硬编码到 WMSTileLayer 选项中,每次我按下按钮更新一个名为 dummy
的完全不相关的状态变量时,地图都会闪烁。因为我可能有很多状态管理正在进行,所以我无法将 params
选项与 WMSTileLayer 一起使用。由于我确实需要使用 params
选项向 WMS 查询字符串添加参数,所以我被卡住了。
谁能告诉我我做错了什么?想必其他人使用这个选项OK。
非常感谢所有帮助,谢谢!
Here is a link to a gif illustrating the problem 代码如下所示。
import React,{ useState } from 'react'
import { WMSTileLayer } from 'react-leaflet'
import * as L from 'leaflet'
import 'proj4leaflet'
import proj4 from 'proj4'
import { MapContainer,TileLayer } from 'react-leaflet'
import { Button } from 'react-bulma-components';
import 'leaflet/dist/leaflet.css'
export default function Dataset(props) {
const zoomLevel = 1
const center = [51.7,-1.5]
const projName = 'EPSG:27700'
const projParams = '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs'
const crs27700 = new L.Proj.CRS(projName,projParams,{
resolutions: [896,448,224,112,56,28,14,7,3.5,1.75,0.875,0.4375,0.21875,0.109375],origin: [-238375,1376256]
}
)
proj4.defs(projName,projParams)
const [dummy,setDummy] = useState(true)
return (
<div>
<div className="dataset-container">
<MapContainer center={center} zoom={zoomLevel} crs={crs27700} attributionControl={false} >
<WMSTileLayer
layers={'pollutant'}
url={`/mapserver/mapserv?map=/maps/pollutant.map&year=05`}
params={{hello:'world'}} // <-- comment out this line to stop the map flickering when the button is pressed
maxZoom={6}
transparent={true}
format='image/png'
opacity={0.8}
/>
</MapContainer>
</div>
<Button onClick={e => setDummy(!dummy)}>Press me</Button>{dummy ? ' dummy=true' : ' dummy=false'}
</div>
)
}
解决方法
我对此进行了调查,但找不到答案。我尝试将 WMS 抽象为一个单独的功能组件,但结果是一样的。我使用可公开访问的 WMS 和默认 CRS 以较少的代码重现了该问题,因此在此处发布以防对其他人进行调查有用:
import React,{ useState } from 'react'
import { MapContainer,WMSTileLayer } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
export default function App() {
const [dummy,setDummy] = useState(true)
return (<>
<div>
<MapContainer style={{height:"400px",width:"600px"}} center={[51.7,-1.5]} zoom={13} >
<WMSTileLayer
layers={'TOPO-OSM-WMS'}
url={`http://ows.mundialis.de/services/service?`}
params={{hello:'world'}} // <-- comment out this line to stop the map flickering when the button is pressed
/>
</MapContainer>
</div>
<button onClick={e => setDummy(!dummy)}>Press me</button>
</>)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。