重新绘制绘制的 mapbox GL 特征

Question

我正在使用 angular 1.5 和 javascript Mapbox GL 库开发应用程序。

我已经加载了 https://github.com/mapbox/mapbox-gl-draw/ 插件，使用户能够绘制自己的线条和多边形。这非常有效。

现在我希望绘制的线条能够持久。因此，当用户离开页面并且 returns 之前绘制的线条会重新绘制，并且可以按照您的预期进行编辑和删除。

为了保存绘制的线条，我监听了 draw.create 事件，使用 Draw.getAll() 获取所有绘制的图层并将它们保存在某处，以便它在我的整个应用程序中可用。

到目前为止一切顺利。

现在是持久性部分；每当我重新访问地图页面时，我都拥有所需的所有数据并使用以下 API 调用尝试重新绘制要素。

function reDrawRoutes(){
    var id = Draw.add(scope.model.drawn_routes);
}

我还尝试了以下方法（根据 mapbox-gl-draw 文档，两者的结果应该相似）：

function reDrawRoutes(){
    var id = Draw.set(scope.model.drawn_routes);
}

仅供参考； scope.model.drawn_routes 包含这样的对象数组：

Array[1]
    0: Object
        geometry: Object
            coordinates: Array[2]
            type: "LineString"
        id: "23f7fd3af36d6ba6ea02907b10f40391"
        properties: Object
            type: "Feature"

现在是奇怪的部分；

每当我调用上述方法时，都没有明显的变化。然而！当我按下 "draw line" 或 "draw polygon" 按钮时，路线实际上绘制在地图上！

所以我错过了一些事情。在调用 Draw.set()/add() 方法之后，我进行了更深入的研究并调用了 Draw.getAll() 并且我看到了您所期望的添加功能。

但是当我在 draw.mode_changed 事件触发后立即调用 Draw.getAll() 方法（在我单击绘图 line/polygon 按钮后触发）事件触发时，我发现突然有一个额外的特征。所以点击按钮实际上创建了我想要绘制的线条。

Draw.getAll() 调用 Draw.set(scope.model.drawn_routes) 后的结果：

Object
    type: "FeatureCollection"
    features: Array[1]
        0: Object
            type: "Feature"
            geometry: Object
                coordinates: Array[2]
                type: "LineString"
            id: "b89da95478ca83d653cf9756a1531f0b"
            properties: Object
                // empty object

Draw.getAll() 单击绘制线或绘制多边形按钮后的结果：

Object
    type: "FeatureCollection"
    features: Array[2]
        0: Object
            type: "Feature"
            geometry: Object
                coordinates: Array[2]
                type: "LineString"
            id: "b89da95478ca83d653cf9756a1531f0b"
            properties: Object
                // empty object

        1: Object
            type: "Feature"
            geometry: Object
                coordinates: Array[0]
                type: "LineString"
            id: "79cad278991d533454612e2b783f5abe"
            properties: Object
                // empty object

正如您所见，单击绘制控件后显示的第二个要素甚至没有坐标。

所以我的问题是：这是怎么回事？如何重新绘制我提取并保存的路线？

Answer 1

尼克，

您遇到的问题是因为您在加载渲染地图所需的所有资产之前调用 Draw.set()。要解决此问题，请确保在 map.on('load', function() { ... }); 回调中初始化 Draw。人们经常对 load 和 style.load 感到困惑。 load 是您需要监听的事件。

重新绘制绘制的 mapbox GL 特征

Re-drawing drawn mapbox GL features

mapbox

mapbox-gl-js