Question

我正在尝试使用D3.js渲染布鲁克林大楼和地段的地图。为完成此任务，我已完成以下任务：

从MapPLUTO获取shapefile：

http://www.nyc.gov/html/dcp/html/bytes/dwn_pluto_mappluto.shtml

使用以下ogr2ogr命令将shapefile转换为GeoJSON：

ogr2ogr -f GeoJSON -lco COORDINATE_PRECISION = 4 -select＆＃39; geometry，BBL＆＃39; -s_srs EPSG：2263 -t_srs EPSG：4326 bk-gll1.json BKMapPLUTO.shp

使用以下内容将GeoJSON转换为TopoJSON： topojson -o bkgll1-topojson.json bk-gll1.json

我尝试过不同的投影，缩放和数据绑定，但我只设法渲染一个填充SVG视口的黑色方块，或者什么都没有。

TopoJSON和GeoJSON文件位于此处：https://github.com/RobertPTC/nyc_maps。还包括通过mapshaper.org呈现的TopoJSON的屏幕截图

$(function() {
    var width = 960,
        height = 500;
    var svg = d3.select('body').append('svg')
        .attr('width', width)
        .attr('height', height)
    var projection = d3.geo.mercator()
             .rotate([96,0])
             .center([-73.98, 40.70])
             .scale(237000)
             .translate([width/2, height/2])
    var path = d3.geo.path()
                 .projection(projection)
    d3.json('bk-gll1-topojson.json', function(error, bk) {
             console.log(bk);
             var featureCollection = topojson.feature(bk, bk.objects['bk-gll1']);
             var bounds = d3.geo.bounds(featureCollection);

             svg.append('path')
                .datum(featureCollection)
                .attr('d', path)
 });
});

作为D3.js megafan，如果有人能帮助解决这个问题，我将非常感激！

更新

我似乎有这段代码的结果：

$(function() {

var width = 1260,
  height = 1000;

var svg = d3.select("body").append("svg")
   .attr("width", width)
   .attr("height", height);

var projection = d3.geo.mercator()
  .center([-73.98, 40.70])
  .scale(237000)
  .translate([width/2, height/2]);

var features = svg.append('g')
            .attr('class', 'features');
var path = d3.geo.path()
        .projection(projection);

var zoom = d3.behavior.zoom()
        .scaleExtent([1, Infinity])
        .on('zoom', zoomed);

d3.json('bk-gll1-topojson.json', function(error, bk) {
    console.log(bk);
var featureCollection = topojson.feature(bk, bk.objects['bk-gll1']);
var bounds = d3.geo.bounds(featureCollection);
console.log(featureCollection.features[0]);

features.selectAll('path')
  .data(featureCollection.features.slice(0, 241000))
  .enter()
  .append('path')
  .attr('d', path)
 });
function zoomed() {
console.log('zooming');
features.attr("transform", "translate(" + zoom.translate() + ")scale("  + zoom.scale() + ")")
    .selectAll("path").style("stroke-width", 1 / zoom.scale() + "px"      );
 };
});

但是，我只能渲染featuresCollection数组中670000个元素中的大约三分之一。关于如何在不崩溃浏览器的情况下加载整个数据集的任何建议？有可能吗？

更新2

因此，似乎以渐进方式加载数据有助于...仍然需要很长的加载时间，因此可能对生产环境不可行：

features.selectAll('path')
  .data(featureCollection.features.slice(0, 241500))//after this number of elements point, map renders as giant black square
  .enter()
  .append('path')
  .attr('d', path)
  .on('click', clicked);
features.selectAll('path')
  .data(featureCollection.features.slice(241500, 246500))
  .enter()
  .append('path')
  .attr('d', path)
  .on('clicked', clicked);

Answer 1

您是否尝试过渲染到画布而不是SVG？这仍然是很多元素，可能仍然很慢，但至少你不会超载DOM。

布鲁克林的D3.js TopoJSON地图未渲染

1 个答案: