Question

我试图关注此example并使用爱尔兰的形状文件突出显示它的省份。

<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;           
    }

我从这里获取shapefile：http://www.cso.ie/en/census/census2011boundaryfiles/并使用http://www.mapshaper.org/将 Census2011_Province_generalised20m.zip 转换为GeoJson格式。

当我使用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上

1 个答案: