iClient3D for Cesium 加载shp数据并拉伸为白模

作者：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 方法源码如下：

js 复制代码

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 封装的转换方法如下：

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) break
    geojson.features.push(result.value)
  }
  return geojson
}

4.2、处理文件读取后的方法

js 复制代码

function handleFileChange(event) {
  const dbfFiles = []
  const shpFiles = []
  const files = event.target.files
  if (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 的拉伸高度，即可将其拉伸为三维白模

js 复制代码

function makeModel() {
  const entities = dataSource.entities.values
  entities.forEach((entity) => {
    entity.polygon.material = new Cesium.Color(1, 0.6, 0, 1)
    entity.polygon.outline = false
    entity.polygon.height = 0
    entity.polygon.extrudedHeight = entity.properties.height.getValue()
  })
}

5、总结

本文介绍了如何使用 Shapefile.js 这个 JavaScript 库在iClient3D for Cesium中加载 shapefile 数据，并且可以根据 shp 数据属性信息，将其拉伸为三维白模，在前端可视化。

本文详细 vue 代码可在https://download.csdn.net/download/supermapsupport/90184990下载参考