gpt4 book ai didi

reactjs - React-Leaflet 在 map 上绘制圆形标记

转载 作者:行者123 更新时间:2023-12-02 20:30:07 25 4
gpt4 key购买 nike

我是 Leaflet/React-Leaflet 的新手,我正在尝试在 map 上绘制圆形标记,但遇到了麻烦。 React-Leaflet 的文档不是很好。我已经弄清楚如何添加点击时显示的弹出窗口。

这是我的代码:

    import React from 'react';
import { render } from 'react-dom';
import { Map, Marker, Popup, TileLayer, Tooltip, Circle } from 'react-leaflet';
import DivIcon from 'react-leaflet-div-icon';
import axios from 'axios';


export default class MapView extends React.Component {
constructor(props) {
super(props)

this.state = {
nasaLocations: [],
spacexLocations: []
};
}

componentDidMount() {
axios.get(`https://data.nasa.gov/resource/gvk9-iz74.json`)
.then(res => {
const nasaData = res.data;
this.setState({nasaLocations: nasaData})
console.log(this.state.nasaLocations);
})

axios.get(`https://api.spacexdata.com/v2/launchpads`)
.then(res => {
const spacexData = res.data;
this.setState({spacexLocations: spacexData})
console.log(this.state.spacexLocations);
})
}


render() {
const position = [40.730610, -73.935242];
return (
<Map
style={{height: "100vh"}}
center={position}
zoom={3}>
<TileLayer
url="https://api.mapbox.com/styles/v1/nicknyr/cje7mtk2y6gf92snsydobiahf/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoibmlja255ciIsImEiOiJjajduNGptZWQxZml2MndvNjk4eGtwbDRkIn0.L0aWwfHlFJVGa-WOj7EHaA"
attribution="<attribution>" />
<Marker position={position}>
<Popup>
<span>
A pretty CSS3 popup. <br /> Easily customizable.
</span>
</Popup>
</Marker>
</Map>
);
}

}

如何在这些位置坐标上渲染一个圆?我尝试在 map 标记中添加类型标记,但我无法弄清楚正确的语法以及如何正确添加纬度/经度坐标。

最佳答案

我对Leaflet没什么经验,但我有一个圆圈要渲染,这里是例子。我使用 obj 传递了经纬度坐标。希望这可以帮助。如果这没有回答问题,请告诉我。每个位置都会显示圆圈,弹出窗口显示 space x api 的详细信息。

import React, { Component } from 'react';
import { Map, TileLayer, Marker, Tooltip,Popup, Circle} from 'react-leaflet';
import axios from 'axios';

const url = 'https://api.spacexdata.com/v2/launchpads';
const leafURL = "https://api.mapbox.com/styles/v1/nicknyr/cje7mtk2y6gf92snsydobiahf/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoibmlja255ciIsImEiOiJjajduNGptZWQxZml2MndvNjk4eGtwbDRkIn0.L0aWwfHlFJVGa-WOj7EHaA";

class App extends Component {
constructor(props){
super(props);
this.state = {
latlng: {
lat: 28.5618571,
lng: -80.577366,
},
data: []
}
}

componentWillMount() {
axios.get(url).then(res => {
this.setState({data: res.data})
}).catch(err => {
console.log('error')
})
}

render() {
const {data} = this.state;
console.log(data);
return (
<div>
<Map
style={{height: "100vh"}}
center={this.state.latlng}
zoom={4}>
<TileLayer
url={leafURL}
attribution="<attribution>" />
{data.map((elem, i) => {
return (
<Marker
key={i}
position={{lat:elem.location.latitude, lng: elem.location.longitude}}>
<Popup>
<span>
{elem.full_name}<br />
{elem.status}<br />
{elem.details}<br />
{elem.vehicles_launched.map((elem, i) => {
return ( <p key={i}>{elem}</p>)
})}
</span>
</Popup>
<Circle
center={{lat:elem.location.latitude, lng: elem.location.longitude}}
fillColor="blue"
radius={200}/>
</Marker>
)
})}
</Map>
</div>
);
}
}

export default App;

关于reactjs - React-Leaflet 在 map 上绘制圆形标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49041072/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com