概述

topojson很早就问其大名，但日常用的比较多的还是geojson为主，最近在项目里面开始用到了，所以就写此文记录一下。

topojson

GeoJSON是用于描述地理空间信息的数据格式。
github上对TopoJSON的解释是： GeoJSON 按拓扑学编码后的扩展形式。TopoJSON 消除了冗余，允许将相关几何图形有效地存储在同一文件中。

对比

1.文件大小

2.渲染效率

转换以及在mapboxGL中的使用

1.转换

借助topojson-client，可方便的实现topojson到geojson的转换，转换方法参见API。

2.mapboxGl中的使用

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>白天不懂夜的黑</title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="../css/main.css"><link href="lib/mapbox-gl.css" rel="stylesheet" /><style>.map-chart {width: 20px;height: 40px;}</style>
</head><body>
<div id="app"><div id="map"></div>
</div>
<script src="lib/mapbox-gl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="lib/topojson-client.js"></script>
<script>var that, map;var app = new Vue({el: '#app',mounted() {that = this;that.initMap();},methods: {initMap() {var mapStyle = {"version": 8,"name": "Dark","sources": {"XYZTile": {"type": "raster","tiles": ['http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'],"tileSize": 256,}},"layers": [{"id": "XYZTile","type": "raster","source": "XYZTile","minzoom": 0,"maxzoom": 22}]};map = new mapboxgl.Map({container: 'map',maxZoom: 18,minZoom: 0,zoom: 3,center: [109.1699, 45.9719],style: mapStyle,attributionControl: false});map.on('load', () => {this.addTopoJSON();})},addTopoJSON() {$.ajax({type: "get",url: "data/province.topojson",success(json) {json = JSON.parse(json)const geojson = topojson.feature(json, json.objects['province']);map.addSource('points', {type: 'geojson',data: geojson});map.addLayer({id: 'points',type: 'fill',source: 'points',paint: {'fill-color': '#f00','fill-opacity': 0.2}});}});}}});
</script>
</body></html>

topojson转换与应用相关推荐

TopoJSON格式规范说明
TopoJSON 是 GeoJSON 的扩展, 增加了拓扑逻辑的编码. 武汉市TopoJSON数据目录 1.简介 1.1.举例 1.1.1 example 1 1.1.2 example 2 1.2 ...
java geojson和数据库_GeoJson和TopoJson数据格式的对比
GeoJson格式数据: //这是一个简单的矩形(坐标系:WGS_84) { "type":"FeatureCollection", "feature ...
cesium入门（八）geojson和topojson
GeoJSON 和 TopoJSON 是符合 JSON 语法规则的两种数据格式,用于表示地理信息. GeoJSON GeoJSON 是用于描述地理空间信息的数据格式. GeoJSON 的最外层是一个单 ...
基于HTML5的在线地图 - 加载TopoJSON数据
为什么80%的码农都做不了架构师?>>> Qunee for HTML5有许多地图的示例,包括地铁图,基于SVG数据的地图,结合leaflet的地图等,每个示例都是单独的实现, ...
TopoJSON数据转换
一.安装Topojson-server npm install -g topojson 二.GeoJSON转换为TopoJSON 之前:topojson -o output.json input.js ...
javabean实体类与实体类之间的快速转换
一.Dozer是什么? dozer是一个能把实体和实体之间进行转换的工具.只要建立好映射关系.就像是ORM的数据库和实体映射一样. 使用方法示例如下: // article(PO) -> art ...
C++ 笔记（35）— std::to_string 转换整形数字为字符串
1. 函数原型 string to_string (int val); string to_string (long val); string to_string (long long val); s ...
C++ OJ 中多行数据输入（大小写转换、通过移位运算实现2的n次方、多组输入，每行输入数量不一样）
1. 多组输入,输出每行最大值 while(cin>>a>>b) 主要解决的是两个为一组的多组数据输入,当一次只输入一个数据时就用 while(cin>>a) 输入 ...
数据结构（02）— 时间复杂度与空间复杂度转换
1. 时间复杂度转化为空间复杂度常用的降低时间复杂度的方法有递归.二分法.排序算法.动态规划等,降低空间复杂度的核心思路就是,能用低复杂度的数据结构能解决问题,就千万不要用高复杂度的数据结构. ...

topojson转换与应用

概述

topojson

对比

1.文件大小

2.渲染效率

转换以及在mapboxGL中的使用

1.转换

2.mapboxGl中的使用

topojson转换与应用相关推荐

最新文章

热门文章