Mapbox geoJSON форматирование

Question

Я пытаюсь сделать интерактивную карту, используя MapBox.

Основная идея заключается в том, что люди будут нависнуть над определенными регионами, и они загорятся, и событие вызовет показ некоторого контента.

я получил набор карт с использованием MapBox, а затем пошел вперед и получил некоторые данные для точек первым

Отправляясь сюда, чтобы создать шейп - http://www.gadm.org/country

И тогда происходит здесь, чтобы преобразовать этот файл в a json file - http://www.mapshaper.org/

Затем я загружаю данные на карту через карточку, и вот мой результат! (код ниже) - 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-файл, координаты для этого региона.

Это файл в формате 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 содержит индивидуальные особенности, которые могут быть или типа точки, многоточечные, LineString, MultiLineString, Polygon или MultiPolygon. Если вы используете FeatureCollection, то L.GeoJSON будет работать так, как вы ожидали. Взгляните на ссылку для FeatureCollection и L.GeoJSON. Учебник/пример по их использованию можно найти here.