Question

想象一下我们在路上开车。

我需要在地图上显示这种情况，并在驾驶时更新汽车的位置。汽车不一定需要遵循特定的道路，但可以放在地图上的任何位置。

考虑到比例和位置，汽车必须尽可能准确地显示在地图上。

A sample car icon with explainations

在地图上会有不同类型的汽车都有不同的长度和宽度以及不同的图标。

图标以svg路径的形式提供，每辆车的宽度和长度以米为单位，有2个小数点。

每次更新汽车后，都会提供新的坐标和新的汽车角度。每辆车的更新都会每隔几秒钟提供一次。

汽车图标应显示在地图上，中心位于您在上图中看到的地理参考点。这一点也应该是起源。

汽车应该是互动的，以对点击事件做出反应。

在变焦时，汽车应保持正确的尺寸（例如，5米乘1.8米）。

我尝试使用leaflet.roatedmarker插件解决了这个问题： https://github.com/bbecquet/Leaflet.RotatedMarker

提出这段代码：

        var carIcon = L.icon({
            iconUrl: 'car.svg',
            iconSize: [38, 38],
            iconAnchor:[19, 2]
        });     
        var marker2 = L.marker([56.369481,17.508143], {icon: carIcon}).addTo(map);
            marker2.setRotationOrigin("19px 2px");
            marker2.setRotationAngle(90);

此外，我能够使用此功能基于米计算像素的大小（找到她：https://gis.stackexchange.com/questions/198435/how-to-get-current-scale-of-a-leaflet-map/198444#198444）：

L.Map.include({
            metersToPixels:function(zoom){
                // Get the y,x dimensions of the map
                var y = this.getSize().y,
                    x = this.getSize().x;
                // calculate the distance the one side of the map to the other using the haversine formula
                var maxMeters = map.containerPointToLatLngWithZoom([0, y],zoom).distanceTo(map.containerPointToLatLngWithZoom([x,y],zoom));
                // calculate how many meters each pixel represents
                var MeterPerPixel = maxMeters/x ;
                return MeterPerPixel;
            },
                containerPointToLatLngWithZoom:function(point,zoom){
                    var layerPoint = this.containerPointToLayerPoint(L.point(point));
                    var projectedPoint = L.point(layerPoint).add(this.getPixelOrigin());
                    return this.unproject(projectedPoint,zoom);
                }
        });

但这并不能解决缩放时保持精确度的问题。这就是我的目标。当地图上有许多汽车时，缩放时的性能也是一个问题。

您有什么建议可以帮助满足我的所有要求吗？使用叠加层可能有更好的解决方案吗？

提前谢谢！

EDIT /溶液

我最终定制了这个插件以满足我的需求：

https://github.com/teralytics/Leaflet.D3SvgOverlay

宣传单精确标记/图标缩放

0 个答案: