标签: topojson

如何从110m TopoJson世界地图上删除一条线?

我已经使用D3制作了一张110m世界地图和墨卡托投影的地图。我将地图旋转了-10度,以使其按我的意愿对齐,然后设置笔触和填充。完成此操作后,我注意到穿过楚科奇半岛(通常在阿拉斯加的左侧发现)的一条线。

楚科奇半岛

查看GitHub上的渲染以及使用此投影制作的另一张地图,似乎此行实际上在数据中。

从GitHub渲染 另一个例子

有什么方法可以摆脱它(编辑TopoJSON,重新生成形状或其他方法)吗?

maps d3.js topojson

5
推荐指数
1
解决办法
962
查看次数

如何在d3js中控制地图上图层的顺序

我有一个关于用d3js制作地图的简单问题.我想制作一个有两层的地图.一层是地图的轮廓(geoJson),另一层是街道(topoJson).我的问题是街道层总是被加载到轮廓层的前面,无论在代码之前写入哪一层.我想要相反的情况:街道前面的轮廓层.我认为这个问题的发生是因为两个请求都是异步的,并且之前加载了轮廓层,因为它是最轻的.

这是代码......

//Width and height
            var w = 900;
            var h = 500;

            //Define map projection
            var projection = d3.geo.transverseMercator()
                                   .center([2.5, -34.65])
                                   .rotate([61.5, 0])
                                   .scale((h * 750.5) / 3)
                                   .translate([(w/2), (h/2)]);

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

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

            //Load in TopoJSON data
            d3.json("streets.json", function(error, topology) {


                svg.selectAll("path")
                   .data(topojson.feature(topology, topology.objects.layer1).features)
                   .enter()
                   .append("path")
                   .attr("d", path)
                   .style("fill", "white")
                   .style("stroke", "#cccccc");

            });

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

                //Bind data …
Run Code Online (Sandbox Code Playgroud)

javascript maps geojson d3.js topojson

5
推荐指数
1
解决办法
2648
查看次数

我在哪里可以获得印度的.geojson文件,而不是为每个州/地区或任何其他区别分开文件?

印度有.geoJSON档案吗?我想使用d3.js状态,城市进行数据可视化,因此需要代表印度的GEOJSON文件.我应该从哪里开始或应该采用什么方法?

此外, Mike的教程对于第一次处理地理数据转换的 Windows人员没什么帮助.

请帮忙.

谢谢,

javascript qgis geojson d3.js topojson

4
推荐指数
1
解决办法
8279
查看次数

D3.js - 如何使用默认的wheelmouse缩放行为添加缩放按钮

所以我使用默认的d3.behavior.zoom()和限制来获得带有鼠标缩放的世界地图,以防止将地图完全拖出页面.这对于工作来说是一种痛苦,但它现在起作用了.

我现在的问题是这个项目还需要界面中无用的缩放+和 - 按钮,我找不到两种缩放类型的例子.它既可以是鼠标缩放,也可以是蹩脚的缩放按钮.

我试过简单地调用zoom.scale(newScale); 但它没有更新任何东西.我似乎是在正确的轨道,因为在控制台中你可以看到比例更新但它没有更新,当我用鼠标缩放时,它突然跳到使用按钮定义的比例.但似乎我还需要更新翻译,我不知道如何得到地图的中心并计算缩放到那里所需的翻译.

我还需要知道在调用zoom.scale(newScale)后如何更新投影; 如果是这样做的话.

我用缩放按钮制作了一个简化的演示,显然现在不能正常工作. http://bl.ocks.org/jfmmm/f5c62bc056e557b80447

谢谢!

编辑:现在如此接近,它会缩放到地图的中心,因为我使用的计算方法与计算屏幕的中间位置相同,但使用新的比例.问题是我希望它放大屏幕中间的对象,而不是地图中间的国家.

function zoomBtn(action) {
    var currentZoom = zoom.scale();

    if( action == 'in' ){
        if(currentZoom < options.maxZoomLevel){
            var newScale = Math.floor(currentZoom) + 1;

            var b = path.bounds(mapFeatures);
            var t = [(width - newScale * (b[1][0] + b[0][0])) / 2, (height - newScale * (b[1][1] + b[0][1])) / 2];

            zoom.scale(newScale)
                .translate(t)
                .event(svg);
        }
    }else{
        if(currentZoom > options.minZoomLevel){
            var newScale = Math.floor(currentZoom) - 1;

            var b = path.bounds(mapFeatures);
            var t = [(width …
Run Code Online (Sandbox Code Playgroud)

javascript geojson world-map d3.js topojson

4
推荐指数
1
解决办法
8719
查看次数

当我有陆地坐标信息时,如何在 d3 中使用 topojson 为海洋着色?

我正在用 d3 学习 topojson 。我有土地的坐标信息,该信息已正确渲染。那么,如何为海洋(基本上是陆地之外)添加颜色呢?我尝试为标线着色,但没有填满整个地图并留下空白点。

可视化托管在http://jbk1109.github.io/

var projection = d3.geo.stereographic()
    .scale(245)
    .translate([width / 2, height / 2])
    .rotate([-20, 0])
    .clipAngle(180 - 1e-4)
    .clipExtent([[0, 0], [width, height]])
    .precision(.1);

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

var g = svg.append("g")

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path)
    .style("fill","none")
    .style("stroke","#777")
    .style("stroke-width",0.2)

var land = svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path)
      .style("fill",'#cbcbcb')
      .style("opacity",0.8)
Run Code Online (Sandbox Code Playgroud)

dictionary d3.js topojson

4
推荐指数
1
解决办法
2524
查看次数

Homebrew无法链接libpng尝试安装gdal

我正在尝试通过自制软件安装gdal所以我可以开始使用topojson,但我一直收到这个错误,我不知道如何解决它?

k-6177:Cellar k$ brew install gdal
==> Installing dependencies for gdal: libpng, giflib, libtiff, lzlib, proj, libgeotiff, geos, sqlite, freexl, libxml2, json-c, liblwgeom, libspatialite
Error: Cannot link libpng
Another version is already linked: /usr/local/Cellar/libpng/1.6.16
Run Code Online (Sandbox Code Playgroud)

homebrew gdal topojson

4
推荐指数
1
解决办法
4477
查看次数

找到topoJSON路径的质心并使用它在D3中定位一个圆

在我的数据中,我有与国家相关的价值观.我为每个国家创建了缩放的圆圈,现在想使用cx和cy将它们放在每个国家的中心.

我使用具有国家/地区代码'ids'的topoJSON生成了一个地图,并且我的数据(cd)中有匹配的国家/地区代码.

{"type": "Polygon",
"id": 604,
"arcs": [
  [133, -473, -448, -378, -374, -413]
 ]
},
Run Code Online (Sandbox Code Playgroud)

使用D3的path.centroid(feature),如何找到每个topoJSON路径的质心?

g.selectAll("circle")
    .data(cd)
    .enter()
    .append("circle")
    .attr("class", "bubble")
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", function(d) {
      return r(+d.Value)
    })

g.selectAll("path")
  .data(topojson.object(topology, topology.objects.countries)
    .geometries)
  .enter()
  .append("path")
  .attr("d", path)
Run Code Online (Sandbox Code Playgroud)

这里有完整的代码Plunker

d3.js topojson

4
推荐指数
1
解决办法
2233
查看次数

无法安装Topojson

从npm(通过自制软件安装)安装topojson时,我得到以下信息:

npm WARN enoent ENOENT: no such file or directory, open '/Users/MuhammadShaaban/package.json'
npm WARN MuhammadShaaban No description
npm WARN MuhammadShaaban No repository field.
npm WARN MuhammadShaaban No README data
npm WARN MuhammadShaaban No license field.
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/Cellar/node/7.3.0/bin/node" "/usr/local/bin/npm" "install" "topojson"
npm ERR! node v7.3.0
npm ERR! npm  v3.10.10
npm ERR! path /Users/MuhammadShaaban/node_modules/topojson/node_modules/topojson-server/bin/geo2topo
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall chmod

npm ERR! enoent ENOENT: no such file or directory, chmod …
Run Code Online (Sandbox Code Playgroud)

homebrew node.js topojson

4
推荐指数
1
解决办法
470
查看次数

预投影几何体v让浏览器做到这一点(又名效率v灵活性)

为了提高我的在线地图的性能,特别是在智能手机上,我遵循Mike Bostock的建议,在将地理数据上传到服务器之前尽可能地准备地理数据(根据他的命令行制图).例如,我正在通过d3.geoConicEqualArea()命令行投射TopoJSON数据,而不是让观看者的浏览器在加载地图时执行这项繁重的工作.

不过,我也想用类似的方法.scale,.fitSize,.fitExtent.translate动态,这意味着我不能"烤"的规模或价值事先翻译成TopoJSON文件.

Bostock建议使用d3.geoTransform()作为预测的代理,例如,d3.geoConicEqualArea()如果您正在使用已经预测的数据但仍希望扩展或翻译它.例如,要在y轴上翻转投影,他建议:

var reflectY = d3.geoTransform({
      point: function(x, y) {
        this.stream.point(x, -y);
      }
    }),

    path = d3.geoPath()
        .projection(reflectY);
Run Code Online (Sandbox Code Playgroud)

我的问题:如果我使用这个D3功能,我是不是仍然强迫观众的浏览器进行大量的数据处理,这会使性能恶化?预处理数据的目的是避免这种情况.或者我是否过高估计上述d3.geoTransform()功能涉及的处理工作?

data-visualization geo geojson d3.js topojson

4
推荐指数
1
解决办法
384
查看次数

如何在Altair中使用GeoJSON数据制作地图?

我对制图和Altair / Vega非常陌生。Altair文档中一个示例,说明如何制作以美国各州的轮廓开始的地图,该地图的创建基本上是这样的:

states = alt.topo_feature(data.us_10m.url, feature='states')

# US states background
background = alt.Chart(states).mark_geoshape(
    fill='lightgray',
    stroke='white'
)
Run Code Online (Sandbox Code Playgroud)

但我想在不列颠群岛上绘制点。由于vega数据集中只有美国和世界地图,因此我必须创建自己的GeoJSON,不是吗?

因此,我尝试通过运行此博客文章中的一些命令行命令世界地图上获取不列颠群岛的GeoJSON ,即,

ogr2ogr -f GeoJSON -where "adm0_a3 IN ('GBR','IRL','IMN','GGY','JEY','GBA')" subunits.json ne_10m_admin_0_map_subunits/ne_10m_admin_0_map_subunits.shp
Run Code Online (Sandbox Code Playgroud)

这似乎已经创建了一个GeoJSON文件subunits.json,它可能代表不列颠群岛。但是我怎样才能把它带入Altair?还是有其他方法可以使用Altair制作不列颠群岛的地图?

python geojson topojson vega altair

4
推荐指数
1
解决办法
478
查看次数