GeoJSON Overlay 未显示在 D3 GoogleMap 上

Question

我正在尝试遵循这个 example 并使用爱尔兰的 shapefile 来突出显示它的省份。

<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/ and converting Census2011_Province_generalised20m.zip to GeoJson format using http://www.mapshaper.org/。

当我使用 D3 将其覆盖在 GoogleMaps 之上时，没有显示任何内容。有人可以帮帮我吗？ TIA。

My fiddle

Answer 1

我会提出以下解决方案：

使用 ogr2ogr web client 将 shapefile 转换为 GeoJSON。自从指定的shapefile使用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>

结果

GeoJSON Overlay 未显示在 D3 GoogleMap 上

GeoJSON Overlay not showing up on D3 GoogleMap

google-maps

overlay

geojson

d3.js