Leaflet plugin only working when geolocation is enabled

问题

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='&copy; <a href="http://osm.org/<copyright">OpenStreetMap</a> contributors'
          />
          <OverpassLayer
            key={this.state.overpassLayerKey}            
          />
        </Map>
    )
  }
}

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)
  }
}

回答1:

The issue is componentWillReceiveProps doesn't fire on the first render. I had to addLayer in the constructor as well.

来源：https://stackoverflow.com/questions/40776256/leaflet-plugin-only-working-when-geolocation-is-enabled

标签

javascript

reactjs

ecmascript-6

leaflet

react-leaflet