Mapbox geoJSON格式

Question

我想使用MapBox製作交互式地圖。

基本的想法是，人們將鼠標懸停在某些地區，他們將點亮，一個事件將觸發顯示一些內容。

我得到的地圖設置使用Mapbox然後通過第一

說幹就幹，得到了該點的一些數據去這裏創建一個shape文件 - http://www.gadm.org/country

，然後轉到這裏將該文件轉換成一個json文件 - http://www.mapshaper.org/

然後我通過mapbox將數據加載到地圖中，這是我的結果！ （代碼如下） - http://dev.touch-akl.com/nzmap/

正如你可以看到感謝我下載的數據它幾乎是一個完美的國家跟蹤唯一的問題是，所有區域似乎是一個對象時懸停。

 $.ajax({ 
      url: '/nzmap/js/nzmap.json', 
      dataType: 'json', 
      success: function load(data) { 

       // set up the regions based on the JSON data and then call the styles and the hovers 
       var regions = L.geoJson(data, { 
        style: getStyle, 
        onEachFeature: onEachFeature 
       }).addTo(map); 

       // selects used to style the regionsLayer 
       function getStyle(feature) { 
        return { 
         weight: 2, 
         opacity: 0.1, 
         color: 'black', 
         fillOpacity: 0.7, 
         fillColor: 'red' 
        }; 
       } 

       // combine the mouse in and mouse out? 
       function onEachFeature(feature, layer) { 
        layer.on({ 
         mousemove: mousemove, 
         mouseout: mouseout 
        }); 
       } 

       // mouse over change the layer styles 
       function mousemove(e) { 
        var layer = e.target; 

        // highlight feature 
        layer.setStyle({ 
         weight: 3, 
         opacity: 0.3, 
         fillOpacity: 0.9 
        }); 

        if (!L.Browser.ie && !L.Browser.opera) { 
         layer.bringToFront(); 
        } 
       } 

       //mouse out reset the style 
       function mouseout(e) { 
        regions.resetStyle(e.target); 
       } 

      } 
     }); 

這裏是一個JSON文件的鏈接是否有幫助明白到底是怎麼回事 - http://dev.touch-akl.com/nzmap//js/nzmap.json

它看起來像一些多邊形是「multipolygons」，有些是獨立的。我設法使用一個區域創建一個新版本的地圖，它看起來像這樣 - http://dev.touch-akl.com/nzmap2/

我這樣做的功能非常相似，除了我已經拆分區域並使用只有該地區的座標。

這對於例如JSON文件 - http://dev.touch-akl.com/nzmap2/js/waikato.json

那麼，我堅持是...有沒有辦法來格式化的方式，將讓每個區域的原始JSON文件，因爲它是自己的單獨的物體懸停？如果是的話，我該如何改變我設置地圖的方式來獲得理想的結果？

它看起來像我可以爲每個地區做一個單獨的json文件，就像我正在處理第二個示例一樣，但這似乎不是正確的方式來做到這一點，一直困住了幾天，所以任何幫助將不勝感激！

Answer 1

這是因爲你使用的是不正確的GeoJSON，至少不是GeoJSON L.GeoJSON所期望的。你需要的是一個GeoJSON FeatureCollection。集合會是這個樣子：

[{ 
    "type": "Feature", 
    "properties": { 
     "foo": "bar" 
    }, 
    "geometry": { 
     "type": "Polygon", 
     "coordinates": [[ 
      [-104.05, 48.99], 
      [-97.22, 48.98], 
      [-96.58, 45.94], 
      [-104.03, 45.94], 
      [-104.05, 48.99] 
     ]] 
    } 
}, { 
    "type": "Feature", 
    "properties": { 
     "bar": "foo" 
    }, 
    "geometry": { 
     "type": "Polygon", 
     "coordinates": [[ 
      [-109.05, 41.00], 
      [-102.06, 40.99], 
      [-102.03, 36.99], 
      [-109.04, 36.99], 
      [-109.05, 41.00] 
     ]] 
    } 
}] 

正如你所看到的，包含的FeatureCollection個別功能可以是或鍵入點，多點，線段形式，MULTILINESTRING，多邊形或者是MultiPolygon。如果您使用FeatureCollection L.GeoJSON將按照您的預期工作。看看FeatureCollection和L.GeoJSON的參考。有關使用它們的教程/示例可以參見here。