Vue+OpenLayers7入门到实战:OpenLayers加载TopoJson数据，使用行政区划边界作为示例

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7入门到实战

前言

本章介绍如何使用OpenLayers7在地图上实现加载解析TopoJson格式的要素数据并叠加渲染到地图上的功能，以行政区划要素数据为例，叠加行政区划边界到地图上。

TopoJson介绍

TopoJson是用于表示地理空间数据的格式。是GeoJson格式的改进版，相比 GeoJSON 直接使用 Polygon、Point 之类的几何体来表示图形的方法，TopoJSON 中的每一个几何体都是通过将共享边（被称为arcs）整合后组成的，因此TopoJSON 消除了部分冗余数据，使得文件最终大小比GeoJson缩小了约 80%。

与GeoJson的区别
TopoJson和GeoJson是两种用于表示地理空间数据的格式。它们之间的主要区别如下：

1. 数据结构：GeoJson使用标准的JSON格式来表示地理空间数据，每个要素都是一个独立的对象。而TopoJson使用了一种拓扑结构，将地理要素表示为拓扑关系的集合，通过共享边界和节点来减少数据的冗余。

2. 数据压缩：由于TopoJson使用了拓扑结构，它可以在保持地理数据完整性的同时减少数据量。相比之下，GeoJson在表示复杂地理要素时可能会产生大量的冗余数据。

3. 精度控制：TopoJson可