cesium自定义label标签，cesium 文字标签换行，cesium label标签识别html

• 第一种，CallbackProperty 回调函数
  回调函数解释：https://www.jianshu.com/p/c0bb1431f95d

label:{
              //文字标签
              text: new Cesium.CallbackProperty((result) => {
                let textTipsArr = textTips;
                if (textTipsArr.length > 10) {
                //模拟文字换行，将字符串拆成两段
                  let a = textTipsArr.slice(0, 8);
                  let b = textTipsArr.slice(8);
                  result = a + "\n" + b
                } else {
                  result = textTipsArr
                }
                return result;
              },false),
              // text: ''+textTips,
              font: '500 30px Helvetica',// 15pt monospace
              scale: 0.6,
              style: Cesium.LabelStyle.FILL,
              fillColor: Cesium.Color.WHITE,
              pixelOffset: new Cesium.Cartesian2(7, 13), //偏移量 
              showBackground: true,
              backgroundColor: new Cesium.Color.fromCssColorString('#6ab4fff2'),
              maximumScale: 0.6,
              minimumScale: 0.6,
              disableDepthTestDistance:99000000,
              heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
 }

---

• 第二种。摘自：https://blog.csdn.net/weixin_46730573/article/details/119061305

①创建vue组件文件 ， label.vue

②创建js文件封装类，divLabel.js

/**
 * @descripion:
 * @param {Viewer} viewer
 * @param {Cartesian2} position
 * @param {String} title
 * @param {String} id
 * @return {*}
 */

import Vue from "vue";
import Label from "@/components/label";
let WindowVm = Vue.extend(Label);
export default class DivLabel{

  constructor(val) {
    this.viewer = val.viewer;
    this.height = val.height;
    this.position = Cesium.Cartesian3.fromDegrees(
      val.position[0],
      val.position[1],
      val.height
    );
    let title = val.title;
    let id = val.id
    this.vmInstance = new WindowVm({
      propsData: {
        title,
        id
      }
    }).$mount(); //根据模板创建一个面板
    val.viewer.cesiumWidget.container.appendChild(this.vmInstance.$el); //将字符串模板生成的内容添加到DOM上
    this.addPostRender();
  }

  //添加场景事件
  addPostRender() {
    this.viewer.scene.postRender.addEventListener(this.postRender, this);
  }

  //场景渲染事件 实时更新窗口的位置 使其与笛卡尔坐标一致
  postRender() {
    if (!this.vmInstance.$el || !this.vmInstance.$el.style) return;
    const canvasHeight = this.viewer.scene.canvas.height;
    const windowPosition = new Cesium.Cartesian2();
    Cesium.SceneTransforms.wgs84ToWindowCoordinates(
      this.viewer.scene,
      this.position,
      windowPosition
    );
    this.vmInstance.$el.style.bottom =
      canvasHeight - windowPosition.y + this.height + "px";
    const elWidth = this.vmInstance.$el.offsetWidth;
    this.vmInstance.$el.style.left = windowPosition.x - elWidth / 2 + "px";

    const camerPosition = this.viewer.camera.position;
    let height = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
    height += this.viewer.scene.globe.ellipsoid.maximumRadius;
    if((!(Cesium.Cartesian3.distance(camerPosition,this.position) > height))&&this.viewer.camera.positionCartographic.height<50000000){
      this.vmInstance.$el.style.display = "block";
    }else{
      this.vmInstance.$el.style.display = "none";
    }
  }
}

③实际调用

import DivLabel from '@/scripts/divLabel' //根据自己的目录引入JS类文件

          let val = {
            viewer:viewer,//cesium 的viewer。根据实际项目填写
            position:[Number(res.data.center_point.lng), Number(res.data.center_point.lat)],//经纬度，根据实际项目填写
            height:0,
            title:res.data.center_text,
            id:'210201025'+Number(res.data.center_point.lng)//ID 必须唯一
          }
          new DivLabel(val)