Question

我的Web应用程序让用户使用Leaflet.Draw控件绘制形状以及从geojson文件加载形状。但是，似乎这两种方法都会生成不同的geojson对象。

当我从geojson加载形状时。

{  
   "options":{  

   },
   "_layers":{  
      "2998":{  
         "options":{  
            "pane":"overlayPane",
            "attribution":null,
            "bubblingMouseEvents":true,
            "fill":true,
            "smoothFactor":1,
            "noClip":false,
            "stroke":true,
            "color":"#3388ff",
            "weight":3,
            "opacity":1,
            "lineCap":"round",
            "lineJoin":"round",
            "dashArray":null,
            "dashOffset":null,
            "fillColor":null,
            "fillOpacity":0.2,
            "fillRule":"evenodd",
            "interactive":true
         },
         "_bounds":{  
            "_southWest":{  
               "lat":3.668372,
               "lng":101.873785
            },
            "_northEast":{  
               "lat":3.670492,
               "lng":101.875974
            }
         },
         "_latlngs":[  
            [  
               {  
                  "lat":3.668372,
                  "lng":101.873785
               },
               {  
                  "lat":3.670492,
                  "lng":101.873785
               },
               {  
                  "lat":3.670492,
                  "lng":101.875974
               },
               {  
                  "lat":3.668372,
                  "lng":101.875974
               }
            ]
         ],
         "_initHooksCalled":true,
         "_events":{  
            "revert-edited":[  
               {  
                  "ctx":{  
                     "latlngs":[  
                        null
                     ],
                     "_initHooksCalled":true
                  }
               }
            ],
            "add":[  
               {  

               }
            ],
            "remove":[  
               {  

               }
            ]
         },
         "feature":{  
            "properties":{  
               "Name":"rectangle-xugcym9x4i",
               "Description":"",
               "Tag":"",
               "id":"rectangle-xugcym9x4i"
            },
            "geometry":{  
               "type":"Polygon",
               "coordinates":[  
                  [  
                     [  
                        101.873785,
                        3.668372
                     ],
                     [  
                        101.873785,
                        3.670492
                     ],
                     [  
                        101.875974,
                        3.670492
                     ],
                     [  
                        101.875974,
                        3.668372
                     ],
                     [  
                        101.873785,
                        3.668372
                     ]
                  ]
               ]
            },
            "type":"Feature"
         },
         "defaultOptions":{  
            "pane":"overlayPane",
            "attribution":null,
            "bubblingMouseEvents":true
         },
         "_leaflet_id":2998,
         "_eventParents":{  

         }
      }
   },
   "_leaflet_id":2999,
   "_initHooksCalled":true
}leaflet.js:1125:17

当我用Leaflet.Draw绘制形状时

{  
   "options":{  
      "stroke":true,
      "color":"#3388ff",
      "weight":4,
      "opacity":0.5,
      "fill":true,
      "fillColor":null,
      "fillOpacity":0.2,
      "clickable":true
   },
   "_bounds":{  
      "_southWest":{  
         "lat":3.668382508900863,
         "lng":101.87454700469972
      },
      "_northEast":{  
         "lat":3.6702567212235673,
         "lng":101.87684297561646
      }
   },
   "_latlngs":[  
      [  
         {  
            "lat":3.668382508900863,
            "lng":101.87454700469972
         },
         {  
            "lat":3.6702567212235673,
            "lng":101.87454700469972
         },
         {  
            "lat":3.6702567212235673,
            "lng":101.87684297561646
         },
         {  
            "lat":3.668382508900863,
            "lng":101.87684297561646
         }
      ]
   ],
   "_initHooksCalled":true,
   "_events":{  
      "revert-edited":[  
         {  
            "ctx":{  
               "latlngs":[  
                  null
               ],
               "_initHooksCalled":true
            }
         }
      ],
      "add":[  
         {  

         }
      ],
      "remove":[  
         {  

         }
      ]
   },
   "editing":{  
      "options":{  

      },
      "_initHooksCalled":true
   },
   "feature":{  
      "properties":{  
         "Name":"rectangle-9d3jtxlr99",
         "Description":"",
         "Tag":"",
         "id":"rectangle-9d3jtxlr99"
      }
   }
}

由于两个形状都是Leaflet geojson形状，所以我希望它们具有相同的数据结构。由于绘制的形状和加载的形状具有不同的结构，因此无法始终为它们建立索引以获取所需的属性。我的功能只能在一种形状上工作，而不能在另一种形状上工作。

此外，我可以使用Leaflet.draw控件编辑绘制的图层，但不能编辑已加载的图层。有没有一种方法可以标准化绘制和加载形状的geojson结构？

Answer 1

两个形状都是Leaflet geojson形状

根据您显示的数据结构，第一个对应于Leaflet GeoJSON Layer Group，而第二个对应于Leaflet rectangle vector layer。

如果我们密切关注，我们会在第一个“ _layers”字典对象中找到与第二个结构相似的结构，该结构显示了Leaflet如何在图层组中嵌套各个图层。

如果您尝试从绘制的图层中获取GeoJSON数据（例如，使其具有“几何形状”），则只需在其上使用toGeoJSON()方法即可。

我可以使用Leaflet.draw控件编辑绘制的图层，但不能编辑加载的图层。

您可能会尝试将第一个图层组直接嵌套到您为edit.featureGroup的{{1}}选项提供的图层组中。在这种情况下，请参见Leaflet Draw "Cannot read property 'enable' of undefined" adding control to geoJSON layer

绘制Leaflet层与加载Leaflet层时的Geojson结构不同

1 个答案: