D3.js D3js从GeoJSON生成路径_D3.js_Svg_Geojson

D3.js D3js从GeoJSON生成路径

d3.js svg

D3.js D3js从GeoJSON生成路径,d3.js,svg,geojson,D3.js,Svg,Geojson,我是D3js和GeoJSON新手，想知道如何从GeoJSON文件渲染多边形我的GeoJSON文件来自ESRI Shapefile，没有prj文件，因此我没有关于投影的信息，但它肯定不是WGS 84 使用第三方工具，我可以将GeoJSON转换为SVG，格式如下：（我有超过65000条路径。）当我打开这个svg文件时，它看起来像这样，这是正确的：现在我想直接从GeoJSON文件用d3js生成这些路径，但不知怎么搞砸了：这是我目前的代码： <!DOCTYPE html>

我是D3js和GeoJSON新手，想知道如何从GeoJSON文件渲染多边形

我的GeoJSON文件来自ESRI Shapefile，没有prj文件，因此我没有关于投影的信息，但它肯定不是WGS 84

使用第三方工具，我可以将GeoJSON转换为SVG，格式如下：（我有超过65000条路径。）

当我打开这个svg文件时，它看起来像这样，这是正确的：

现在我想直接从GeoJSON文件用d3js生成这些路径，但不知怎么搞砸了：

这是我目前的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>

<body>
    <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>

    <script>
        var width = 960,
            height = 1160;

        var svgContainer = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .style("border", "2px solid steelblue");


        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'poly.json');
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.responseType = 'json';
        xhr.onload = function () {
            if (xhr.status !== 200) return

            var projection = d3.geoAlbers()
                .scale(1)
                .translate([0, 0]);

            var path = d3.geoPath()
                .projection(projection);

            var b = path.bounds(xhr.response),
                s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
                t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

            projection
                .scale(s)
                .translate(t);

            svgContainer.append("rect")
                .attr('width', width)
                .attr('height', height)
                .style('stroke', 'black')
                .style('fill', 'orange');

                svgContainer.selectAll("path").data(xhr.response.features).enter().append("path")
                    .attr("d", path)
                    .style("fill", "red")
                    .style("stroke-width", "1")
                    .style("stroke", "blue")    
        };
        xhr.send();
    </script>


可变宽度=960，
高度=1160；
var svgContainer=d3.select（“body”）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.款式（“边框”，“2件纯色钢蓝色”）；
const xhr=new XMLHttpRequest（）；
open（'GET'，'poly.json'）；
setRequestHeader（'Content-Type'，'application/json'）；
xhr.responseType='json'；
xhr.onload=函数（）{
如果（xhr.status！==200）返回
var projection=d3.geoAlbers（）
.比额表（1）
.翻译（[0,0]）；
var path=d3.geoPath（）
.投影（投影）；
var b=路径边界（xhr.response），
s=.95/数学最大值（（b[1][0]-b[0][0]）/宽度，（b[1][1]-b[0][1]）/高度），
t=[（宽度-s*（b[1][0]+b[0][0]）/2，（高度-s*（b[1][1]+b[0][1]）/2]；
投影
.比例尺
.翻译（t）；
svgContainer.append（“rect”）
.attr（'width'，width）
.attr（'height'，height）
.style（'笔划'，'黑色'）
.样式（“填充”、“橙色”）；
svgContainer.selectAll（“路径”）.data（xhr.response.features）.enter（）.append（“路径”）
.attr（“d”，路径）
.样式（“填充”、“红色”）
.样式（“笔划宽度”、“1”）
.style（“笔划”、“蓝色”）
};
xhr.send（）；

有谁能告诉我如何像使用d3js的第三方工具一样生成路径

编辑：以下是我的GeoJSON数据：

您正在使用一个投影：

d3.geoAlbers（）

，它获取纬度/经度对并将它们投影到笛卡尔网格。但是，您还注意到，您的数据不使用纬度/经度对（省略细节，因此不使用WGS84）。所有d3.geoProjections都采用球坐标并将其投影到二维网格，但您的数据已经是笛卡尔坐标，因此我们需要一种不同的方法

相反，请使用

d3.geointity（）

，其默认形式与空投影相同：值被视为像素值，并按像素值进行映射。但是，它也允许我们利用一些标准的d3.0地质投影方法，如缩放和平移

更重要的是，它允许我们访问method.fitSize（或fitExtent），它允许我们转换和缩放身份转换，从而使我们的特征居中并缩放到地图大小。fitSize方法采用以像素为单位的宽度和高度、显示要素的区域以及geojson对象（而不是要素数组）

现在，由于许多投影坐标系的左下角有[0,0]，但SVG的左上角有[0,0]，如果需要，我们还可以在y轴上应用翻转：

var projection = d3.geoIdentity()
  .reflectY(true)
  .fitSize([width,height],geojsonObject)

没有y反射的演示（您很可能需要它）

此方法随d3v4+一起提供，并允许我们避免使用旧的v3手动居中和缩放对象的方法：

  var projection = d3.geoAlbers()
      .scale(1)
      .translate([0, 0]);

  var path = d3.geoPath()
            .projection(projection);

  var b = path.bounds(xhr.response),
  s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
  t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

  projection
    .scale(s)
    .translate(t);

但是，如果您希望用功能覆盖其他数据，则需要具有相同投影的数据，或者需要知道数据的投影是什么，以便可以将部分或所有数据集重新投影为通用格式。如果让我猜的话，我会说你的投影是UTMzone32N（基于字段名）。通常，如果你有一个以百万为单位的北/南值，你就要处理UTM，因为它表示距离赤道的米数。如果与UTM区域32N一起放置，您可能会看到：

我现在很好奇，假设我得到了投影图，我猜测墓地的地块是小的，1.3m x 3m，它们的排列表明不是建筑物，它的位置看起来像是专用绿地，其他用途与周围区域相比会过于密集

如果这看起来是正确的，那么您可以将其用作prj文件（数据可能不正确，这可能会导致一些偏移：

嗨，你能编辑这个问题并添加geoJSON数据吗？geoJSON添加在一个链接中就像一个符咒，谢谢。你的假设是正确的，但我真的不需要在地图上覆盖我的多边形，我只想显示我的数据并与之交互。有没有办法保留我的geoJSON文件中的所有属性。其中一些多边形ave Id和关于多边形大小的信息等。我想找到。好的，我得到了这个，带有for循环：for（var I=0；I

var projection = d3.geoIdentity()
  .reflectY(true)
  .fitSize([width,height],geojsonObject)

  var projection = d3.geoAlbers()
      .scale(1)
      .translate([0, 0]);

  var path = d3.geoPath()
            .projection(projection);

  var b = path.bounds(xhr.response),
  s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
  t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

  projection
    .scale(s)
    .translate(t);

PROJCS["WGS_1984_UTM_Zone_32N",GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Transverse_Mercator"],PARAMETER["False_Easting",500000.0],PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",9.0],PARAMETER["Scale_Factor",0.9996],PARAMETER["Latitude_Of_Origin",0.0],UNIT["Meter",1.0]]