作者:gaogy
1、背景
在现代三维地图应用中,数据的加载和可视化尤为重要,尤其是对于大规模的地理空间数据。iClient3D for Cesium 是由SuperMap提供的一款强大的三维客户端,支持将多种地理数据格式加载到三维环境中。
SHP 文件(Shapefile)是一种广泛使用的空间数据格式,通常用来存储地图数据的矢量图形。shp数据常常出现于桌面端直接交换数据,而在前端则很少使用,本文将介绍如何利用Shapefile.js 三方库在 iClient3D for Cesium 中加载 SHP 数据,并将其转化为三维“白模”样式。
2、效果演示
iClient3D for Cesium 拉伸模型
3、Shapefile.js 三方库介绍
Shapefile.js 是一个用于解析 shp(shapefile) 数据将其转换为 Geojson 的 JavaScript 库。并且,Shapefile.js 在内存管理和算法优化方面进行了大量工作,使其能够处理大型 Shape 文件而不会影响性能。
Shapefile.js GitHub 地址:https://github.com/mbostock/shapefile
Shapefile.js NPM 地址:https://www.npmjs.com/package/shapefile
Shapefile.js 在线 CDN 地址:https://unpkg.com/shapefile@0.6.6/dist/shapefile.js
4、实现过程
4.1、使用 Shapefile.js 解析 shp 文件
查看 Shapefile.js 文档,发现使用其 read 方法即可解析 shp 文件。read 方法接收三个参数,第一个参数shp为shapefile数据的shp后缀的文件,第二个参数dbf为shapefile数据的dbf后缀的文件;第三个是 options ,用于传递编码之类的参数。其中只有第一个参数是必传的。
Shapefile.js 的 read 方法源码如下:
export function read(shp, dbf, options) {return open(shp, dbf, options).then(function(source) {var features = [], collection = {type: "FeatureCollection", features: features, bbox: source.bbox};return source.read().then(function read(result) {if (result.done) return collection;features.push(result.value);return source.read().then(read);});});
}
本文使用 Shapefile.js 封装的转换方法如下:
async function shp2geojson(shpFile, dbfFile) {const geojson = { type: 'FeatureCollection', features: [] }const source = await shapefile.open(shpFile, dbfFile)while (true) {let result = await source.read()if (result.done) breakgeojson.features.push(result.value)}return geojson
}
4.2、处理文件读取后的方法
function handleFileChange(event) {const dbfFiles = []const shpFiles = []const files = event.target.filesif (files.length > 0) {function readFile(file) {return new Promise((resolve, reject) => {const reader = new FileReader()reader.onload = (e) => resolve(e.target.result)reader.onerror = (err) => reject(err)reader.readAsArrayBuffer(file)})}const filePromises = Array.from(files).map((file) => {return readFile(file).then((data) => {if (file.name.endsWith('.shp')) shpFiles.push(data)if (file.name.endsWith('.dbf')) dbfFiles.push(data)})})Promise.all(filePromises).then(async () => {try {const geojson = await shp2geojson(shpFiles[0], dbfFiles[0])dataSource = await Cesium.GeoJsonDataSource.load(geojson, {clampToGround: true,fill: Cesium.Color.PINK.withAlpha(0.6)})viewer.dataSources.add(dataSource)viewer.zoomTo(dataSource)} catch (error) {throw new Error(error)}})}
}
这里读取了两个文件,一个是 shp 后缀的文件,另一个是 dbf 后缀的文件,分别存储的是空间数据与属性数据;因为后续演示了拉伸为三维白模,故这里需要读取 dbf 文件
注意:dbf 跟 shp 是对应的,本文这里未做判断与检查,一次选择了多个 shp 与 dbf 的话,则需要检查判断
4.3、拉伸白模
上一步已经将shp数据转换为了geojson格式的数据,并已经加载到场景中了,我们只需要利用shp自身的高度属性字段,设置 entity 的拉伸高度,即可将其拉伸为三维白模
function makeModel() {const entities = dataSource.entities.valuesentities.forEach((entity) => {entity.polygon.material = new Cesium.Color(1, 0.6, 0, 1)entity.polygon.outline = falseentity.polygon.height = 0entity.polygon.extrudedHeight = entity.properties.height.getValue()})
}
5、总结
本文介绍了如何使用 Shapefile.js 这个 JavaScript 库在iClient3D for Cesium中加载 shapefile 数据,并且可以根据 shp 数据属性信息,将其拉伸为三维白模,在前端可视化。
本文详细 vue 代码可在https://download.csdn.net/download/supermapsupport/90184990下载参考