Mapbox 重新绘制绘制的地图框GL要素

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

我已经加载了插件，使用户能够绘制自己的直线和多边形。这真是太棒了

现在我希望绘制的线是持久的。因此，当用户离开页面并返回时，先前绘制的线条将被重新绘制，并且可以按照预期进行编辑和删除

要保存绘制的线，我将侦听draw.create事件，请使用draw.getAll（）获取所有绘制的图层并将其保存在某个位置，以便在整个应用程序中都可用

到目前为止还不错

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

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

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

供参考；scope.model.drawing\u routes包含如下对象数组：

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

现在来看奇怪的部分

无论何时调用上述方法，都不会进行明显的更改。然而！当我按下“绘制线”或“绘制多边形”按钮时，路线实际上是在地图上绘制的

所以我错过了一些事情。在调用Draw.set（）/add（）方法之后，我进一步挖掘并调用了Draw.getAll（），我看到了您所期望的新增功能

但是，当我在Draw.mode_更改后调用Draw.getAll（）方法（在单击绘制线/多边形按钮后触发）事件触发时，我发现突然出现了一个额外的功能。因此，单击按钮实际上创建了我想要绘制的线条

调用Draw.set（scope.model.drawing\u）后的Draw.getAll（）结果：

单击“绘制直线”或“绘制多边形”按钮后的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

因此，正如您所看到的，单击绘图控件后显示的第二个功能甚至没有坐标

所以我的问题是：这里发生了什么？如何重新绘制提取并保存的路线？

尼克

---

您遇到的问题是，在加载渲染贴图所需的所有资源之前，正在调用

Draw.set（）

。要解决此问题，请确保您正在（'load'，function（）{…}）上初始化

map.on的内部绘图回调。人们经常会对
load
和
style.load
感到困惑<代码>加载

是您需要收听的事件。

有点晚了，但感谢您的回复！这就是问题所在。

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

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