Question

我是mapbox的新手我从csv文件导入一些标记，我可以手动绘制它们之间的线，从每个端口到目的地。例如从摩洛哥到中国，但如果我告诉你我的地图，你不知道港口在哪里以及目的地是什么：从摩洛哥到中国或者相反。因此，我想从每个港口到目的地画一条动画线目前我没有任何代码，我在下面的链接中找到了如何绘制动画线，但我无法在标记之间进行，因为它们讨论的是正弦函数。
https://www.mapbox.com/mapbox.js/example/v1.0.0/dynamically-drawing-a-line/ 你能帮我吗？
谢谢！

Answer 1

在您关联的示例中，您可以更改add()功能，以便在第一个点开始绘制并停止在最后一个绘图。理想情况下，您的标记符合您希望绘制线条的顺序：

// add your points
var points = [
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [0, 0]
        },
        "properties": {}
    },
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [10, -10]
        },
        "properties": {}
    },
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [50, 50]
        },
        "properties": {}
    }
]

// add a variable for keeping track of points
var y = 0; 

// Start drawing the polyline.
add();

function add() {

    // add a point on the line for the new marker
    polyline.addLatLng(
        L.latLng(points[y].geometry.coordinates[1],
            points[y].geometry.coordinates[0])
    );


    // Pan the map along with where the line is being added.
    map.setView(points[y].geometry.coordinates, 3);

    // Continue to draw and pan the map by calling `add()`
    // until `y` reaches the number of points
    if (++y < points.length) window.setTimeout(add, 1000);
}

在MapBox中的两个标记之间绘制一条动画线

1 个答案: