Cesium自定义标签：用代码写就地球上的标记

2023-01-05 14:01:05

用代码点亮地球：使用 Cesium 自定义标签，绘制 3D 地球标记

准备好踏上定制标签之旅，让你的代码在虚拟地球上留下印记了吗？Cesium，一个功能强大的 JavaScript 库，将赋予你这样的能力！让我们潜入代码世界，探索如何创建自己的 HTML 标签类，随着地球的旋转动态显示和标记绘制结果。

1. 构建你的自定义标签类

想象一个像贴纸一样贴在地球表面的标签。为了创建它，我们需要一个自定义类。

var CustomHtmlLabel = function(options) {
  this.position = Cesium.Cartesian3.fromDegrees(options.longitude, options.latitude, options.height);
  this.html = options.html;
  // 创建一个 DIV 元素作为我们的标签
  this.label = document.createElement('div');
  // 设置标签内容
  this.label.innerHTML = this.html;
  // 设置标签样式
  this.label.style.position = 'absolute';
  this.label.style.top = '0px';
  this.label.style.left = '0px';
  this.label.style.width = '100px';
  this.label.style.height = '100px';
  this.label.style.backgroundColor = 'red';
  this.label.style.color = 'white';
  this.label.style.fontSize = '12px';
  this.label.style.textAlign = 'center';
  this.label.style.verticalAlign = 'middle';
};

2. 将标签添加到地球场景中

现在，我们的标签已准备就绪，是时候把它放在地球上！

viewer.scene.primitives.add(new CustomHtmlLabel({
  longitude: -122.4194,
  latitude: 37.7749,
  height: 10000,
  html: '你好，Cesium!'
}));

3. 让标签跟随地球转动

地球在转动，我们的标签也需要跟着转！

viewer.clock.onTick.addEventListener(function(clock) {
  var position = Cesium.Cartesian3.fromDegrees(-122.4194, 37.7749, 10000);
  var transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
  CustomHtmlLabel.label.style.transform = 'translate(-50%, -50%)' +
    'translate3d(' + transform.translation + ')';
});

4. 享受你的自定义标签

太棒了！你现在可以在地球上看到你的自定义 HTML 标签了。随着地球的转动，它也会随之移动。

常见问题解答

如何更改标签的样式？
调整 CustomHtmlLabel 类中的 CSS 样式以更改字体、颜色、大小和其他外观。
我可以放置多个标签吗？
当然！只需创建多个 CustomHtmlLabel 实例并将其添加到场景中。
如何从场景中删除标签？
使用 viewer.scene.primitives.remove(customHtmlLabelInstance)。
标签是否可以显示图片或图标？
是的，你可以将图片或图标的 <img> 标签添加到标签的 HTML 中。
如何让标签随着缩放级别进行缩放？
添加 viewer.scene.screenSpaceCameraController.minimumZoomDistance 和 viewer.scene.screenSpaceCameraController.maximumZoomDistance 选项，以控制标签的缩放行为。