将 JSON 转换为拓扑 JSON 时发生意外 lines/polygons

Question

我想用 d3 在 leaflet 地图上显示 topoJSON。为此，我关注 GitHub 上托管的 this example。这是我从 gitHub 示例中得出的代码：

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>

<body>
    <div id="map" style="width:600px; height:600px;"></div>
    <script>
            var map = new L.Map("map", {
                            center: [37.8, -96.9],
                            zoom: 4
                    })
                    .addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));

            var svg = d3.select(map.getPanes().overlayPane).append('svg');
            var g = svg.append('g').attr('class', 'leaflet-zoom-hide');

            d3.json("pathToTopotJson", function(error, collection) {
                    if (error) throw error;
                    console.log(collection)

                    var bounds = d3.geo.bounds(topojson.feature(collection, collection.objects.collection));
                    var path = d3.geo.path().projection(projectPoint);

                    var feature = g.selectAll('path')
                            .data(topojson.feature(collection, collection.objects.collection).features)
                            .enter()
                            .append('path');


                    map.on('viewreset', reset);
                    reset();

                    // Reposition the SVG to cover the features.
                    function reset() {
                            var bottomLeft = projectPoint(bounds[0]),
                                    topRight = projectPoint(bounds[1]);

                            svg.attr('width', topRight[0] - bottomLeft[0])
                                    .attr('height', bottomLeft[1] - topRight[1])
                                    .style('margin-left', bottomLeft[0] + 'px')
                                    .style('margin-top', topRight[1] + 'px');

                            var translation = -bottomLeft[0] + ',' + -topRight[1];
                            g.attr('transform', 'translate(' + -bottomLeft[0] + ',' + -topRight[1] + ')');

                            feature.attr('d', path);
                    }
                    // Use Leaflet to implement a D3 geographic projection.
                    function projectPoint(x) {
                            var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
                            return [point.x, point.y];
                    }

            })
    </script>

显示 topoJSON。但是，意外 Polygons/Lines：

当我显示 JSON 时 polygons/lines 不存在：

topoJSON 出了什么问题？是我的代码有问题还是转换出错了？

Answer 1

Whats going wrong with topoJSON? Is it something in my code or did the converting go wrong?

没有错，就是一个common artifact when a polygon crosses the antimeridian.

将您的数据重新投影到不同的地图投影以完全避免反子午线，或使用 --spherical and --cartesian topojson command-line options 解决该问题。

你应该对反子午线交叉做一些研究。此外，尝试隔离有问题的几何图形（即俄罗斯），并查看该几何图形是否单独转换为 TopoJSON 并以正确的方式显示。隔离有问题的几何体将使您的生活更轻松，并使错误更加明显。

将 JSON 转换为拓扑 JSON 时发生意外 lines/polygons

Unexpected lines/polygons when converting JSON to topoJSON

javascript

json

d3.js

leaflet

topojson