个人中心
gpt4 book ai didi

javascript - GeoJson 和 D3.js 多面体

转载 作者：行者123 更新时间：2023-12-04 00:09:20 28 4
gpt4 key购买 nike

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

Shapefile

Shapefile

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

{
   "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

最佳答案

我为这类问题苦苦挣扎了好几天。事实证明，用于序列化 map 的坐标系是投影坐标系而不是几何坐标系，这意味着数据已经存储为二维平面上的 x 和 y 值，而不是球体上的坐标。

Mike Bostock 在这篇 google groups 帖子中对此进行了解释:

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

The issue is that d3.geo.projection is primarily intended for converting spherical coordinates to Cartesian coordinates, so when you create a d3.geo.projection instance from a raw projection function, it assumes spherical coordinates. Meaning, it assumes your raw projection function takes radians λ and φ as input, converts the input coordinates from degrees to radians, and performs adaptive resampling on the output.

All of which makes it great for implementing new geographic projections, but you’ll probably want to take a different route for implementing a custom Cartesian projection.

One approach is to implement a custom geometry stream. This is a lower-level API that lets you control exactly how the geometry is transformed, and is suitable for a simple scale and translate:

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

有了这些知识，当然，通过期望数据是球形的投影来抽取点将导致一团糟。

如果我在 QGIS 中查看了 shapefile 或 geojson应用程序，在右下角它显示了用于对值进行编码的坐标引用系统 (CRS)。在我的例子中，它使用 5320(投影/2d)而不是 4326(地理坐标系)

关于javascript - GeoJson 和 D3.js 多面体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30359640/

28 4 0
文章推荐： tensorflow - tensorflow 中 Masking() Keras 函数的等效性是什么？还有batch norm、conv、relu支持Masking吗？
文章推荐： emacs - 最简单的 Emacs 语法高亮教程？
文章推荐： haskell - 在 Haskell 中实现临时多态性的最佳方法是什么？
文章推荐： vb6 - VB6 是否短路复杂条件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com