Cesium实现自定义标签功能

最新推荐文章于 2025-10-27 21:25:48 发布

原创

最新推荐文章于 2025-10-27 21:25:48 发布 · 7.2k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #es6 #前端 #cesium

本文档介绍如何使用Cesium库实现自定义的标签功能，类似于Popup弹窗，但允许用户定制HTML内容和CSS样式，以创建更美观的标签。标签会根据视角变化动态调整位置，并可选配一个小圆点底座。同时，提供了关闭单个标签、清除所有标签的方法。示例代码展示了标签的创建、更新和销毁过程，以及调用示例。

Cesium实现自定义标签功能

实现的底层逻辑和方法跟实现Popup弹窗功能类似，只需要修改对应的创建的html内容和css样式，即可定义出更好看的标签。

实现效果

在这里插入图片描述

源码

LabelPlot 标签类


const defaultNameField = "label";
const defaultIdField = "id";
const billboardPointDatasourceName = "LABELPLOT_BILLBOARD_POINT"

/**
 * 标签类
 */
class LabelPlot {
   
   
  constructor(info) {
   
   
    let _this = this;
    _this.viewer = info.viewer; //弹窗创建的viewer
    _this.geometry = info.position; //弹窗挂载的位置
    _this.properties = info.properties; // 属性信息
    if (!info || !info.viewer || !info.position) {
   
   
      throw new Error("缺少构造参数!");
    }

    let labelPlotId = _this._getKeyVal(info.properties,defaultIdField);
    if (!labelPlotId) {
   
   
      labelPlotId = "LabelPlot_" + (new Date().getTime() + Math.random() + '').replace('.', '');
    }
    _this.id = labelPlotId;

    _this.ctn = $("<div class='LabelPlot-container' id =  '" + _this.id + "'>");
    $(_this.viewer.container).append(_this.ctn);
    _this.ctn.append(_this._createHtml(info.properties));
    //生成底座小圆点
    if (!!info.showBillboardPoint) {
   
   
      _this.entity = _this._createBillboardPoint(info.position);
    }
    try {

最低0.47元/天解锁文章