Question

我有这个几何形状文件，所以没有城市地图。

Shapefile

我将它作为GeoJson存储在GIS数据库中。现在，我想要可视化geojson数据。我首先使用QGIS创建了GeoJson数据，并将其导出为坐标参考系 WGS 84 EPSG：4326 。这是Shapefile one的示例数据：

{
   "type":"FeatureCollection",
   "crs":{
      "type":"name",
      "properties":{
         "name":"urn:ogc:def:crs:OGC:1.3:CRS84"
      }
   },
   "features":[
      {
         "type":"Feature",
         "properties":{
            "Membership":0.000000,
            "Membership_1":0.000000,
            "Membership_2":0.000000,
            "Membership_3":0.000000,
            "Membership_4":0.000000,
            "Membership_5":0.000000,
            "Membership_6":0.000000,
            "Membership_7":0.000000,
            "Membership_8":0.000000,
            "Membership_9":0.997638,
            "Asymmetry":0.622090,
            "Elliptic_F":0.368607,
            "Density":1.720265,
            "Radius_of_":2.122269,
            "Rectangula":0.701797,
            "Radius_of__1":0.341230,
            "Main_direc":63.913780,
            "Mean_red":251.683422,
            "Mean_green":253.246326,
            "Mean_blue":251.654027,
            "Shape_inde":1.663047,
            "Compactnes":2.373016,
            "Roundness":1.781040,
            "Border_ind":1.603306
         },
         "geometry":{
            "type":"MultiPolygon",
            "coordinates":[
               [
                  [
                     [
                        0.0,
                        293.0
                     ],
                     [
                        116.0,
                        293.0
                     ],
                     [
                        116.0,
                        288.0
                     ],
                     [
                        117.0,
                        288.0
                     ],
                     [
                        117.0,
                        287.0
                     ],

GeoJson Shapefile两个几何结构在最后：

{
   "type":"FeatureCollection",
   "crs":{
      "type":"name",
      "properties":{
         "name":"urn:ogc:def:crs:OGC:1.3:CRS84"
      }
   },
   "features":[
      {
         "type":"Feature",
         "properties":{
            "Ratio_red":0.337287,
            "Ratio_gree":0.324566,
            "Ratio_blue":0.338147,
            "Asymmetry":0.233023,
            "Elliptic_F":0.835821,
            "Density":2.111246,
            "Radius_of_":1.191572,
            "Max_diff":0.040743,
            "Rectangula":0.958607,
            "Ratio_DSM_":1.001866,
            "Diff_DSM_w":0.604676,
            "LengthWidt":1.266667,
            "Radius_of__1":0.894812,
            "Main_direc":0.507535,
            "Standard_d":4.209384,
            "Standard_d_1":13.755727,
            "Standard_d_2":12.358206,
            "Standard_d_3":16.194083,
            "Standard_d_4":21.437695,
            "Standard_d_5":0.486436,
            "Mean_slope":195.593284,
            "Mean_slope_1":34.988806,
            "Mean_red":143.451493,
            "Mean_green":138.041045,
            "Mean_blue":143.817164,
            "Mean_DSM":324.615672,
            "Shape_inde":1.038440,
            "Mean_Diff_":0.604676,
            "Compactnes":1.063433,
            "Brightness":141.769900,
            "Roundness":0.296759,
            "Area_m2":1.715200,
            "Border_ind":1.000000
         },
         "geometry":{
            "type":"MultiPolygon",
            "coordinates":[
               [
                  [
                     [
                        -1.796831198293312,
                        46.775409744271464
                     ],
                     [
                        -1.796815938387422,
                        46.775411620389058
                     ],

几何体位于文件的末尾。我已经尝试过这篇文章中的内容，但这只适用于多边形，而不适用于多边形：

Venue/Indoor Map using D3.js and Geojson

我尝试使用以下代码显示两者：

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

    //Width and height
    var w = 800;
    var h = 800;
var colors = d3.scale.category20();
    var projection = d3.geo.mercator()
                       .translate([w/2, h/2]);

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

    //Define path generator
    var path = d3.geo.path();

    //Create SVG element
    var svg = d3.select("body").append("svg").attr({width: w, height: h});

    //Load in GeoJSON data
    d3.json("imageOne.json", function(json) {

        //Bind data and create one path per GeoJSON feature
        svg.selectAll("path")
           .data(json.features)
           .enter()
           .append("path")
           .attr("d", path)
           .style("fill", function(d,i){return colors(i)});
   });
</script>

运行脚本后，我得到第一个数据，结果如下：

Geometric image

尝试第二张图片的脚本我得到一个白页。

我上传了两个形状文件 Shapefiles

Answer 1

我为这类问题苦苦挣扎了好几天。原来，用于序列化地图的坐标系是投影的，而不是几何的，这意味着数据已经作为x和y值存储在2d平面上，而不是球体上。

迈克·波斯托克（Mike Bostock）在此Google网上论坛帖子中的非常详细的位置进行了解释：

https://groups.google.com/forum/#!topic/d3-js/OSp_sMZjfok

问题在于d3.geo.projection主要用于将球面坐标转换为笛卡尔坐标，因此，当您从原始投影函数创建d3.geo.projection实例时，它将假设球面坐标。意思是，假设您的原始投影函数将弧度λ和φ作为输入，将输入坐标从度转换为弧度，并对输出执行自适应重采样。

所有这些都非常适合实现新的地理投影，但是您可能想采用另一种方法来实现自定义笛卡尔投影。

一种方法是实现自定义几何流。这是一个较低级的API，可让您精确控制几何图形的转换方式，适用于简单的缩放和转换：

http://bl.ocks.org/mbostock/6216797

因此，有了这些知识，当然可以通过一个预计数据为球形的投影来泵送点，这将导致大麻烦。

如果我在QGIS应用程序中查看了shapefile或geojson，它的右下角将显示用于对值进行编码的坐标参考系统（CRS）。在我的情况下，它使用的是5320（投影为2d）而不是类似4326（这是地理坐标系）的

GeoJson和D3.js多面

1 个答案: