D3.js 传单：在地图右侧放置标记/簇

我正在使用一个数据集，在该数据集中，我被赋予了在不同地点或交通方式上花费的时间——我试图将交通方式的标记簇附着在地图右侧彼此下方的一条线上，这样人们就可以看到在每种交通方式上花费了多少时间

每次贴图移动时，我都会找到不同像素位置的latlong，就像这样：

var centerPoint = map.getSize().divideBy(2);

                    map.on('move', function(e) {

                            var name_array = [];

                            var multiplier_x = 0.95;
                            var multiplier_y = 0.8;
                            var index = 0;

                            layer_group.eachLayer(function (layer) {
                                if (layer.feature.properties.Name == 'Cycling' || layer.feature.properties.Name == 'Walking' || layer.feature.properties.Name == 'Driving' || layer.feature.properties.Name == 'Boating' || layer.feature.properties.Name == 'On a bus' || layer.feature.properties.Name == 'On a train'){

                                    if(!(layer.feature.properties.Name in name_array)){

                                        var targetPoint = centerPoint.add([centerPoint.x*multiplier_x, -centerPoint.y*(multiplier_y-index)]),
                                        targetLatLng = map.containerPointToLatLng(targetPoint);

                                        name_array[layer.feature.properties.Name] = targetLatLng;

                                        index += 0.2;
                                    }


                                    layer.setLatLng(name_array[layer.feature.properties.Name]);

                                }
                            });
                    });

问题是，即使每个交通形式被赋予不同的位置，它们似乎还是聚集在一起，并且在地图移动时在不同的聚集之间发生变化。此外，当移动画笔时，贴图似乎越来越向左移动，因为我正在尝试使贴图适应边界

我不知道是否有可能实现我正在尝试的目标，或者是否有另一种方法可以做到这一点，可能是通过为交通工具创建一个单独的集群组，我想这至少可以确保交通工具不会与位置聚集在一起

---

代码：

根据给定的坐标，在给定的像素处绘制它们：

...
var topLeft = map._getNewPixelOrigin(map.getCenter(), map.getZoom());
var targetPoint = map.project(map.getCenter(), map.getZoom()).subtract(topLeft);
var targetLatLng = map.unproject(targetPoint);
...

---

通过不断计算新的像素原点，这确保即使在平移时像素和板条也保持对齐

为什么不在SVG覆盖上添加运输群集，地图移动没有问题将运输标记放在单独的GroupMarker层中，它们会影响

标记的计算。getBounds（）

这听起来是一个很好的解决方案，但我对使用传单非常陌生，因此如果您能更准确地解释这一点或引导我阅读一些文档，我将不胜感激：）首先，我不确定如何制作SVG覆盖，我发现的示例似乎可以自动缩放和平移，我想我只是想让它保持在原来的位置。此外，我不知道是否必须创建一个新的markers变量，以便将位置标记添加到这些变量中，如下所示：

markers\u location.addLayer（layer\u group\u location）；添加图层（标记位置）