繁体   English   中英

添加从postgres /节点从geojson提取数据的方法以显示在我的反应传单地图上

Adding method pulling data from a geojson from postgres / node to display on my react leaflet map

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试建立一个地图组件,以显示带有存储在我的postgres /节点后端的地理坐标的标记。 我可以在我的postgres / postgis数据库中插入geojson,因为我在后端设置了可以正常工作的CRUD方法,但是我不知道要添加到地图组件中的哪些代码才能在转到组件选项卡时加载geojson文件。

我该如何添加一种方法进入地图组件以从数据库中提取geojson? 我认为我的动作和服务文件设置正确,并且我认为动作文件中的pullScubaSchools类应导入到地图容器中。

map.component.js

import React, { Component, useState } from 'react';
import { MapContainer, TileLayer, Layer, Marker, Popup, useMapEvents, Map, GeoJSON } from 'react-leaflet';
import "leaflet/dist/leaflet.css";
//import mapData from "../test/mapData.json";
import { pullScubaSchools } from '../actions/scubaSchool.action'


//Layer.geoJSON(pullScubaSchools).addTo(ScubaDivingMap);


export class ScubaDivingMap extends Component {

    //componentDidMount() {
    //    console.log(mapData);
    //}

    render() {

        return(

            <div>
                <MapContainer
                    center={{ lat: 41.505, lng: -0.09 }}
                    zoom={3}
                    scrollWheelZoom={false}>
                    <GeoJSON
                        //style={this.countryStyle}
                        data={pullScubaSchools.diveSchoolGeo}
                        //onEachFeature={this.onEachCountry}
                    />
                    <TileLayer
                        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    <Marker position={[pullScubaSchools]}>
                    <Popup>
                        A pretty CSS3 popup. <br /> Easily customizable.
                    </Popup>
                </Marker>
                </MapContainer>
            </div>
        );
    }
}

export default ScubaDivingMap;

diveschool.service

import axios from 'axios';

const API_URL = "http://localhost:5002/api/diveschool/";

// posts register details to backend
class diveSchoolService {

    scubaSchoolLocations = (diveSchoolName, diveSchoolLocation, diveCertificatesOfferedID, diveSchoolGeo) => {
        return axios.get(API_URL + "diveschoollist", {
            diveSchoolName,
            diveSchoolLocation,
            diveCertificatesOfferedID,
            diveSchoolGeo
        });
    };

export default new diveSchoolService();

scubaSchool.action.js

import { diveSchoolService } from "../services/diveSchool.service";
import { failed_data_load, set_message, data_load_successful } from "./types.action";

export const pullScubaSchools = (dispatch) => {
    return diveSchoolService.scubaSchoolLocations.then(
        (data) => {
            dispatch({
                type: data_load_successful,
                payload: { scubaSchools: data },
            });

            return Promise.resolve();
        },
        (error) => {
            const message =
                (error.response &&
                    error.response.data &&
                    error.response.data.message) ||
                error.message ||
                error.toString();

            dispatch({
                type: failed_data_load,
            });

            dispatch({
                type: set_message,
                payload: message,
            });

            return Promise.reject();
        }
    );
};

我的错误输出如下:

TypeError: latlng is null
project
C:/Users/James Greene/WebstormProjects/softwaredevproject/SustainableScuba/WebApp/src/geo/projection/Projection.SphericalMercator.js:22

  19 | MAX_LATITUDE: 85.0511287798,
  20 | 
  21 | project: function (latlng) {
> 22 |  var d = Math.PI / 180,
     | ^  23 |      max = this.MAX_LATITUDE,
  24 |      lat = Math.max(Math.min(max, latlng.lat), -max),
  25 |      sin = Math.sin(lat * d);
问题暂未有回复.您可以查看右边的相关问题.
1 使用React-Leaflet从地图获取GeoJson数据

我正在尝试检索地图上具有一定固定半径的圆的GeoJson数据。 我无法理解如何从地图中检索GeoJson数据对象。 根据文档,使用FeatureGroup应该会有所帮助,但是我无法理解如何在React中实现它。 提前致谢 ! import React, {Component ...

2 从 geojson 数据在传单地图上绘制标记

如何将 geoJson 数据(超过 2000 个坐标)导入传单地图? 这是地理 json 的简短示例 我试过的代码: 但什么也没有发生,它只是一个灰色的背景。 我不确定错误在哪里(可能不止一个),但导入 geojson 数据和地图令牌可能存在错误。 我完全是初学者。 预先感谢。 ...

3 从Leaflet地图中删除geoJSON

我有一个函数,该函数检索包含地震数据的JSON,并将其添加到Leaflet映射中,该函数会在10秒后再次检索JSON(用于刷新数据): 并从这些点清除地图的函数: 使用这些代码,超时将停止,但是地震点不会偏离地图,这是什么问题? ...

5 Leaflet.js-使用哪种方法从GeoJson添加标记

我引用了Leaflet.js提供的官方示例 。 但是我不清楚。 我对使用哪个感到困惑。 目前,我正在使用pointToLayer绘制标记: 但是还有另一种使用onEachFeature进行相同操作的方法: 那么什么时候使用哪个呢? pointToLayer和onEac ...

8 来自geoJSON的传单地图不在div之外

尝试了解有关LeafLet的更多信息。 由于它不涉及tile和CSS,因此我认为它与另一个类似的短语问题并不相同。 这很新,所以我可能会离开。 遵循基本指示进行操作: 当将其放在容器中时,一切看起来都还不错。 但是,当我将笔触更改为“ true”时,我发现地图实际上超出了di ...

9 将数据从 URL 添加到传单地图

我正在尝试将来自 URL 的 covid 数据添加到传单地图。 问题是我的地图在数据完全加载之前正在加载和绘制。 我有一个名为 statesData 的 JSON 数据文件。 然后,我使用 p5.js loadJSON() 函数从 URL 中获取 covid 数据,并使用另一个函数来格式化该数据。 ...

10 在弹出窗口中显示来自GeoJson的信息(叶)

我正在为我的公司编写一个拥有Trails的程序。 该程序将显示一个带有较长路径(连接所有路径)的网络地图。 通过从GeoJson数组读取坐标,我还在每个线索头上显示了标记。 我想将弹出窗口绑定到ATLEAST在弹出窗口中显示每个Trailhead名称的每个标记。 我已经尝试了很多东西,但 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM