cesium自定义label标签，cesium 文字标签换行，c

• 第一种，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

<template>
  <div :id="id" class="divlabel-container" v-if="show" >
    <div class="animate-maker-border">
      <span class="animate-marker__text">{{ title }}</span>
    </div>

  </div>
</template>

<script>
  export default {
    name: "DynamicLabel",
    data() {
      return {
        show: true,
      };
    },
    props: {
      title: {
        type: String,
        default: "标题",
      },
      id:{
        type:String,
        default:'001'
      }
    },
  };
</script>


<style lang="css" scoped>
  .divlabel-container{
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;
    cursor: pointer;
  }

  .divlabel-container::before {
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;
    cursor: pointer;
  }

  .divlabel-container::after {
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;
    cursor: pointer;
  }
  .animate-maker-border{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .animate-maker-border::before{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .animate-maker-border::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .animate-maker-border {
    width: 150px;
    height: 30px;
    margin: 0;
    color: #69ca62;
    box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
  }
  .animate-maker-border::before{
    content: '';
    z-index: 10;
    margin: -5%;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
  }
  .animate-maker-border::after{
    content: '';
    z-index: 10;
    margin: -5%;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
  }
  .animate-maker-border::before {
    animation-delay: -4s;
  }
  @keyframes clipMe {
    0%, 100% {
      clip: rect(0px, 170.0px, 2px, 0px);
    }
    25% {
      clip: rect(0px, 2px, 47.0px, 0px);
    }
    50% {
      clip: rect(45.0px, 170.0px, 47.0px, 0px);
    }
    75% {
      clip: rect(0px, 170.0px, 47.0px, 45.0px);
    }
  }

  .animate-marker__text {
    color: #fff;
    font-size: 14px;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-weight: bolder;
    user-select: none;
    cursor: pointer;
    background: rgba(0, 173, 181, 0.32);
  }
</style>

②创建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)