描画されたマップボックスのGLフィーチャーを再描画する

Question

私はAngle 1.5とjavascript Mapbox GLライブラリを使ってアプリケーションを開発しています。

https://github.com/mapbox/mapbox-gl-draw/プラグインをロードして、ユーザーが独自の線やポリゴンを描くことができるようにしました。これは素晴らしいことです。

今、私は描画された行を永続化したいと思います。したがって、ユーザーがページを離れて戻ると、以前に描画された線が再描画され、期待どおりに編集および削除できます。

描画する線を保存するにはdraw.createイベントをリッスンします。Draw.getAll（）を使用して描画されたすべてのレイヤーを取得し、どこかに保存してアプリケーション全体で利用できるようにします。

これまでのところとても良いです。

ここで、永続性部分については、地図のページに再度アクセスするたびに、必要なすべてのデータがあり、次のAPI呼び出しを使用して機能を再描画しようとします。 （両方ともmapbox-GL描画ドキュメントに応じ同様の結果を有していなければならないように）

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

Iは、以下の方法を試してみました：FYI

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.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 

クリックした後に表示される2番目の機能を見ると、描画コントロールには座標がありません。

私の質問はここには何が起こっていますか？抽出して保存した経路を再描画するにはどうすればよいですか？

Answer 1

ニック、

すべての資産がマップをレンダリングする必要がロードされる前に、あなたがDraw.set()を呼び出しているので、あなたが持っている問題があります。これを修正するには、map.on('load', function() { ... });コールバックの中でDrawを初期化していることを確認してください。人々はしばしばloadとstyle.loadを混同します。 loadはあなたが聴く必要があるイベントです。