首页 > 解决方案 > 缩小时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='&copy; <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"]} &nbsp;||&nbsp;{stocks.find((e) => e.OpId === Id)["OpCenter"]}
                      &nbsp;|| Total:{" "}
                    {stocks
                      .filter((e) => e.OpId === Id)
                      .reduce((currentTotal, item) => {
                        return item.Quantity + currentTotal;
                      }, 0)}
                  </span>
                </Popup>
              </CircleMarker>
            ))
            : "Loading..."}
        </Map>````

标签: javascriptreactjsleafletreact-leaflet

解决方案


推荐阅读