Question

我正在尝试在地图上放置一系列topoJSON，但我遇到了这个奇怪的多边形行为，请参阅下面的链接。如果我尝试将它们转换为geoJSON并将它们可视化，我会遇到同样的问题。你可以检查一下here，遗憾的是由于ajax调用我必须做的外部调用，我无法创建一个JS小提琴。我在这里粘贴代码：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>TopoJSON data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
  path {
  stroke-width:1;
  stroke-opacity:0.25;
  opacity:0.4;
}
</style>
</head>
<body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>  
<div id='map'></div>
<script>
L.mapbox.accessToken = 'MY-ACCESS-TOKEN';
var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -80], 5);
d3.json("topoJSON_noPoints.json", function(error, topology) {
  var geodata = topojson.feature(topology, topology.objects.collection)
  console.log(geodata)
  L.geoJson(geodata, { style: L.mapbox.simplestyle.style }).addTo(map);
});
</script>


</body>
</html>

你有类似的问题吗？谢谢！

Answer 1

感谢您的回复，我和＃34;它

这个问题似乎与数据多边形无关。这似乎是由于传单错误。网络上的其他用户提出了同样的问题，例如，请查看他们尝试提供解决方案的this，但遗憾的是，这对我来说并不起作用。我想这可能是因为我不是代码忍者而且我无法真正了解如何使用stitch-poles转化选项。

Here is a reply to another issue，由@Joac建议基于underscore.js的函数，这对我的这种情况很有用。我复制粘贴他的代码与我的网格在这里：

function onEachShapeFeature(feature, layer){
    var bounds = layer.getBounds && layer.getBounds();

    if (bounds && (Math.abs(bounds.getEast() + bounds.getWest())) < 0.1) {
        var latlongs = layer.getLatLngs();
        _.each(latlongs, function (shape) {
            _.each(shape, function (cord) {
                if (cord.lng < 0) {
                    cord.lng += 360;
                }   
            }); 
        }); 
        layer.setLatLngs(latlongs);
    }
}
var countries = L.geoJson(geodata, {
        onEachFeature: onEachShapeFeature,
        style: L.mapbox.simplestyle.style
}).addTo(map);

如果有人可以告诉我们如何使用这个着名的选项并在这里粘贴一个剪辑......那就太棒了！

Answer 2

我认为TopoJSON中的多边形边界点的排序存在问题 - Mapbox has the same issue。

尝试使用mapshaper或mapstarter等工具重新创建数据集，例如一个shapefile from an authoritative source并将其导出为TopoJSON。更好的是，找一个为你完成工作的人。 Mike Bostock has a whole US Atlas使用TopoJSON文件，可以很好地使用Mapbox磁贴。

Here's a fiddle包含您的代码和U.S. counties data set。它按照this question中的详细说明从Dropbox公用文件夹提供JSON数据集。您的JS已修改为访问topology.objects.counties。

    var geodata = topojson.feature(topology, topology.objects.counties);

Geojson渲染问题

2 个答案: