如何解决有没有办法将传单中的多边形内的文本居中?
我有 GeoJSON,其中包含世界上每个国家/地区的名称和多边形。我已经成功渲染了多边形(基本上是世界地图),但我不知道如何在每个多边形内显示国家/地区名称。如果我可以仅在名称适合基于缩放级别的多边形内时显示名称,那也很好。我知道我可以用 const center = layer.getBounds().getCenter();
获得多边形中心,但我不知道如何处理它。这是我目前的代码
import React,{ Component } from "react";
import { MapContainer,GeoJSON } from "react-leaflet";
import countriesData from "../data/countries.json";
import "leaflet/dist/leaflet.css";
import "./Map.css";
export default class Map extends Component {
onEachCountry = (country,layer) => {
const countryName = country.properties.ADMIN;
layer.on({
mouseover: (e) => {
e.target.setStyle({
color: "red",});
},mouseout: (e) => {
e.target.setStyle({
color: "black",});
},});
};
render() {
return (
<div>
<MapContainer style={{ height: "80vh" }} center={[0,0]} zoom={1.5}>
<GeoJSON
style={{
color: "black",weight: 1,}}
data={countriesData.features}
onEachFeature={this.onEachCountry}
></GeoJSON>
</MapContainer>
</div>
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。