Question

我想在topoJSON地图leaflet上显示d3。这样做，我关注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。但是，对于意外的多边形/线：

当我显示JSON多边形/线不存在时：

topoJSON出了什么问题？它是我的代码中的东西还是转换出错？

Answer 1

topoJSON出了什么问题？它是我的代码中的东西还是转换出错？

没有错，当多边形越过common artifact时，这是antimeridian。

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

你应该对antimeridian过境点进行一些研究。此外，尝试隔离有问题的几何图形（即俄罗斯），并查看是否仅将该几何图形转换为TopoJSON并以适当的方式显示。隔离有问题的几何形状将使您的生活更轻松，并使错误更明显。

将JSON转换为topoJSON时出现意外的线条/多边形

1 个答案: