Geojson 渲染问题答案

【问题标题】：Geojson Rendering ProblemsGeojson 渲染问题
【发布时间】：2016-01-29 20:43:49
【问题描述】：

我正在尝试在地图上放置一系列 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>

你有没有遇到过类似的问题？谢谢！

【问题讨论】：

标签： javascript mapbox geojson topojson

【解决方案1】：

感谢您的回复，我“解决了”它。

问题似乎与数据多边形无关。这似乎是由于传单错误。网络上的其他用户也提出了同样的问题，例如查看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);

如果有人能教我们如何使用那个著名的选项并在此处粘贴一个片段...那就太好了！

【讨论】：

【解决方案2】：

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

尝试使用 mapshaper 或 mapstarter 之类的工具重新创建您的数据集 - 例如shapefile from an authoritative source 并将其导出为 TopoJSON。更好的是，找一个为你完成工作的人。 Mike Bostock has a whole US Atlas 带有适用于 Mapbox 瓦片的 TopoJSON 文件。

Here's a fiddle 与您的代码和U.S. counties data set。它提供来自 Dropbox 公共文件夹的 JSON 数据集，详见 this question。你的JS被修改为访问topology.objects.counties。

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

【讨论】：