标签: topojson
如何使用d3,javascript和json文件将地图划分为zipcodes？
我正在尝试创建一个带有我可以根据人口普查数据着色的邮政编码区域的纽约地图(如果大多数为白色则为红色区域,如果为多数非白色则为蓝色区域).我只是使用我在网上找到的形状文件之一(https://data.cityofnewyork.us/Business/Zip-Code-Boundaries/i8iw-xf4u/data).
我将shp文件转换为geojson,然后转换为topojson文件.
如果有人能查看我下面的代码,我会很感激,并告诉我如何才能做到这一点.
码:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 500,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var projection = d3.geo.albers()
.center([0,40.7])
.rotate([74,0])
.translate([width/2,height/2])
.scale(65000);
var path = d3.geo.path()
.projection(projection);
d3.json("zipcode.json", function(error, uk) {
console.log(uk)
console.log(uk.objects)
console.log(uk.objects.zipcode)
if (error) return console.error(error);
var subunits = topojson.feature(uk, uk.objects.zipcode);
svg.append("path")
.datum(subunits)
.attr("d", path);
});
输出:
我的代码的最后一部分(以及第一部分)是在https://bost.ocks.org/mike/map/之后建模的.我理解我正在尝试从我正在使用的json文件中选择某种特征数组的"全选"以创建路径.在我的数据中,有一个坐标数组,我试图访问和使用它.我的代码没有抛出任何错误,所以我不确定在哪里调试.
另外,我应该为这一步中创建的路径或创建路径后的区域着色？
推荐指数
解决办法
查看次数
将不同的文件与topojson组合在不同的简化级别
我想将三个geojson文件合并到一个topojson文件中.其中两个文件是非常简单的shapefile.他们不需要简化.
其中之一是10米文化自然地球矢量文件.它的geojson是24.8mb.我需要10米,因为我需要小岛屿留在地图上(虽然我可能会简化它们但保留它们--allow-empty).
是否可以使用topojson简化10m文化文件,然后使用topojson将其与其他两个geojson文件结合使用但不进行简化？
或者这是一个完全歪曲的方法,我应该以另一种方式接近？
谢谢你的帮助
推荐指数
解决办法
查看次数
将数据(.csv/json)与topojson相结合
我正在尝试将topojson(从形状文件生成)和数据结合起来,这样我就可以在地图上显示相关选择的数据,但还没有运气.
形状文件特征/属性:id,代码,名称
数据文件(我有.csv和josh)文件1列:year1,year2,year3,....标识符,%更改.(数据文件中的'identifier'列等于shape文件中的'code')
我有5个json文件中的数据.
我希望通过组合这两个文件来获取topojson文件,其中包含属性,id,代码,名称,year1,year2,year3,...%更改.
想法是,我只能使用一个topojson文件来显示地图以及相关数据.
这是我到目前为止所尝试过的,
生成topojson: 1.ogr2ogr -f GeoJSON geojsonoutput.json shpefile.shp 2. topojson -o final.json -e*.json --id-property = identifier -p - geojsonoutput.json
final.json :
{
"type":"Topology",
"objects":{"geojsonoutput":{"type":"GeometryCollection","geometries": [{"type":"Polygon","properties":{"id":"1","name":"some name"},"arcs":
, "file1" : [{id, code, name, year1, year2, year3,...%change}],
"file2" : [{id, code, name, year1, year2, year3,...%change}],
}
我可以使用以下方法访问地图信息,
topojson.feature(data,data.objects.geojsonoutput).features
但是,不知道如何访问数据...例如("file1"或"file2")键.
实际上..我正朝着正确的方向前进？我到目前为止所做的是正确的吗？有没有更好的方法来实现我想要做的事情？
任何指导都会很棒.我仍然是D3的新手,但到目前为止仍然喜欢使用它.
干杯
推荐指数
解决办法
查看次数
为什么我的TopoJSON拉杆和长点不显示在我的美国地图上？
我正在使用TopoJSON绘制美国地图上的点数.我认为我的数据格式正确,一切都在加载,状态显示......但我没有分数.控制台没有错误.这是我的脚本:
var width = 800,
height = 500;
var projection = d3.geo.albersUsa()
.scale(1070)
.translate([420, height / 2]);
var path = d3.geo.path()
.projection(projection)
.pointRadius(1.5);
var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);
queue()
.defer(d3.json, "../us.json")
.defer(d3.json, "../users.json")
.await(ready);
function ready(error, us, users) {
svg.append("path")
.datum(topojson.feature(us, us.objects.land))
.attr("class", "land")
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("class", "states")
.attr("d", path);
svg.append("path")
.datum(topojson.feature(users, users.objects.users))
.attr("class", "points")
.attr("d", path);
};
我的数据看起来像:
{
"type": "Topology",
"transform": {
"scale": [ …推荐指数
解决办法
查看次数
将标记放到使用topoJSON和d3.js生成的地图上
我正在创建一个特定州的地图,我一直在尝试使用d3.js和topojson并创建了一个很棒的地图,但现在我想在地图上添加一个标记.
但是现在我遇到了问题,因为当我添加标记有一个GeoJSON文件来为生成的地图添加标记时,我还想在按下标记时打开工具提示.
我的地图非常类似于:http://bl.ocks.org/mbostock/4699541,我想要的是通过具有标记的地理坐标的GeoJSON文件向状态添加标记.
所以地图是目前的
预计地图......
推荐指数
解决办法
查看次数
计算JavaScript中两个多边形的重叠百分比
问题出在这里：我有geoJSON和topoJSON文件，这些文件为我提供了人口普查区块组和投票区域的多边形。我正在尝试查看给定的人口普查区块组与给定的区域有多少重叠。
我已经看到了一些其他语言示例，例如R和某些GIS工具，但是我正在尝试将其编写为Node.js脚本。几个问题：
- 是否有可以吐出重叠百分比的NPM模块（我已经做了大量的Google搜索，但我还没有找到）。
- 是否有我应该了解的算法或用另一种语言编写的示例（我看过了，但是我从最模糊的地方开始）并且可以移植到JavaScript？
- 这些失败，能有人向我解释我怎么会去想着创造这个算法？
最后，最终产品看起来像这样—想象我有一系列的区域和块组，每个对象都是一个具有geometry属性的对象，其中包含该区域或块组的多边形数据，并且还想象着我有一个称为的函数overlap，当传递两个多边形时会吐出百分比重叠：
// Iterate over each precinct.
_.each( precincts, function ( precinct ) {
// Iterate over each blockgroup.
_.each( blockgroups, function ( blockgroup ) {
// Get the overlap for the current precinct and blockgroup.
var o = overlap( precinct.geometry, blockgroup.geometry );
// If they overlap at all...
if ( o > 0 ) {
// ...Add information about the overlap to the precinct.
precinct.overlaps.push({
blockgroup: blockgroup.id,
overlap: o …推荐指数
解决办法
查看次数
topojson / D3 / 经度+纬度地图
我使用以下 UK Geo JSON 来渲染英国 SVG 地图 http://martinjc.github.io/UK-GeoJSON/json/eng/topo_eer.json
在这张地图上，我希望能够获取经度+纬度点并绘制在地图上。
我通过以下方式将 GeometryCollection 位置添加到地图中：
data.objects.places = {
type: "GeometryCollection",
geometries: [
{
type: "Point",
coordinates: [-0.127758, 51.507351], // London
properties: {
name: "London - Testing"
}
}
]
};
但是坐标未位于正确的位置。
下面是完整的 JavaScript。
var width = 960;
var height = 1000;
var projection = d3.geo.albers()
.center([0, 55.4])
.rotate([4.4, 0])
.parallels([50, 60])
.scale(4000)
.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("topo_eer.json", function(error, data) …推荐指数
解决办法
查看次数
shp2json生成GeoJSON,其边界和坐标不在(-180,180)范围内
我正在做@ mbostock 关于命令行制图的教程 1.以下是我所做的:
1)下载zip文件
wget https://www.arb.ca.gov/ei/gislib/gislib.htm/ca_air_basins.zip
(来自加州空气资源委员会网站)
2)通过单击.zip文件手动解压缩(unzip命令不起作用,因为下载的文件没有'结束中心目录签名')
2)将shapefile转换为GeoJSON
shp2json CaAirBasin.shp -o ca.json
3)使用California Albers(在CaAirBasin.prj文件中指定)进行GeoJSON投影:
geoproject 'd3.geoConicEqualArea().parallels([34, 40.5]).rotate([120, 0]).fitSize([960, 960], d)' < ca.json > ca-albers.json
结果:我得到ca-albers.json(223M)比ca.json(6.3M)大得多.在本教程中使用的人口普查区shapefile中,文件大小从10增加到14 M.
更新:似乎问题是shp2json步骤而不是geoProject步骤.看着CaAirBasin.shp.xml,有两组边界的,bounding并且lbounding.在我的情况,lbounding和坐标是在100,000s范围内使用,而不是在教程(-180,180)的值,使得投影失败.
有什么好的下一步 - 是否有替代方案shp2json可以适用于我的案例？或者如何将我的边界/坐标转换为适当的(-180,180)？
谢谢.
推荐指数
解决办法
查看次数
d3.js 提取 SVG 路径元素的坐标
在这个问题上花了很长时间但没有任何成功之后，我决定在这里发布我的（第一个！）问题。
对于一个项目，我使用 topojson 来绘制地图的一部分。在我的 SVG 中，我有一些包含一些点的组（我使用 geojson.io 工具放置了这些点）。
地图如下所示：绘制的地图
代码的结构如下所示：
<svg width='1300' height='900'>
<g class="gate" id="D5">
<path d="M645.3426080089994,434.9821086442098m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>
</g>
<g class='gate' id='d4'>
<path d="M605.3552137160441,383.2755208062008m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>
</g>
</svg>
我想做的是根据这些点的确切位置的某些条件附加一些 SVG。现在，虽然我知道如何附加 SVG，但我无法提取地图上点的坐标。我要附加的 SVG 必须放在地图中的点上。但是，例如，当我在组中附加一个圆时，我输入的坐标不考虑相对于该点，而是相对于整个 SVG 区域的绝对值。圆最终在左上角而不是在实际点上。
我试图提取每个点的坐标以便使用这些数据进行绘图，但我还没有成功。我设法通过使用获取节点：
d3.selectAll('#D5').select('path').node()
返回：
<path d="M605.3552137160441,383.2755208062008m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>
当我查看路径对象时，我看到在 __ data__ 元素的深处有一些坐标，但我无法提取这些坐标。
如果我在开始时定义了点的坐标，这个问题就不会成为问题。然而，由于这是topojson，整个图像只是路径元素的组合。
如何在没有事先明确定义坐标的情况下在点上绘制 SVG？如果需要更多信息，请告诉我。
谢谢！
推荐指数
解决办法
查看次数
如何使用 geoPath 居中和缩放
我正在使用 D3 和 topojson 过滤掉美国县的子集。我可以成功过滤出县并将其绘制到 SVG 元素，但如何更改地图边界以适应新选定的县？它渲染地图时，就好像边界是美国所有县，而不是仅过滤后的县。
var width=960,
height=600,
centered;
const svgElement = d3.select(ref.current)
.append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", [0,0,width,height]);
var path = d3.geoPath();
d3.json("https://d3js.org/us-10m.v2.json").then((d) => {
d.objects.counties.geometries = d.objects.counties.geometries.filter(function(item) {
return props.data.indexOf(item.id) > -1
})
var counties = topojson.feature(d, d.objects.counties).features;
svgElement.append("g")
.attr("class", "filled-territory")
.selectAll("path")
.data(counties)
.enter()
.append("path")
.attr("d", path)
});
哪里props.data是一组县 ID，例如 -
[
"45001",
"45003",
"45007",
"45083",
"45087",
"45091"
]
我可以让它像这样显示，但我不知道如何让路径填充 SVG：
推荐指数
解决办法
查看次数