gpt4 book ai didi

javascript - 使用 d3.js 将 NUTS 数据渲染到浏览器中的 map

转载 作者:太空宇宙 更新时间:2023-11-04 16:31:56 24 4
gpt4 key购买 nike

我正在使用Nomenclature of Units for Territorial Statistics (NUTS)国家次区域的数据(即州/部门、小于国家但大于城市的行政区域)。我从官方网站将它们作为 Shapefile 获取。

接下来,我使用以下命令将它们转换为 GeoJSON:

ogr2ogr -f GeoJSON europe_admin_sub_units.json NUTS_RG_01M_2013.shp

现在我想做的就是在浏览器中简单地渲染它以了解它的外观。

我尝试过这个简单的脚本,但它不起作用:

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

/* CSS goes here. */

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

var width = 960,
height = 1160;

var projection = d3.geo.mercator()
.scale(500)
.translate([width / 2, height / 2]);

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

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

d3.json("data.json", function(error, uk) {
svg.append("path")
.attr("d", path);
});

</script>

但是,我不明白为什么它不起作用。

我的浏览器控制台中没有错误。我正在使用 Chrome。

Here是我正在使用的数据,本质上虽然它看起来像这样:

{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "NUTS_ID": "AT", "STAT_LEVL_": 0, "SHAPE_AREA": 10.0385472864, "SHAPE_LEN": 27.774664036600001 }, "geometry": { "type": "Polygon", "coordinates":

最佳答案

一些事情:

首先,您的 GeoJSON 文件非常大。在浏览器中渲染它会非常慢。如果您只想查看生成的形状,这可能不是问题,但否则您需要简化它。使用 ogr2ogr -simplify 这很容易。

其次,path是一个函数,因此您需要使用一些地理特征来调用它才能看到任何内容。

https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Paths.md

d3.json("data.json", function(error, uk) {
svg.append("path")
.attr("d", path(uk));
});

...会给你一些东西,但我不确定这是否是你正在寻找的。

此外,如果您只想查看形状,可以使用 QGIS ( http://www.qgis.org/en/site/ ),它是免费的,非常适合预览和操作形状文件。

关于javascript - 使用 d3.js 将 NUTS 数据渲染到浏览器中的 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39722077/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com