cesium矢量数据的加载介绍gis中常见的矢量数据shp、geojson、kml、czml以及在ceiusm中如何加载

前言

矢量数据是通过一系列点位坐标形成的数据在二维中是x、y三维中则是x、y、z
常见的矢量数据就是点、线、面这一系列组合又可以生成更加复杂的矢量数据如svg，
由于其精度高结构紧凑耦合低显示效果好等优点很多地方都会使用到矢量数据。

常见的矢量数据以及对应的加载方式

shp文件是Eris公司开发的一种空间数据格式，目前也是gis行业的一个标准格式在几乎所有的软件都支持打开的情况下，cesium却不支持需要转换成3d tiles或者geojson(不推荐数据量大的时候会卡顿)

转换成3dtiles 之后加载

function useLoad3dTiles(
  url: string,
  Cesium: any,
  config = {
    maximumScreenSpaceError: 1,
    maximumMemoryUsage: 8000, 
    dynamicScreenSpaceErrorFactor: 0,
  }
) {
  const titles = new Cesium.Cesium3DTileset({
    url,
    maximumScreenSpaceError: config.maximumScreenSpaceError, // 最大屏幕误差
    maximumMemoryUsage: config.maximumMemoryUsage, // 最大加载瓦片个数
    dynamicScreenSpaceErrorFactor: config.dynamicScreenSpaceErrorFactor,
  })
  titles.readyPromise.then((titles: any) => {
    window.viewer.scene.primitives.add(titles)
  })
  return titles
}

geojson是一种基于json语法的用来描述地理空间信息的数据格式，下面是一个GeoJSON特征集合示例：

cesium中加载geojson的方式如下

function useLoadGeoJson(url: string, Cesium: any) {
  const geoJsonData = Cesium.GeoJsonDataSource.load(url)
  let geoJsonObj = null as any
  return geoJsonData.then((data: any) => {
    geoJsonObj = data
    window.viewer.dataSources.add(geoJsonObj)
    return geoJsonObj
  })
}

将geojson数据加载进来后我们可以对他的矢量数据进一步处理

useLoadGeoJson(sportGeoJson.url, Cesium).then((geoJsonObj: any) => {
      sportGeoJson.model = geoJsonObj
      console.log(geoJsonObj)
      const entities = geoJsonObj.entities.values
      for (const i of entities) {
         //可以修改实体的颜色或者添加label标签等功能
      }
    
    })

kml和kmz kml是基于xml格式的用来描述和存储地理信息数据（点、线、面、多边形、多面体以及模型等），kmz则是多个kml用zip格式压缩后的文件，加载方式如下

function useLoadKmlData(url: string, options: any, Cesium: any) {
  let kzmlObj = null as any
  const czmlPromise = Cesium.KmlDataSource.load(url, options)
  return czmlPromise.then((data: any) => {
    kzmlObj = data
    window.viewer.dataSources.add(kzmlObj)
    return kzmlObj
  })
}

同样kml数据加载后可以对其中的矢量数据进行操作

useLoadKmlData(provinceKml.url, provinceKml.options, Cesium).then((geoJsonObj: any) => {
      const entities = geoJsonObj.entities.values
      //修改线条颜色
      for (const i of entities) {
        if (Cesium.defined(i.polyline)) {
          i.polyline.material = Cesium.Color.RED
          i.polyline.width = 3
        }
      }
      Viewer.zoomTo(geoJsonObj)
    })

czml czml是cesuim中比较特殊的格式语法规范参考json，czml可以和cesium中的动画联动 czml包含点、线、地标、模型和其他的一些图形元素，并指明了这些元素如何随时间而变化文件实例(用的火星的数据)

[
  {
    "version": "1.0",
    "id": "document",
    "clock": {
      "interval": "2019-03-27T05:57:05.33299999999871943Z/2019-03-27T05:57:47.33299999999871943Z",
      "currentTime": "2019-03-27T05:57:05.33299999999871943Z",
      "multiplier": 1
    }
  },
  {
    "id": "油田联合站",
    "availability": "2019-03-27T05:57:05.33299999999871943Z/2019-03-27T05:57:47.33299999999871943Z",
    "orientation": { "velocityReference": "#position" },
    "position": {
      "epoch": "2019-03-27T05:57:05.33299999999871943Z",
      "cartographicDegrees": [ 0, 121.92203, 40.896242, 1.99, 8, 121.924326, 40.897139, 1.98, 13, 121.923628, 40.898229, 6.41, 13, 121.923628, 40.898303, 1.99, 18, 121.925196, 40.898912, 1.99, 18, 121.92534, 40.898912, 1.99, 18, 121.925431, 40.898843, 1.99, 23, 121.926071, 40.897773, 1.98, 25, 121.926401, 40.897214, 1.98, 25, 121.926364, 40.897107, 1.98, 33, 121.923994, 40.896208, 1.98, 36, 121.923247, 40.895924, 1.99, 38, 121.922717, 40.895664, 1.99, 38, 121.922615, 40.895601, 1.99, 39, 121.922382, 40.89559, 1.99, 42, 121.921941, 40.896196, 1.98, 42, 121.922029, 40.896241, 2.15 ]
    },
    "model": {
      "show": true,
      "gltf": "qiche.gltf",
      "scale": 0.1,
      "minimumPixelSize": 50
    }
  }
]

加载方式

 function useLoadCzmlData(url: string, position: number[], Cesium: any) {
  let czmlObj = null as any
  const czmlPromise = Cesium.CzmlDataSource.load(url)
  return czmlPromise.then((data: any) => {
    czmlObj = data
    window.viewer.dataSources.add(czmlObj)
    window.viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(...position),
    })
    return czmlObj
  })
}