GeoJSON Overlay не отображается на D3 GoogleMap

Я стараюсь следовать этому example и использовать шейп-файлы Ирландии, чтобы выделить его провинции.GeoJSON Overlay не отображается на D3 GoogleMap

<html>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

<style> 

    #map { 
     width: 500px; 
     height: 500px; 
    } 

    .SvgOverlay { 
     position: relative; 
     width: 500px; 
     height: 500px;   
    }

Я получаю шейп отсюда: http://www.cso.ie/en/census/census2011boundaryfiles/ и преобразование Census2011_Province_generalised20m.zip в формат GeoJSON используя http://www.mapshaper.org/.

Когда я накладываю это поверх GoogleMaps с помощью D3, ничего не отображается. Может кто-то, пожалуйста, помогите мне. ТИА.

My fiddle

источник

2015-11-15 user3331594

Ваши координаты GeoJSON не являются допустимыми/широт долгот для Google Maps (широта должна быть в пределах 90 +/-) – geocodezip

Спасибо! Любая идея, как я могу экспортировать его в GeoJson, используя Mapshaper в этот формат? – user3331594

Я хотел бы предложить следующее решение:

Преобразовать шейп в GeoJSON используя ogr2ogr web client. Так указанный шейпфайл использует EPSG: 29902 система координат, установите Target SRS:EPSG:4326, чтобы преобразовать его в World Geodetic System
После GeoJSON файл готов (Census2011_Province_generalised20m.json), вы можете использовать Google Maps Data Layer API, чтобы сделать это, как показано ниже:

Пример

function initMap() 
 
{ 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
      center: { 
 
       lat: 53.349248, 
 
       lng: -6.255323 
 
      }, 
 
      zoom: 6, 
 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
 
     }); 
 
    var dataLayer = new google.maps.Data(); 
 
    dataLayer.loadGeoJson('https://gist.githubusercontent.com/vgrem/440708612b574764c309/raw/2a4e2feadc204806440c51a14c2ef1f54f4fc3d8/Census2011_Province_generalised20m.json'); 
 
    dataLayer.setMap(map); 
 
}

#map { 
 
    width: 800px; 
 
    height: 640px; 
 
}

<div id="map"></div> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Результат

источник

2015-11-17 14:16:29

GeoJSON Overlay не отображается на D3 GoogleMap

ответ

Смежные вопросы