传单插件仅在启用地理定位时有效 [英] Leaflet plugin only working when geolocation is enabled
本文介绍了传单插件仅在启用地理定位时有效的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用带有react-leaflet的传单. 启用地理位置后,OverpassLayer会运行.当因为我在本地主机上而阻止Geolocation时,该应用程序甚至都没有进入OverpassLayer组件.
I am using leaflet with react-leaflet. OverpassLayer is working when geolocation is enabled. When Geolocation is blocked because I'm on localhost, the app isn't even entering the OverpassLayer component.
App.js
import OverpassLayer from './OverpassLayer'
class App extends React.Component {
state = {
zoom: 16,
position: {
lat: 51.505,
lng: -0.09,
},
mapKey: Math.random(),
overpassLayerKey: Math.random()
}
componentDidMount () {
//center map on user's current position
this.handleGeolocation()
this.refreshOverpassLayer()
}
handleGeolocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
position: {
lat: position.coords.latitude,
lng: position.coords.longitude,
},
mapKey: Math.random()
})
}, (err) => {
console.log("Geolocation did not work: " + err)
}
)
} else {
console.log("Geolocation did not work. Navigator.geolocation falsy")
}
}
refreshOverpassLayer = () => {
this.setState({
overpassLayerKey: Math.random()
})
}
render () {
return (
<Map
style={{height: "100vh", width: "100vw"}}
zoom={this.state.zoom}
center={[this.state.position.lat, this.state.position.lng]}
key={this.state.mapKey}
ref='map'
>
<TileLayer
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
attribution='© <a href="http://osm.org/<copyright">OpenStreetMap</a> contributors'
/>
<OverpassLayer
key={this.state.overpassLayerKey}
/>
</Map>
)
}
}
OverpassLayer.js
OverpassLayer.js
import {LayerGroup} from 'react-leaflet'
import L from 'leaflet'
import OverPassLayer from 'leaflet-overpass-layer'
export default class OverpassLayer extends LayerGroup {
componentWillReceiveProps(nextProps) {
console.log(nextProps.key)
console.log('OverpassLayer receiving props')
const query = '('
+ 'node["amenity"]({{bbox}});'
+ 'way["amenity"]({{bbox}});'
+ 'relation["amenity"]({{bbox}});'
+ ');'
+ 'out body;'
+ '>;'
+ 'out skel qt;'
const opl = new L.OverPassLayer({
'query': query,
'endPoint': 'https://overpass-api.de/api/',
})
nextProps.map.addLayer(opl)
}
}
推荐答案
问题是componentWillReceiveProps不会在第一个渲染上触发.我也必须在构造函数中添加Layer.
The issue is componentWillReceiveProps doesn't fire on the first render. I had to addLayer in the constructor as well.
这篇关于传单插件仅在启用地理定位时有效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文