加载外部资源

geoJson

geoJson资源

geoJson资源可以从 https://datav.aliyun.com/portal/school/atlas/area_selector 进行获取

注：geoJson资源中，每个Feature的geometry字段必须为Polygon类型，从上面地址获取geoJson资源需要手动修改为Polygon类型

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": []
      },
      "properties": {}
    }
  ]
}

直接加载geoJson资源

可以通过Cesium.GeoJsonDataSource.load方法加载geoJson资源，直接将geoJson资源添加到viewer中的dataSources即可

const promise = Cesium.GeoJsonDataSource.load('./src/assets/mapJson/shijiazhuang.json');
promise.then(dataSource => {
  viewer.value.dataSources.add(dataSource);
  // 获取到的datasource进行遍历得到面对象。重新设置样式
  dataSource.entities.values.forEach((entity: { polygon: any }) => {
    entity.polygon.outlineColor = Cesium.Color.RED
    entity.polygon.material = Cesium.Color.BLUE.withAlpha(0.5);
    entity.polygon.height = 1000
    entity.polygon.extrudedHeight = 2000
  });
  // 通过zoomTo快速定位到dataSource
  // viewer.value.zoomTo(dataSource)
});

加载后重新解析绘制面渲染

导入对应的geoJson资源，然后通过Cesium.Cartesian3.fromDegreesArray方法将坐标转换为Cesium.Cartesian3类型， 然后通过Cesium.Entity的polygon属性进行绘制，相当于把所有的点转换为面进行绘制

import TaiYuan from '@/assets/mapJson/leiyang.json'

const TaiYuan_coordinates = TaiYuan.features[0].geometry.coordinates[0].flat().flat()
viewer.value.entities.add({
  name: "taiyuan",
  polygon: {
    hierarchy: {
      positions: Cesium.Cartesian3.fromDegreesArray(TaiYuan_coordinates)
    },
    height: 0, // 平面高度
    extrudedHeight: 2000, // 平面上层高度
    material: Cesium.Color.PINK.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.ORANGE
  }
})

KML & KMZ

读取KML文件

const kmlPromise = Cesium.KmlDataSource.load('./src/assets/kmz/taiyuan.kml', {
  camera: viewer.value.scene.camera,
  canvas: viewer.value.scene.canvas
})
kmlPromise.then(dataSource => {
  viewer.value.dataSources.add(dataSource);
  viewer.value.zoomTo(dataSource)
})