❌

普通视图

发现新文章，点击刷新页面。
今天 — 2025年11月18日首页

vue3+Cesium开发教程（14）---Cesium加载与删除geojson、kml、glb、3dtiles、czml数据

✇掘金 前端
作者 GisCoder
2025年11月18日 15:16

本学习系列将以Cesium + Vue3 + Vite +Typescript+elementplus作为主要技术栈展开，后续会循序渐进，持续探索Cesium的高级功能，相关源码全部免费公开。详情请查看原文Cesium+Vue3学习系列（14）---Cesium加载与删除geojson、kml、glb、3dtiles、czml数据

1、geojson数据配置与加载方式


//geojson测试数据
export const geojsonTestInfo:ILayerItem = {
    id: LayerIdFlag.GEOMSON_TEST,
    name: "geojsonTest",
    type: "geojson",
    url: "/testdata/line.geojson",
    layer: "geojsonTest"
}


case 'geojson':
                handle = await Cesium.GeoJsonDataSource.load(item.url!, {
                    clampToGround: true,
                });
                (handle as Cesium.GeoJsonDataSource).show = show;
                this.viewer.dataSources.add(handle)
                //视角
                this.viewer.zoomTo(handle)
                break

2、kml数据配置与加载方式


//kml测试数据
export const kmlTestInfo:ILayerItem = {
    id: LayerIdFlag.KML_TEST,
    name: "kmlTest",
    type: "kml",
    url: "/testdata/gdpPerCapita2008.kmz",
    layer: "kmlTest"
}


            case 'kml':
                handle = await Cesium.KmlDataSource.load(item.url!, {
                    clampToGround: true,
                });
                (handle as Cesium.KmlDataSource).show = show
                this.viewer.dataSources.add(handle)
                this.viewer.zoomTo(handle)
                break

3、glb数据配置与加载方式


//glb测试数据
export const glbTestInfo:ILayerItem = {
    id: LayerIdFlag.GLB_TEST,
    name: "glbTest",
    type: "glb",
    url: "/testdata/CesiumMilkTruck.glb",
    layer: "glbTest",
    scale: 5,
    lon: 114.314521,
    lat: 22.543062,
    height: 0,
    heading:45,
    pitch: 0,
    roll: 0   
}


            case 'glb':
                let position = Cesium.Cartesian3.fromDegrees(item.lon, item.lat, item.height || 0);
                // 设置模型方向
                let hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(item.heading || 45), Cesium.Math.toRadians(item.pitch || 0), Cesium.Math.toRadians(item.roll || 0));
                // 生成一个函数，该函数从以提供的原点为中心的参考帧到提供的椭圆体的固定参考帧计算4x4变换矩阵。
                let fixedFrame = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
                handle = await Cesium.Model.fromGltfAsync({
                    url: item.url!,
                    modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrame),
                    scale: item.scale || 1,
                });
                handle.show = show;
                this.viewer.scene.primitives.add(handle)
                this.viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(item.lon, item.lat, 100),
                    duration: 2
                })
                break;

4、3dtiles配置与加载方式。由于本示例中的3dtiles 数据高度较低，这里需要将其高度提升了500米。后续会出一个动态调整3dtiles位置的章节，敬请期待。


//3dtile测试数据
export const model3dtilesTestInfo:ILayerItem = {
    id: LayerIdFlag.MODEL_3DTILES_TEST,
    name: "model3dtilesTest",
    type: "3dtiles",
    url: "/testdata/dayanta/tileset.json",
    layer: "model3dtilesTest"
}


 case '3dtiles':
                handle = await Cesium.Cesium3DTileset.fromUrl(item.url!);                
                (handle as Cesium.Cesium3DTileset).show = show;
                this.viewer.scene.primitives.add(handle)
                this.viewer.zoomTo(handle, new Cesium.HeadingPitchRange(0.0, -0.3, 0.0))
               
                let cartographic = Cesium.Cartographic.fromCartesian(
                    handle.boundingSphere.center
                );
                let surface = Cesium.Cartesian3.fromRadians(
                    cartographic.longitude,
                    cartographic.latitude,
                    0.0
                );
                let offset = Cesium.Cartesian3.fromRadians(
                    cartographic.longitude,
                    cartographic.latitude,
                    500.0
                );
                let translation = Cesium.Cartesian3.subtract(
                    offset,
                    surface,
                    new Cesium.Cartesian3()
                );
                handle.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
                break

5、czml数据配置与加载方式


export const czmlTestInfo:ILayerItem = {
    id: LayerIdFlag.CZML_TEST,
    name: "czmlTest",
    type: "czml",
    url: "/testdata/simple.czml",
    layer: "czmlTest"
}


          case 'czml':
                handle = await Cesium.CzmlDataSource.load(item.url!);
                (handle as Cesium.CzmlDataSource).show = show
                this.viewer.dataSources.add(handle)
                 this.viewer.zoomTo(handle)
                break

转存失败，建议直接上传图片文件

6、数据删除。

    Remove(id: string): void {
        const item = this.layersIdMap.get(id)
        if (!item) return;
        const { type, handle } = item;
        switch (type) {
            case 'imagery_wms':
            case 'imagery_wmts':
            case 'imagery_xyz':
                this.viewer.imageryLayers.remove(handle)
                break
            case 'terrain':
                // 回到默认椭球
                this.viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider()
                break
            case 'geojson':
            case 'kml':
            case 'czml':
                this.viewer.dataSources.remove(handle)
                break;
            case '3dtiles':
            case 'glb':
                this.viewer.scene.primitives.remove(handle)
                break;
        }
        this.layersIdMap.delete(id);
    }

7、前端实现：

<template>
    <div class="custom-data-container">
        <span class="custom-data-title"> 自定义数据 </span>
        <div style="text-align: left;">
           
            <div class="data-items">
                <span>图层信息</span>
                <div>
                    <el-checkbox v-model="geojsonChecked" label="geojson" size="large" @change="changeGeojson"/>
                    <el-checkbox v-model="kmlChecked" label="KML" size="large" @change="changeKml"/>
                    <el-checkbox v-model="glbChecked" label="glb" size="large" @change="changeGlb"/>
                    <el-checkbox v-model="model3dtilesChecked" label="3dtiles" size="large" @change="changeModel3dtiles"/>
                    <el-checkbox v-model="czmlChecked" label="czml" size="large" @change="changeCzml"/>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { czmlTestInfo, geojsonTestInfo, glbTestInfo, kmlTestInfo, LayerIdFlag, model3dtilesTestInfo } from '@/system/LayerManager/LayerConfig'
import LayerManager from '@/system/LayerManager/LayerManager'
import CesiumViewer from '@/Viewer/CesiumViewer'
const viewer = CesiumViewer.viewer
let mLayerManager: LayerManager | null = null
const geojsonChecked = ref(false)
const kmlChecked = ref(false)
const glbChecked = ref(false)
const model3dtilesChecked = ref(false)
const czmlChecked = ref(false)
onMounted(() => {
    mLayerManager = LayerManager.getInstance(viewer!)
})
const changeGeojson = (val: string | number | boolean) => {
  if (val) {
    // 加载geojson图层
    mLayerManager?.Add(geojsonTestInfo)
  } else {
    // 移除geojson图层
    mLayerManager?.Remove(LayerIdFlag.GEOMSON_TEST)
  }
}
const changeKml = (val: string | number | boolean) => {
  if (val) {
    // 加载kml图层
    mLayerManager?.Add(kmlTestInfo)
  } else {
    // 移除kml图层
    mLayerManager?.Remove(LayerIdFlag.KML_TEST)
  }
}
const changeGlb = (val: string | number | boolean) => {
  if (val) {
    // 加载glb图层
    mLayerManager?.Add(glbTestInfo)
  } else {
    // 移除glb图层
    mLayerManager?.Remove(LayerIdFlag.GLB_TEST)
  }
}
const changeModel3dtiles = (val: string | number | boolean) => {
  if (val) {
    // 加载3dtiles图层
    mLayerManager?.Add(model3dtilesTestInfo)
  } else {
    // 移除3dtiles图层
    mLayerManager?.Remove(LayerIdFlag.MODEL_3DTILES_TEST)
  }
}
const changeCzml = (val: string | number | boolean) => {
  if (val) {
    // 加载czml图层
    mLayerManager?.Add(czmlTestInfo)
  } else {
    // 移除czml图层
    mLayerManager?.Remove(LayerIdFlag.CZML_TEST)
  }
}
</script>
<style lang="scss" scoped>
.custom-data-container {
    padding: 10px;
    .custom-data-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    .data-items {
        .el-checkbox {
            margin-left: 20px;
            height: 30px;
        }
        :deep(.el-checkbox__label) {
            color: rgb(206, 194, 194);
        }
    }
}
</style>

更多代码请查看原文Cesium+Vue3学习系列（14）---Cesium加载与删除geojson、kml、glb、3dtiles、czml数据

❌
❌