ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

cesium 中的 KmlDataSource

2026/8/2 8:46:11 拓冰建站 浏览量
cesium 中的 KmlDataSource KmlDataSource简介KmlDataSource是 Cesium 中用于解析 KML / KMZ 文件的数据源类它实现了DataSource接口。KMLKeyhole Markup Language 2.2是 Google Earth 常用的地理标注格式Cesium 解析后会把每一个要素转成Entity线、点、面、图标等统一放到entities集合中管理。它同时支持kml/ovkml纯文本的 KML 文件kmz/ovkmzzip 压缩包形式的 KMLCesium 内部会自动解压包内的图片、图标等相对资源也能一并解析。基本使用加载文件URL最简单的方式是直接传一个文件地址load返回一个 Promiseviewer.dataSources.add(Cesium.KmlDataSource.load(../../SampleData/facilities.kmz,{camera:viewer.scene.camera,canvas:viewer.scene.canvas,}));三种数据形态重点load的第一个参数支持三种类型它们的含义完全不同传入类型含义注意事项stringURL 地址不是文件内容传字符串会被当成 URL 去请求这是最常见报错的原因Blob二进制文件数据KMZ / ovkmz 压缩包可直接传 BlobCesium 会自动判断 zip 并解压Document已经解析好的 XML 文档适合先用DOMParser校验完 XML 再交给 Cesium// 1. 字符串URLawaitCesium.KmlDataSource.load(/data/xxx.ovkml);// 2. BlobKMZ / ovkmzconstblobawaitfetch(/data/xxx.ovkmz).then((r)r.blob());constdsawaitCesium.KmlDataSource.load(blob,{sourceUri:/data/xxx.ovkmz,});// 3. XML Documentovkmlconsttextawait(awaitfetch(/data/xxx.ovkml)).text();constdocnewDOMParser().parseFromString(text,application/xml);constdsawaitCesium.KmlDataSource.load(doc,{sourceUri:/data/xxx.ovkml,});注意把 KML 文本字符串直接传给load会被当成 URL 请求导致加载失败甚至抛RuntimeError。加载选项 LoadOptionssourceUri解析 KML 内相对路径图片、图标等的基准 URLclampToGround几何要素线、面是否贴地默认falsescreenOverlayContainer屏幕叠加层ScreenOverlay挂载的容器camera/canvasKML 的 NetworkLink 等特性需要相机参数时传入viewer.scene.camera和viewer.scene.canvas。挂载到地图viewer.dataSources.add(ds);// 显示图层viewer.dataSources.remove(ds,false);// 移除显示false 表示不销毁可重新加回viewer.dataSources.contains(ds);// 判断图层是否已挂载解析结果解析完成后数据源上可以拿到所有要素和相关信息ds.entities/ds.entities.values要素集合每个要素是一个Entityentity.namePlacemark 的名称如 YL_58entity.polyline/entity.polygon/entity.point/entity.billboard对应的图形对象entity.parentMultiGeometry拆出来的多个 entity 共享同一个 parent即原 Placemark可用于把同一条线的高亮整组处理entity.kmlKmlFeatureData包含 author、link 等 KML 元数据。数据源本身还提供事件errorEvent解析过程中出错时触发loadingEvent开始/结束加载时触发changedEvent底层数据变化时触发unsupportedNodeEvent遇到不支持的 KML 节点时触发。修改样式Cesium 里所有样式字段都是 Property修改时要用属性类包装constnowCesium.JulianDate.now();// 读取当前线宽constwidthentity.polyline.width?.getValue(now);// 修改线宽和颜色entity.polyline.widthnewCesium.ConstantProperty(8);entity.polyline.materialnewCesium.ColorMaterialProperty(Cesium.Color.fromCssColorString(#ffd400));// 面的填充 / 描边entity.polygon.materialnewCesium.ColorMaterialProperty(Cesium.Color.fromCssColorString(#ffd400).withAlpha(0.45));entity.polygon.outlinenewCesium.ConstantProperty(true);entity.polygon.outlineColornewCesium.ConstantProperty(Cesium.Color.fromCssColorString(#ffd400));常见问题传字符串报错 / RuntimeError字符串被当成 URL而不是文件内容改为传 Blob 或 Document。一条长线显示成一段一段源数据里MultiGeometry把折线拆成了多段LineString每段是一个 entity可以用entity.parent分组把同一 Placemark 的段一起高亮。KMZ 内的图标不显示要把整个 KMZ Blob 交给 Cesium 解析而不是手动解压只取doc.kml文本否则包内相对资源无法解析。参考资料:KmlDataSourceKmlDataSource