2017-03-06 44 views
1

我正在开发一个使用angular 1.5和javascript Mapbox GL库的应用程序。重新绘制绘制的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-拉伸文档具有相似的结果):

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" 

现在的奇怪一部分;

每当我调用上述方法时,都没有发生明显的变化。然而!当我按下“绘制线”或“绘制多边形”按钮时,路线实际上就会绘制在地图上!

所以有些事情我正在失踪。我调用了Draw.set()/ add()方法之后,我深入地挖了一下并调用Draw.getAll(),并且看到了我期望的添加特性。

但是当我在Draw.mode_changed(在点击绘制线/多边形按钮后触发)之后立即调用Draw.getAll()方法事件触发时,我发现突然有一个额外的功能。所以点击按钮实际上会创建我想绘制的线条。

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 

所以你可以看到第二个特点,显示了后点击绘制控件甚至没有坐标。

所以我的问题是:这到底是怎么回事呢?我如何重新绘制我已经提取和保存的路线?

回答

1

尼克,

您所遇到的问题是因为你调用Draw.set()的全部资产需要呈现地图已经加载之前。要解决此问题,请确保您正在初始化map.on('load', function() { ... });回调中的Draw。人们经常得到loadstyle.load困惑。 load是您需要倾听的事件。

+0

位迟了,但谢谢你的回应!原来是这个问题。 –