传单:在地图右侧放置标记/群集

时间:2018-10-25 15:11:57

标签: d3.js leaflet

我正在使用一个数据集,在该数据集中我花了一些时间在交通工具的位置或形式上-我试图将交通工具形式的标记簇附加在地图右侧彼此下方的一条线上,以便可以看到每种运输花费了多少时间。

我尝试通过每次地图移动时找到不同像素位置的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]);

                                }
                            });
                    });

问题在于,即使每种交通方式都被赋予了不同的位置,但它们似乎仍会聚在一起,并且在移动地图时会在不同的聚类之间变化。另外,在移动画笔时,地图似乎向左移动得越来越远,因为我正在尝试使地图适应边界。

我不知道是否有可能实现我想要的目标-或是否有另一种方式可以做到这一点,也许是通过为运输创建一个单独的集群组,我想至少可以确保运输不集中在地点上吗?

代码:http://bl.ocks.org/skov94/e44fcebd282fe5eb4c708e8ba0af95d6

1 个答案:

答案 0 :(得分:0)

根据给定的latlng在给定的像素上绘制它们:

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

通过不断计算新的像素原点,可以确保即使平移时像素和latLng也保持对齐