【 D3.js 入门系列 — 10.3 】 GeoJSON 文件和 TopoJSON 文件的区别和联系

本人的个人博客为:www.ourd3js.com

csdn博客为:blog.csdn.net/lzhlzz

转载请注明出处,谢谢。



前些天有朋友留言询问 GeoJSON 文件和 TopoJSON 文件的关系,正好我其实也不是十分明了,查询了一番后整理如下,还望大家指证。

这两种文件都是基于 JSON 语法的,首先来说一下 JSON 语法和文件是怎样的。

1. JSON 格式

JSON(JavaScript Object Notation) 是一种轻量级的数据交换语言,以文字为基础,且易于让人阅读。尽管 JSON 是 Javascript 的一个子集,但 JSON 是独立于语言的文本格式,并且采用了类似于C语言家族的一些习惯。

JSON 的格式[1]如下:

  • 物件( object ):一个物件的数据写在一组大括号内 { ... }
  • 名称/值( collection ): 每一个物件都由一系列的名称/值( collection )组成,名称/值之间用逗号( , )分隔。一个名称可以是一个字符串;一个值可以是字符串,数值,布尔值,有序列表,或 null 值。
name:value

由于 name 必定是字符串,所以要写在双引号之内。

  • 值的有序列表( Array ):列表写在 [ ... ] 之间
[collection, collection, collection, ...]

2. GeoJSON 格式

GeoJSON 是一种对地理数据结构进行编码的格式。它只是一个采用上述 JSON 格式的用于描述地理信息的格式。它的语法和 JSON 是一样的,只是对各名称做了规范,形如[2]:

{ "type": "FeatureCollection",
    "features": [
      { "type": "Feature",
        "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
        "properties": {"prop0": "value0"}
        },
      { "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
            ]
          },
        "properties": {
          "prop0": "value0",
          "prop1": 0.0
          }
        },
      { "type": "Feature",
         "geometry": {
           "type": "Polygon",
           "coordinates": [
             [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
               [100.0, 1.0], [100.0, 0.0] ]
             ]
         },
         "properties": {
           "prop0": "value0",
           "prop1": {"this": "that"}
           }
         }
       ]
     }

具体的可以参加 http://geojson.org/

3. TopoJSON 格式

TopoJSON 是 GeoJSON 简化后的版本,可以说是 GeoJSON 的小孩。D3.js 的作者认为 GeoJSON 不太好,比较推崇 TopoJSON 格式。

TopoJSON 与 GeoJSON 相比,文件大小缩小了 80% ,因为:

  • 边界线只记录一次(例如广西和广东省的交界线只记录一次)
  • 不使用浮点数,只使用整数

不过 TopoJSON 似乎只在 D3.js 中比较广泛的使用,还不是世界范围内认可的格式。

要注意,无论 GeoJSON 还是 TopoJSON ,它们本质上有是 JSON 格式的文件,都遵循 JSON 的语法,只不过对变量的名称做了不同的规范。

在 http://mapshaper.org/ 可以试着转换 GeoJSON 和 TopoJSON 的数据,我们会看到对于同一个地理数据文件,TopoJSON 的文件大小大概相当于 GeoJSON
的 20% ,这对于解决因文件量过大而造成的读取速度过慢是相当简单有效的。



[1] http://zh.wikipedia.org/wiki/JSON

[2] http://geojson.org/

时间: 2024-11-05 06:25:13

【 D3.js 入门系列 — 10.3 】 GeoJSON 文件和 TopoJSON 文件的区别和联系的相关文章

【 D3.js 入门系列 --- 10 】 地图的绘制

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 地图的制作在 D3 中可以说是最重要的一环.因为在进行数据可视化时,很多情况都会和地图联系在一起,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起. D3 中制作地图所需要的文件问 JSON 文件.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.关于 JSON 的语法格式,可以在: http://www.w3s

【 D3.js 入门系列 --- 10.1 】 简化 GeoJSON 文件

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 上一篇制作中国地图时用到了 GeoJSON 文件.后来我发现这个文件太大,有 2,364 KB,当然这能保证地图很精确,但我们通常不需要那么精确的边界,所以有必要将它缩小.所幸已经有前人做过这项工作,真是前人栽树,后人乘凉,在这里表示感谢. 转换方法: 1. 打开网站  http://mapshaper.org/ 2. 点击 select 选择要缩减的 GeoJSO

【 D3.js 入门系列 --- 10.2 】 可拖动的地图

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 本节是结合9.2节 和 10节 的内容制作的一个可力学导向的中国地图,用户可以拖动中国的各个省份. 数据用的是 10.1节 中简化的中国地图文件: china_simplify.json 1. 定义各函数 var projection = d3.geo.mercator() .center([107, 31]) .scale(850) .translate([wid

【 D3.js 入门系列 --- 9.6 】 打包图的制作

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 打包图( Pack ),用于包含与被包含的关系,也表示各个对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 先看本节所使用的数据:  city2.json 这是各城市所属关系的数据.我们现在要用 D3 的 layout 来转换数据,使其容易进行可视化处理. var pack = d3.layout.pack() .size([ width, heigh

【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 在前面几节中反复出现了如下代码: svg.selectAll("rect") .data(dataset) .enter() .append("rect") 当所选择的 rect 数量比绑定的数据 dataset 的数量少的时候,通常会用到以上代码,这一节就详细说说当被选择元素和数据数量不一致时该如何处理. 这一节将涉及到三个函数.

【 D3.js 入门系列 — 0 】 简介和安装

[ D3.js 入门系列 — 0 ] 简介和安装 发表于2014/06/12 近年来,可视化越来越流行,许多报刊杂志.门户网站.新闻.媒体都大量使用可视化技术,使得复杂的数据和文字变得十分容易理解,有一句谚语“一张图片价值于一千个字”,的确是名副其实.各种数据可视化工具也如井喷式地发展,D3 正是其中的佼佼者. 1. D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript

【 D3.js 入门系列 --- 9.3 】 弦图的制作

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 弦图( Chord ),主要用于表示两个节点之间的联系.如下图: 两点之间的连线表示,谁和谁具有联系: 线的粗细表示权重: 上面的介绍源于: http://circos.ca/guide/tables/  ,我就不详细介绍了,还是很好理解的. 那么在 D3 中怎么用 layout 转换出弦图所需要的数据,并作图呢?请耐心往下看. 1. 首先给出数据 var ci

【 D3.js 入门系列 --- 9 】 常见可视化图形

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. Layout ,直译为"布局,安排".但在 D3 中不是这个意思. D3 中有很多 Layout 函数,它们不是为了在画面中布局什么,在 D3 中是对输入的数据进行转换,转换成比较容易进行可视化的数据.实际进行可视化时,需要其他的代码.我们可以简单地把 Layout 理解为"制作常见图形的函数",比如饼状图等等. D3 中一共提供了

【 D3.js 入门系列 --- 9.5 】 树状图的制作

这一节学习树状图的制作.树状图的制作和集群图完全相同,经过这两种 layout 转换后的数据也很相似. 本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 树状图( Tree )通常用于表示层级.上下级.包含与被包含关系.树状图的制作和 9.4节集群图的制作 的代码几乎完全一样.不错,你没看错,几乎完全一样.那么为什么要把这两种图分开,它们有什么不同呢?先来看看对于同一组数据,它们的结果有什么不同.数据为: {