Cesium 绘制文字教程

绘制文字 ·Draw Text· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么Entity.label绘制场景内文字HeightReference.CLAMP_TO_GROUND自动贴地globe.getHeight查询地形高度后手动设高disableDepthTestDistance避免被地形遮挡效果说明地球上有三组标注贴地随地形起伏、不贴地固定 2000m 高度、自动计算贴地等地形加载后用getHeight取高程再放置。核心概念Entity Labellabel: {text: 贴地, font: 14pt monospace, outlineWidth: 2, showBackground: true, backgroundColor: Cesium.Color.WHITE, verticalOrigin: Cesium.VerticalOrigin.TOP, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, disableDepthTestDistance: Number.POSITIVE_INFINITY, }| 属性 | 作用 | |------|------| |heightReference|CLAMP_TO_GROUND贴椭球/地形默认NONE用 position 高度 | |disableDepthTestDistance| 设为 ∞ 时 label 始终可见不被地形 depth test 裁掉 | |verticalOrigin| 文字相对锚点的垂直对齐 |手动查询地形高度viewer.scene.globe.depthTestAgainstTerrain true;const carto Cesium.Cartographic.fromDegrees(lon, lat, 10); const height viewer.scene.globe.getHeight( new Cesium.Cartographic(carto.longitude, carto.latitude) ); // 需在 terrain 加载完成后调用否则 height 可能为 undefined动态修改Entity 属性可运行时赋值text.label.text 贴地文字;text.label.fillColor Cesium.Color.RED;实现步骤开启depthTestAgainstTerrain使贴地 label 与地形正确遮挡添加贴地 Entitypoint labelCLAMP_TO_GROUND添加高空 Entity 作对比无 heightReferenceflyTo到第三点后在complete回调里延迟getHeight再 add Entity代码要点import * as Cesium from cesium// Cesium官网的token Cesium.Ion.defaultAccessToken your-cesium-ion-access-tokenconst box document.getElementById(box)const viewer new Cesium.Viewer(box, {imageryProvider: false, //关闭默认底图animation: false,//是否创建动画小器件左下角仪表baseLayerPicker: false,//是否显示图层选择器右上角图层选择按钮fullscreenButton: false,//是否显示全屏按钮右下角全屏选择按钮geocoder: false,//是否显示geocoder小器件右上角查询按钮homeButton: false,//是否显示Home按钮右上角home按钮sceneMode: Cesium.SceneMode.SCENE3D,//初始场景模式sceneModePicker: false,//是否显示3D/2D选择器右上角按钮navigationHelpButton: false,//是否显示右上角的帮助按钮selectionIndicator: false,//是否显示选取指示器组件timeline: false,//是否显示时间轴infoBox: false,//是否显示信息框scene3DOnly: true,//如果设置为true则所有几何图形以3D模式绘制以节约GPU资源orderIndependentTranslucency: false, //是否启用无序透明contextOptions: { webgl: { alpha: true } },skyBox: new Cesium.SkyBox({ show: false })})viewer.scene.sun.show falseviewer.scene.moon.show falseviewer.scene.skyBox.show falseviewer.scene.backgroundColor new Cesium.Color(0.0, 0.0, 0.0, 0.0)viewer._cesiumWidget._creditContainer.style.display noneconsole.log(Cesium.VERSION)完整源码GitHub小结本文提供绘制文字完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库