在谷歌地图上添加topojson

我按照这个例子（http://bl.ocks.org/zross/10654766）试图将加利福尼亚州的数据替换为整个美国的县。我用来替换例子中的数据是https://d3js.org/us-10m.v1.json。我将它保存为uscounty.json。在谷歌地图上添加topojson

我的问题是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>

来源

2017-04-22 Yiran

您的问题在于您的topojson已经投影。它包含已经在笛卡尔坐标中已经布置的坐标。没有空间参考您的数据，请看看Mike Bostock如何在this block中“投射”它。他仅通过将空值映射分配给地理路径来使用空投影：var path = d3.geoPath();。您还可以看到，这是已投影的数据，因为坐标值（一旦转换为geojson）不是有效的纬度经度对：[490.18252332008296,270.6981101474867]

空投影将其馈送的地理要素中的坐标转换为svg不进行转换或翻译的坐标。本质上，你刚刚拥有的像素值就是topojson。你不能投影它，它已经被预测。你不知道它的投影，所以你不能重新投影它并重新投影它来满足你的需求。你也不知道它使用什么投影，所以你可以使谷歌地图符合你的topojson。

我建议找到使用WGS84（纬度长对）的感兴趣区域的几何图形，而不是已经投影的像素坐标。那么你至少可以开始匹配谷歌地图和D3之间的预测。

来源

2017-04-22 22:44:30

谢谢你安德鲁！你的详细回答对我有很大的帮助。我试图使用的topojson数据就像你说的那样有投影。我注意到在数据的前几行有变换和翻译标签。我想这就是数据的预测方式。 – Yiran

我试图使用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

来源

2017-05-01 06:00:54 Yiran

在谷歌地图上添加topojson

回答

相关问题