我正在尝试检索地图上具有一定固定半径的圆的GeoJson数据。 我无法理解如何从地图中检索GeoJson数据对象。 根据文档,使用FeatureGroup应该会有所帮助,但是我无法理解如何在React中实现它。 提前致谢 ! import React, {Component ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
我正在尝试设置一个 map 组件来显示我存储在我的 postgres / 节点后端的地理坐标标记。 我可以将 geojson 插入到我的 postgres / postgis 数据库中,因为我在后端设置了可以正常工作的 CRUD 方法,但我不知道在 go 到组件选项卡时要添加到 map 组件以加载 geojson 文件的代码.
我将如何 go 关于将方法添加到 go 到我的 map 组件中以从我的数据库中提取 geojson? 我认为我的操作和服务文件设置正确,我认为我的操作文件中的 pullScubaSchools class 应该导入到 map 容器中。
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='© <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;
潜水学校服务
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();
}
);
};
我的错误 output 如下:
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.