GeoJson和D3.js多多边形 [英] GeoJson and D3.js multipolygon
问题描述
我有这个几何形状的文件，所以没有城市的地图.
I have this geometric shape file, so no map of a city.
我将它作为GeoJson存储在GIS数据库中.现在，我想可视化geojson数据.我首先使用QGIS创建了GeoJson数据，并将其导出为坐标参考系统 WGS 84 EPSG:4326 .这是Shapefile的示例数据:
I store it in a GIS database as GeoJson. Now, I want to visualize the geojson data. I created the GeoJson data first with QGIS and exported it as Coordinate Reference System WGS 84 EPSG:4326. This is an example data of 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的两个几何位于末尾:
GeoJson Shapefile two the geometry is at the end:
{
"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
],
几何位于文件的末尾.我已经尝试过这篇文章中的内容，但这仅适用于多边形，而不适用于多面:
The geometry is at the end of the file. I already tried things from this post but this works only for polygons and not multipolygons:
我尝试使用以下代码将两者可视化:
I tried to visualize both with the following code:
<!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>
运行脚本后，我得到第一个数据的以下结果:
After running the script I get for the first data the following result:
尝试第二张图片的脚本，我得到了一张白纸.
Trying the script for the second image I get a white page.
我上传了两个形状文件 形状文件
I uploaded the two shape files Shapefiles
推荐答案
我为这种类型的问题苦苦挣扎了好几天.原来，用于序列化地图的坐标系是投影的，而不是几何的，这意味着数据已经作为x和y值存储在2d平面上，而不是球体上.
I struggled with this type of issue for days. Turns out the coordinate system used to serialize the map was projected instead of geometric, meaning that the data was already stored as x and y values on a 2d plane, not coordinates on a sphere.
迈克·波斯托克(Mike Bostock)在此Google网上论坛帖子中的确切位置对此进行了解释:
Mike Bostock explains it very where in this google groups post:
https://groups.google.com/forum/# ！topic/d3-js/OSp_sMZjfok
问题在于d3.geo.projection主要用于将球面坐标转换为笛卡尔坐标，因此，当您从原始投影函数创建d3.geo.projection实例时，它将假设球面坐标.意思是，假设您的原始投影函数将弧度λ和φ作为输入，将输入坐标从度转换为弧度，并对输出执行自适应重采样.
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.
一种方法是实现自定义几何流.这是一个较低级的API，可让您精确控制几何图形的转换方式，适用于简单的缩放和转换:
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
因此，有了这些知识，当然可以通过一个预计数据为球形的投影来泵送点，这会造成很大的麻烦.
So armed with this knowledge, of course pumping the points thru a projection that expects the data to be spherical is going to result in a big mess.
如果我在 QGIS 应用程序中查看了shapefile或geojson，则该文件位于右下角显示用于对值进行编码的坐标参考系统(CRS).在我的情况下，它使用的是5320(投影为2d)而不是类似4326(它是地理坐标系)的
If I viewed the shapefile or geojson in QGIS application, at the bottom right it shows the Coordinate Reference System (CRS) used to encode the values. In my case it was using 5320 (which is projected/2d) instead of something like 4326 (which is a geographic coordinate system)
这篇关于GeoJson和D3.js多多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
