javascript - 缩小时React-leaflet合并圆圈,放大时折叠
问题描述
我在 R 中使用传单。我有一个非常好的功能来制作用户友好的地图报告。缩小圆圈时会合并,放大圆圈时会折叠它们的位置。我在 react-leaflet 及其文档中找不到它 在此先感谢
import { Map, CircleMarker, TileLayer, Marker, Popup } from "react-leaflet";
<Map
ref={refMap}
center={position}
zoom={zoom}
style={{ height: "400px", width: "100%", zIndex: 0 }}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
{uniqueLocs
? uniqueLocs.map((Id) => (
<CircleMarker
center={[
stocks.find((e) => e.OpId === Id)["Latitude"],
stocks.find((e) => e.OpId === Id)["Longitude"],
]}
color={
stocks
.filter((e) => e.OpId === Id && e.CustomerID != 1)
.reduce((currentTotal, item) => { return item.Quantity + currentTotal; }, 0) > 400 ? "#dd2c00" :
stocks.filter((e) => e.OpId === Id && e.CustomerID != 1).length > 0 ? "#00416d" :
stocks
.filter((e) => e.OpId === Id && e.CustomerID === 1)
.reduce((currentTotal, item) => { return item.Quantity + currentTotal; }, 0) > 400 ? "red" : "green"
}
radius="20"
fillOpacity={0.6}
stroke={false}
>
<Popup>
<span style={{ fontSize: "11px" }}>
<br />
{stocks.find((e) => e.OpId === Id)["MainCustomer"]} || {stocks.find((e) => e.OpId === Id)["OpCenter"]}
|| Total:{" "}
{stocks
.filter((e) => e.OpId === Id)
.reduce((currentTotal, item) => {
return item.Quantity + currentTotal;
}, 0)}
</span>
</Popup>
</CircleMarker>
))
: "Loading..."}
</Map>````
解决方案
推荐阅读
- python - 网络爬虫从附加价值中脱颖而出
- c# - 在显示 msgbox 后,如何防止 Enter 键事件冒泡到控件(例如,消息框 OK 按钮 - Enter)?
- selenium - Selenium 网格从 1 到 999999
- ads - Google 广告脚本 - 为 UAC(移动安装广告)设置 CPA 字段
- traits - 移相器特征何时运行?
- spring - 使用 Actuator 和 OpenAPI 添加自定义标签(名称和描述) - Spring boot
- javascript - 如果输入标签初始化为null,则包含e.target.files的数组为空
- python - 尝试使用kv文件时Kivy显示黑屏?
- java - java流中的多个map()方法与单个map()方法
- postgresql - 如何在没有破折号的 pg-promise 中显示 UUID