Question

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

我已加载https://github.com/mapbox/mapbox-gl-draw/插件，以便用户可以绘制自己的线条和多边形。这很有效。

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

要保存绘制的线条，我会监听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);
}

FYI; scope.model.drawn_routes 包含一系列对象，如下所示：

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

现在是奇怪的部分;

每当我调用上述方法时，都没有明显的变化。然而！当我按下＆＃34;画线＆＃34;或＆＃34;绘制多边形＆＃34;按钮路线实际上是在地图上绘制的！

所以我发现了一些事情。在我调用Draw.set（）/ add（）方法之后，我更深入地挖了一下并调用了Draw.getAll（），我看到了我想要的添加功能。

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

调用Draw.set（scope.model.drawn_routes）之后

Draw.getAll（）结果：

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

尼克，

您遇到的问题是因为您在所有资产需要渲染地图之前调用map.on('load', function() { ... });。要解决此问题，请确保在load回调内部初始化Draw。人们常常对style.load和load感到困惑。 document.getElementById('progressBar').addEventListener('mousemove', function (e) { var x = e.pageX - this.offsetLeft; //Convert x value to progress range [0 1] var xconvert = x/300; //300 is width of the progress bar var finalx = (xconvert).toFixed(2); document.getElementById('result').innerHTML = ('Hover position: ' + finalx + "<br/>"); });是您需要倾听的事件。

重新绘制绘制的地图集GL功能

1 个答案: