在 google 地图上添加 topojson

Question

我正在按照这个例子 (http://bl.ocks.org/zross/10654766) and trying to replace the data which is counties in California to counties in the whole US. The data I used to replace the one in example is https://d3js.org/us-10m.v1.json。我将它保存为 uscounty.json。

我的问题是 topojson 文件无法在正确的位置与 googlemap 正确对齐，尽管这些功能确实显示出来了。我想这与投影有关，但我不知道如何为我要替换的数据定义正确的投影。

如有任何意见，我们将不胜感激。

<!DOCTYPE html>
<html>
<head>
  <title>HTML5</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=650, user-scalable=yes">

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  </script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>

  <style>

    html, body {
      height: 100%;
      margin: 0;
    }

    #mapcanvas{

      height:100%;
    }

  </style>

  <script>


   var geoJsonObject;
   var thejson;

   $(document).ready(function(){



  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(38.284335, -120.833818),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map=new google.maps.Map($('#mapcanvas')[0], mapOptions);

//county.json is a topojson file

  $.getJSON("uscounty.json", function(data){
        geoJsonObject = topojson.feature(data, data.objects.counties)
        map.data.addGeoJson(geoJsonObject); 
      }); 



  });//end document ready


 </script>

</head>
<body>
  <div id="mapcanvas">
  </div>
</body>


</html>

Answer 1

你的问题是你的topojson已经投影好了。它包含已经在笛卡尔坐标中布置的坐标。您的数据没有空间参考，请查看 Mike Bostock 'projects' 在 this block 中的表现。他只是通过不向 geoPath 分配一个来使用空投影：var path = d3.geoPath();。您还可以看到这已经是投影数据，因为坐标值（一旦转换为 geojson）不是有效的纬度经度对：[490.18252332008296,270.6981101474867]

空投影采用输入的地理特征中的坐标，并将它们转换为 svg 坐标，无需转换或平移。本质上，您拥有的 topojson 具有像素值。你不能投射它，它已经被投射了。您不知道它的投影，因此无法取消投影并重新投影以满足您的需要。您也不知道它使用什么投影来使 google 地图符合您的 topojson。

我建议找到您感兴趣的区域的 geojson，它使用 WGS84（lat long 对），而不是已经投影的像素坐标。然后你至少可以开始匹配 google 地图和 d3.

之间的投影

Answer 2

我尝试使用 topojson 而不是 geojson，因为县级的 geojson 使加载过程非常慢，但 topojson 的大小要小得多。

对于遇到同样问题的其他人，我根据人们在线分享的信息和教程找出了两种可能的解决方案： 1) 没有投影（或阿尔伯斯投影？）的我们县的 topojson 文件：http://bl.ocks.org/mbostock/raw/4090846/us.json（不知道为什么，但它与我在问题中发布的代码配合得很好） 2) 从 shapefile 中自己构建一个 topojson: http://blog.mastermaps.com/2013/06/converting-shapefiles-to-topojson.html

在 google 地图上添加 topojson

Add topojson on top of google map

json

google-maps

d3.js

google-maps-api-3

topojson