cesium自定图弹框

token记得换成您自己的！！！

申请cesium的token 官网【Cesium: The Platform for 3D Geospatial】

pickEllipsoid在加载地形的情况下有一定误差，地形凹凸程度越大，误差越大。

pickPosition在depthTestAgainstTerrain = false时只能在3DTile上获取准确位置，当depthTestAgainstTerrain = true时，在3DTile和底图上均能获取准确位置

viewer.scene.globe.depthTestAgainstTerrain = true; // 开启地形深度检测

<template>

  <div id="cesiumContainer"></div>


  <div class="btnbox">
    <div class="btnboxel">
      <el-button class="btnel" v-for="item in pointData2" :key="item.modelId" @click="showBubble(item)">
        <span>{{ item.name }}</span>
      </el-button>
      <el-button class="btnel" @click="testClick">测试</el-button>
    </div>
  </div>
  <div id="infoboxs" :style="qnameclass" class="qnamebox" :class="qname.type == '1' ? 'qnameback' : ''">
    <div class="spanbox">
      <span>编号:{{ qname.id }}</span>
      <span>名称:{{ qname.name }}</span>
      <span>创建时间:2024-07-01</span>
      <img src="//img.isqqw.com/profile/upload/2023/11/15/fabee49f-3e3b-45a6-a5d5-2780f5684bde.png" alt="">
     </div>
  </div>
  <el-button class="btndown">地图等级:{{ zoomlevel }}</el-button>
  <el-button type="success" class="btndown sucess" @click="clickDJ">等级切换</el-button>
</template>
<script setup lang='ts'>
import * as Cesium from "cesium";
import $ from 'jquery'
import { fa } from "element-plus/es/locales.mjs";
import { onMounted, reactive, ref, computed, nextTick } from "vue";
import { it } from "node:test";
// 地图实例
let viewer: any;

let tileset; //设置一个变量来存放通过3DTiles创建的模型
let handler
let selectedFeature
const selected = {
  feature: undefined,
  originalColor: new Cesium.Color(),
};
let qname = reactive({
  id: '',
  name: '',
  type: ''
})
let qnameclass = reactive({
  top: '',
  left: '',
})

let valshow
// 地图等级
let zoomlevel = ref()

let infos: any = reactive({
  pups: []
})
let infoBox1 = ref()
// 桥梁信息 假数据
let pointData2 = [

  {
    type: 1,
    lat: 117.3429,
    lon: 24.6820,
    name: "心若向阳",
    text: "心若向阳",
    modelId: 'ASDFGH_6'
  },
  {
    type: 1,
    lat: 117.2735,
    lon: 24.0485,
    name: "无畏悲伤",
    text: "无畏悲伤",
    modelId: 'ASDFGH_7'
  },
  {
    type: 1,
    lat: 117.25106,
    lon: 24.09902,
    name: "常青桥",
    text: "常青桥",
    modelId: 'ASDFGH_8'
  },
  {
    type: 1,
    lat: 117.3987,
    lon: 24.8927,
    name: "常青藤下",
    text: "常青藤下",
    modelId: 'ASDFGH_9'
  },

  {
    type: 2,
    lat: 117.1593,
    lon: 23.819,
    name: "常青果",
    text: "常青果",
    modelId: 'ASDFGH_16'
  },
  {
    type: 2,
    lat: 117.9352,
    lon: 24.9933,
    name: "常青树上",
    text: "常青树上",
    modelId: 'ASDFGH_17'
  },
  {
    type: 2,
    lat: 117.8939,
    lon: 24.8584,
    name: "山河已秋",
    text: "山河已秋",
    modelId: 'ASDFGH_18'
  },
  {
    type: 2,
    lat: 117.3113,
    lon: 24.613,
    name: "人间已晚",
    text: "人间已晚",
    modelId: 'ASDFGH_19'
  },
];
onMounted(() => {

  // 初始化Cesium并创建viewer
  Cesium.Ion.defaultAccessToken =
    "换成自己的token";
  viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: true, // 禁用沙箱，解决控制台报错
    selectionIndicator: false, //选择指示器
    timeline: false, // 时间轴
    animation: false, // 动画小组件
    // geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    sceneModePicker: false, // 投影方式，切换2D、3D 和 Columbus View (CV) 模式。
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    navigationHelpButton: false, // 帮助按钮
    fullscreenButton: false, // 全屏按钮

    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      // enablePickFeatures: false,
    }),
    // terrainProvider: new Cesium.CesiumTerrainProvider({
    //   url: "http://data.marsgis.cn/terrain",
    // }),
    scene3DOnly: true, // 每个几何实例将只能以3D渲染以节省GPU内存
    sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
  });
  viewer.imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
      url: "http://t0.tianditu.gov.cn/cia_w/wmts?tk=2d58d1852b0b28db058bbe353a22b91b",
      layer: "cia",
      style: "default",
      tileMatrixSetID: "w",
      format: "tiles",
      maximumLevel: 18,
    })
  );
  viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏logo版权
 
  handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
 
  // const layer = viewer.imageryLayers.get(0);
  viewer.scene.globe.baseColor = new Cesium.Color(0.0, 0.0, 0.0, 0); // 把地球背景色透明
  // layer.alpha = 0.8;
  // viewer.scene.globe.translucency.backFaceAlpha = 0.5; // 应用于地球背面的恒定半透明度
  // viewer.scene.globe.translucency.enabled = true; // 开启地表透明


  labelData()
  viewer.camera.moveEnd.addEventListener(onMoveendMap);
  getFirst()
});
function showBubble(item) {
  qname.name = item.name
  qname.id = item.modelId
  qname.type = item.type
  console.log("item",item)
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(item.lat, item.lon, 1000),
    duration: 2, // 飞行动画持续时间（单位：秒）

  });
  viewer.scene.postRender.addEventListener(() => {

    let worldPosition = Cesium.Cartesian3.fromDegrees(item.lat, item.lon)
    let screenPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, worldPosition)
    if (screenPosition) {
      qnameclass.top = screenPosition.y + 'px'
      qnameclass.left = screenPosition.x + 'px'
    }
  })
}
function testClick(){
  qname.name = "测试"
  qname.id = "AAAccc1234569"
  qname.type ="1"
 let pointData :any ={x:-2176578.86625116,y:4386183.52410871,z:4073474.05620639}
// let pointData :any ={x:-2177374.161524288,y:4388442.775493362,z:4070640.6013179137}
 let gspdata=cartesian3ToGps(viewer,pointData)
 console.log("gspdata",gspdata)
let lat=gspdata[0]
let lon=gspdata[1]
let het=gspdata[2]
     viewer.camera.flyTo({
    // destination: Cesium.Cartesian3.fromDegrees(lat, lon, 1000),
    destination: Cesium.Cartesian3.fromDegrees(lat, lon, het),
    duration: 2, // 飞行动画持续时间（单位：秒）

  });
  viewer.scene.postRender.addEventListener(() => {

    let worldPosition = Cesium.Cartesian3.fromDegrees(lat, lon)
    let screenPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, worldPosition)
    console.log("screenPosition：",screenPosition)
    if (screenPosition) {
      qnameclass.top = screenPosition.y + 'px'
      qnameclass.left = screenPosition.x + 'px'
    }
  })


  }
/**
 * cartesian3转gps
 * @param viewer
 * @param cartesian
 * @returns
 */
 const cartesian3ToGps = (
  viewer: Cesium.Viewer,
  cartesian: Cesium.Cartesian3
): number[] => {
  const cartographic =
    viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
  return [
    Cesium.Math.toDegrees(cartographic.longitude),
    Cesium.Math.toDegrees(cartographic.latitude),
    cartographic.height,
  ];
};
function labelData() {
  const translucencyByDistance2 = new Cesium.NearFarScalar(
    20000,
    1,
    150000,
    0.7
  );
  pointData2.forEach((k) => {
    const label = viewer.entities.add({
      name: k.name,
      position: Cesium.Cartesian3.fromDegrees(
        k.lat,
        k.lon,
        50
      ),
      label: {
        text: k.name,
        // 字体大小
        font: "18px sans-serif",
        // FILL填充/OUTLINE描边/FILL_AND_OUTLINED填充描边
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        // 描边颜色
        outlineColor: Cesium.Color.WHITE,
        // 描边宽度
        outlineWidth: 5,
        // 字体颜色
        fillColor: Cesium.Color.BLUE,
        pixelOffset: new Cesium.Cartesian2(0, -30), // 视角偏移
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
          0,
          150000
        ), // 可视范围
        // translucencyByDistance: translucencyByDistance2,
      },
    });
  })

}
function clickDJ(){
  // viewer.camera.zoomIn(5); // amount是一个可选的浮点数值，表示放大的数量
viewer.camera.zoomOut(5876); // amount是一个可选的浮点数值，表示缩小的数量
  // viewer.camera.changed.addEventListener(SetLevel)
   
  // setViewerRange(viewer,100,500)
 }
//设置地图最大最小显示范围
function setViewerRange(viewer, minZoom, maxZoom){
    minZoom = (minZoom==undefined) ? 50 : minZoom;
    maxZoom = (maxZoom==undefined) ? 550 : maxZoom;
    viewer.scene.screenSpaceCameraController.minimumZoomDistance = minZoom;
    viewer.scene.screenSpaceCameraController.maximumZoomDistance = maxZoom;
}
function SetLevel(){
        var tileRender=viewer.scene.globe._surface._tilesToRender;

        if(tileRender&&tileRender.length>0){
                console.log("当前级别:"+tileRender[0]._level+"级");

        }

}
function onMoveendMap() {
  // 获取当前相机高度
  let height = Math.ceil(viewer.camera.positionCartographic.height);
  console.log("高度：",height)
  let zoom = heightToZoom(height);
  zoomlevel.value = zoom;
}
function getFirst() {
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(117.3987, 24.8927, 700),
    duration: 2, // 飞行动画持续时间（单位：秒）
  });

  qname.name = '桥内特大桥'
  qname.id = 'ASDFGH_9'
  qname.type = '1'

  viewer.scene.postRender.addEventListener(() => {
    let worldPosition = Cesium.Cartesian3.fromDegrees(117.3987, 24.8927)
    let screenPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, worldPosition)
    if (screenPosition) {
      qnameclass.top = screenPosition.y + 'px'
      qnameclass.left = screenPosition.x + 'px'
    }

  })
}


function heightToZoom(height) {
  var A = 40487.57;
  var B = 0.00007096758;
  var C = 91610.74;
  var D = -40467.74;
  return Math.round(D + (A - D) / (1 + Math.pow(height / C, B)));
}

 




</script>
<style lang="scss" scoped>
/*--------------------------消息框Start---------------------------*/
.messBox {
  display: none;
  color: rgb(255, 255, 255);
}

.popup {
  position: absolute;
  z-index: 100;
}

.closeButton {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 4px 0 0;
  text-align: center;
  font: 25px/25px Tahoma, Verdana, sans-serif;
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-weight: bold;
  background: transparent;
}

.contentWrapper {
  max-height: 500px;
  overflow-y: auto;
  min-height: 180px;
  width: 300px;
  padding: 1px;
  text-align: left;
  border-radius: 5px;
  background-color: #729ea5;
}

.content {
  margin: 5px 20px;
  line-height: 1.4;
}

.content div {
  text-align: center;
  font-size: 18px;
}

.content table {
  margin-top: 15px;
}

.content table tr {
  height: 25px;
}

/*--------------------------消息框END---------------------------*/
</style>
<style scoped>
.mesaggebox {
  /* position: absolute;
  left: 50%;
  top: 50%; */
}
 
.btnbox {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 400px;

  .btnboxel {
    display: flex;
    flex-wrap: wrap;
  }

  .btnel {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 110px;
    /* background: blue; */
    margin-left: 0;
    margin-right: 12px;
  }
}

.qnamebox {
  position: absolute;
  border: 1px solid #ccc;
  /* background: #4cb872; */
  width: 180px;
  background: linear-gradient(90deg, rgba(15, 100, 0, 0.62) 71%, rgba(15, 100, 0, 0.55) 45%);
  background-size: 100% 100%;
  border-radius: 5px;
  padding: 10px;
  color: #fff;

  .spanbox {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #fff;
    border-radius: 3px;

    span {
      border-bottom: 1px solid #fff;
      display: inline-block;
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
      /* border-left:1px solid #fff;
      border-right: 1px solid #fff; */
    }

    span:last-child {
      border-bottom: none;
    }
  }

}

.qnameback {
  background: linear-gradient(90deg, rgba(0, 62, 100, 0.62) 71%, rgba(1, 63, 97, 0.55) 45%);
}

.btndown {
  position: absolute;
  left: 0;
  bottom: 0;
}
.sucess{
  left:110px;
 
}
</style>