Leaflet GeoJSON display

我遇到了一個任務，它需要使用leaflet js庫和geojson作爲數據存儲。幾乎立即遇到以下問題：從geojson對象創建的多邊形不會顯示在地圖上。雖然由本地傳單方法創建的多邊形 - 完美地工作。Leaflet GeoJSON display

這裏是我的代碼：

 var map = new L.Map('map'); 
     var bingLayer = new L.BingLayer('AhVaalRWmmprMAMHj6lw18ALO-iVnIGzvkq7gYAX3U_bisCT8Q_lgGV25YOa0kiV', 'Aerial'); 
     map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(bingLayer); 
     var polygon = { 
      "type": "Feature", 
      "properties": { 
        "style": { 
         "color": "#004070", 
         "weight": 4, 
         "opacity": 1 
        } 
      }, 
      "geometry": { 
       "type": "Polygon", 
       "coordinates": [[ 
        [51.509, -0.08], 
        [51.503, -0.06], 
        [51.51, -0.047], 
        [51.509, -0.08] 
       ]] 
      } 
     }; 
     var geojsonLayer = new L.GeoJSON(polygon); 
     map.addLayer(geojsonLayer);

正如你所看到的，它幾乎是拷貝一個例子，通過傳單提供。並不起作用。我完全被這個麻煩所困擾，並且非常感謝任何幫助。

來源

2012-07-19 lasquarte

問題是，在GeoJSON規範中，座標應以[lon, lat]的形式傳遞，而傳單使用[lat, lon]作爲其對象。只需將其更改爲[-008, 51.509]等，並且您應該沒問題。 :)

來源

2012-07-30 21:24:03 Mourner

這裏的文檔http://leaflet.cloudmade.com/examples/geojson.html – Karussell 2012-09-13 13:06:52

根據廣告傳單文檔（在上面的評論鏈接），所有座標似乎是（LON，LAT） – fccoelho 2014-01-27 12:02:37

你可以幫我嗎 - http://stackoverflow.com/questions/23380886/adjusting-the-drawn-object-in-map-automatically-using-leaflet-geojson-property – 2014-04-30 06:25:41

我只想補充一些我的點 -

僅有的混亂和矛盾的標準問題。

在談到地理位置時，我們通常使用Lat-long。

map.setView以l.LatLong作爲輸入，其中第一個座標是Latitude，第二個座標是Longitude。

實施例： - 因此，當要52.23N, 4.97E，你在[52.23943, 4.97599]

以GeoJSON標準說，對於任何點處，第一參數是X Coordinate (i.e. Longitude)和第二個參數是Y coordinate (i.e. Latitude)通過;

因此，當你在GeoJSON要51.505N, 0.09E，你需要通過[-0.09, 51.505]

var map = new L.Map('map'); 
var bingLayer = new L.BingLayer('AhVaalRWmmprMAMHj6lw18ALO-iVnIGzvkq7gYAX3U_bisCT8Q_lgGV25YOa0kiV', 'Aerial'); 
map.setView(new L.LatLng(-0.09, 51.505), 13).addLayer(bingLayer); 
var polygon = { 
    "type": "Feature", 
     "properties": { 
     "style": { 
      "color": "#004070", 
       "weight": 4, 
       "opacity": 1 
     } 
    }, 
     "geometry": { 
     "type": "Polygon", 
      "coordinates": [ 
      [ 
       [51.509, -0.08], 
       [51.503, -0.06], 
       [51.51, -0.047], 
       [51.509, -0.08] 
      ] 
     ] 
    } 
}; 
var geojsonLayer = new L.GeoJSON(polygon); 
map.addLayer(geojsonLayer);

您可以通過修改這個調整您的視角..

map.setView(new L.LatLng(-0.09, 51.505), 13).addLayer(bingLayer);

到

map.setView(new L.LatLng(-008, 51.509), 13).addLayer(bingLayer);

我認爲這個解釋會有所幫助！對於更多Click Here

來源

2014-04-29 06:44:56

Leaflet GeoJSON display

回答

相關問題