微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

缩小时反应传单合并圆圈,放大时折叠

如何解决缩小时反应传单合并圆圈,放大时折叠

我在 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,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>````

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。