首页 文章

在传单 Map 上的船舶运动

提问于
浏览
2

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

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

我有五个点坐标在 Map 上绘制它们作为多边形但是我不能确定它更好地使用旋转的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);

考虑到船舶的动态运动,最佳解决方案是什么?
先感谢您 .

2 回答

  • 0

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

  • 1

    绘制多边形并将其添加到变量 ship 下的 Map 后,可以调用setLatLngs来更改其角点的位置 .

相关问题