在标记之间动态绘制线条

Question

我刚刚开始接触神奇的 MapBox。

在我的地图上，我有一个下拉菜单，可以加载新标记并删除旧标记，一切正常（代码如下）。

var pin_layer = L.mapbox.featureLayer().addTo(map);

$('select.traveller').on('change',function(){

    map.removeLayer(pin_layer);

    pin_layer = L.mapbox.featureLayer().addTo(map);

    var markers = '[';

    $.post('_posts/get-pins.php', {traveller: $(this).val()}, function(data){

        $.each( data, function(k, item) {

            markers += '{    "type": "Feature",' +
            '"geometry": { ' +
            '"type": "Point", ' +
            '"coordinates": ['+item.long+', '+item.lat+']},' +
            '"properties": {' +
            '"id": "'+item.id+'",' +
            '"image": "'+item.image+'",' +
            '"marker-symbol": "star",' +
            '"marker-color": "#ff8888",' +
            '"marker-size": "large",' +
            '"title": "'+item.title+'", ' +
            '"description": "'+item.description+'"' +
            '}' +
            '},';

        });

        markers = markers.substring(0, markers.length - 1);
        markers += ']';


        pin_layer.setGeoJSON(JSON.parse(markers));



    },'json');
})

我现在希望按照添加的顺序在标记之间画线。即标记 1 到标记 2，标记 2 到标记 3 等。我尝试使用下面链接中的代码，但它没有绘制任何线条，也没有引发任何错误。

https://www.mapbox.com/mapbox.js/example/v1.0.0/line-marker/

有没有人成功地做到这一点或知道任何用于绘制线条的示例代码？

Answer 1

首先我要说的是，您有一种非常奇怪的方法来构建该标记数组。您可以直接执行此操作而无需字符串/对象转换的东西。在循环数据时，您可以立即使用线串的坐标创建一个数组，在代码中使用 cmets 进行解释：

$.post('_posts/get-pins.php', {traveller: $(this).val()}, function(data){

    // Create empty featureLayer
    var featureLayer = L.mapbox.featureLayer().addTo(map);

    // Create empty featureCollection
    var featureCollection = {
        "type": "FeatureCollection",
        "features": []
    };

    // Create empty array to hold coordinates for line.
    var lineArray = [];

    // Looping over the data
    $.each(data, function (k, item) {

        // Create new feature object and push to featureCollection
        featureCollection.features.push({
            "type": "Feature",
            "properties": {
                "id": item.id,
                "title": item.title,
                "description": item.description,
                "image": item.image,
                "marker-symbol": "star",
                "marker-color": "#ff8888",
                "marker-size": "large"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    item.long,
                    item.lat
                ]
            }
        });

        // Add coordinates to the array at id position
        // Setting the key to ID will result in a sorted array
        lineArray[item.id] = [item.lat, item.long];

    });

    // Set featureCollection to featureLayer
    featureLayer.setGeoJSON(featureCollection);

    // Reset array keys to normal so L.Polyline can handle them
    // If your ID's are not consecutive or they didn't start with 0
    // you could end up with keys like: 1,2,5,8,9
    // linestring can't handle that, this resets the keys
    // to normal: 0,1,2,3,4,5,6 etc and keeps the order
    lineArray = lineArray.filter(function(){return true});

    // Creating polyline with array
    var polyline = L.polyline(lineArray).addTo(map);

},'json');

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/FM9u66BnbsQy39c8fast?p=preview

（请注意，我使用的 jquery 的 getJSON 不是你正在做的，但你应该得到相同的结果）