У меня была ошибка «Недопустимый объект LatLng: (NaN, 86.06925048939979)» при использовании proj4leaflet

#javascript #reactjs #leaflet #geojson #react-leaflet

Вопрос:

У меня была ошибка «Недопустимый объект LatLng: (NaN, 86.06925048939979)» при использовании proj4leaflet

Я использую листовку react для интерактивной карты. для картографической проекции галла-Питера я использовал proj4leaflet, при использовании которого возникла ошибка «Недопустимый объект LatLng: (NaN, 86.06925048939979)», для нормальной проекции это нормально. подробный бросок ошибки-это:

*> Неперехваченная ошибка: Недопустимый объект LatLng: (NaN, 86.06925048939979)

 at new LatLng (LatLng.js:32)
at NewClass.unproject (proj4leaflet.js:46)
at NewClass.pointToLatLng (CRS.js:41)
at NewClass.unproject (Map.js:1000)
at NewClass.layerPointToLatLng (Map.js:1008)
at NewClass._fireDOMEvent (Map.js:1436)
at NewClass._handleDOMEvent (Map.js:1397)
at HTMLDivElement.handler (DomEvent.js:92)*
 
 crs = new L.Proj.CRS(
        'EPSG:25832',
        ' proj=cea  lon_0=0.0  x_0=0.0  y_0=0.0  lat_ts=45.0  ellps=WGS84  datum=WGS84  units=m  no_defs'
        // ' proj=utm  zone=33  ellps=GRS80  towgs84=0,0,0,0,0,0,0  units=m  no_defs'
        ,
        {
            resolutions: [
                64000,32700,16392,8192, 4096, 2048, 1024, 512, 256, 128,
                64, 32, 16, 8, 4, 2, 1, 0.5
            ]
       });

    render() {                                
        return (
            <div className="map_wraper">
                {
                    this.context.sharedValues.loader ? <Loader /> : <MapContainer
                        style={this.containerStyle}
                        zoom={this.zoomLevel}                        
                        center={[10, 0]}                         
                        crs={this.crs}                                         
                    >
                        <MapConsumer>
                            {(map) => {
                                this.map = map
                                map.on('zoomend', this.zoomHandler)
                                return null
                            }}
                        </MapConsumer>

                        <GeoJSON style={this.contryStyle} data={features} onEachFeature={this.onEachCountry}  />
                    </MapContainer>
                }
            </div>
        )
    }
 

Комментарии:

1. Мне это так же любопытно, как и вам. Для тех, кто хочет поработать над этим, вот ванильная брошюра codesandbox, демонстрирующая проблему. Я отключил наложение ошибок, чтобы вы могли фактически взаимодействовать с картой, но вы увидите ошибки в консоли. Я на 100% уверен , что это связано с resolutions возможностью L.Proj.CRS , хотя я не уверен, как это сделать.

2. возможно, вы также найдете здесь некоторые подсказки: Недопустимый объект LatLng (NaN, NaN) при попытке уменьшить/увеличить масштаб