Question

我正在做一个交互式地图，目的是模拟一个真正的港口。我使用leaflet.js和openstreetmap.org来创建我的地图，现在我必须为浮标，船只等添加图层。

要将静态对象添加为浮标，我使用带有自定义图标的简单标记，这样可以正常工作但是移动船怎么样？我必须代表他们继续在地图上移动，我必须按时间显示他们的维度，他们的定位时间。

我有五个点坐标可以在地图上绘制多边形，但我不太确定使用旋转的L.icon小叶对象

Layer = L.geoJson(null, {
    pointToLayer: function(feature, latlng) {

        return new L.marker(latlng, {
            icon: L.icon({
                iconUrl: 'img/ship.png',
                    iconRetinaUrl: 'img/ship@2x.png',
                    iconSize: [18, 24]
                }) 
        }).on('click', function() {
            $scope.openPanel('ships', feature);
        });
    }
});

或绘制传单Polygon

var p1 = new L.LatLng(51.509, -0.08),
    p2 = new L.LatLng(51.503, -0.06),
    p3 = new L.LatLng(51.51, -0.047),
    p4 = new L.LatLng(51.503, +0.06),
    p5 = new L.LatLng(51.51, +0.047),
    polygonPoints = [p1, p2, p3, p4, p5];

var ship = new L.Polygon(polygonPoints);
     map.addLayer(ship);

考虑到船舶的动态运动，最佳解决方案是什么？
提前谢谢。

Answer 1

您可能需要查看这个很酷的插件以获取传单。 https://github.com/openplans/Leaflet.AnimatedMarker可能有助于让您的图标在一条线上移动。至于方向，你可能需要有几个相似的图标（在不同的方向，如面向，面向前等），并根据它的行进方向或下一行的哪个点改变图标？希望这可以帮助。祝好运！附：如果你让它工作我很乐意看到它在行动

Answer 2

绘制多边形并将其添加到变量ship下的地图后，您可以调用setLatLngs来更改其角点的位置。

在传单地图上的船舶运动

2 个答案: