cesium自定图弹框根据经纬度弹框

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>
  <div class="bulletframe_box" v-if="isShowBullet" :style="pierpop">
      <el-icon class="closeicon" @click="closebtn" color="#fff" size="28"
        ><Close
      /></el-icon>
      <span class="bulletframe_title">{{titleVal.data.name}}</span>
      <div class="bulletframe_textbox">
        <p>类型：{{Number(titleVal.data.type)==1?'蓝色':'黄色'}}</p>
        <p>状态：{{titleVal.data.state}}</p>
      
        <p>设备编号：{{titleVal.data.modelId}}</p>
      </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 { Close } from "@element-plus/icons-vue";
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";
// import u305 from "../assets/u305.png";
import u233 from "../assets/u233.png";
import u236 from "../assets/u236.png";
// 地图实例
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()
  getmap()
  mapLoading()
});
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)));
}

 

let mapacarDataList: any = ref([]);
/**
 * 弹框是否显示
 */
let isShowBullet = ref(false);
/**
 * 弹框样式
 */
let pierpop = ref({
  top: "",
  left: "",
});
let titleVal=reactive({
  data:{
    name:'',
    type:"",
    state:'',
    modelId:'',
  }
})
/**
 * 地图数据列表
 */
 const getmap = () => {
  mapacarDataList.value.push(
    {
      id: 1,
      name: "心若向阳",
      type: 2,
      state: "完成",
     modelId: 'ASDFGH_6',
      lat: 117.3429,
      lng: 24.6820,
    },
    {
      id: 2,
      type: 1,
      state: "排到",
      name: "无畏悲伤",
       lat:  117.2735,
      lng:  24.0485,
      modelId: 'ASDFGH_7'
    },
    {
      id: 3,
      type: 2,
      state: "运输",
      name: "常青桥",
       lat: 117.25106,
      lng:  24.09902,
      modelId: 'ASDFGH_8'
    },
    {
      id: 4,
      type: 1,
      state: "装货",
      name: "常青藤下",
       lat: 117.3987,
      lng:  24.8927,
       modelId: 'ASDFGH_9'
    },
    {
      id: 5,
      type: 1,
      state: "装货",
      name: "常青果",
       lat: 117.1593,
      lng:  23.819,
       modelId: 'ASDFGH_16'
    },
    {
      id: 6,
      name: "常青树上",
      type: 2,
      state: "完成",
     modelId: 'ASDFGH_17',
      lat: 117.9352,
      lng: 24.9933,
    },
    {
      id: 7,
      type: 1,
      state: "排到",
      name: "山河已秋",
       lat:   117.8939,
      lng: 24.8584,
      modelId: 'ASDFGH_18'
    },
    {
      id: 8,
      type: 2,
      state: "运输",
      name: "人间已晚",
       lat: 117.3113,
      lng:  24.613,
      modelId: 'ASDFGH_19'
    },
     
  );
};
/**
 * 关闭按钮
 */
 const closebtn = () => {
  isShowBullet.value = false;
};

/**
 * 地图加载点位
 */
 const mapLoading = () => {
  // 定义初始位置
  let position = Cesium.Cartesian3.fromDegrees(117.48295010826752,24.866476112918775, 150000);
  viewer.camera.flyTo({
    destination: position,
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0.0,
    },
    duration: 2,
    complete: function () {
      getDataList();
    },
  });
  // 监听鼠标点击事件
  viewer.screenSpaceEventHandler.setInputAction((event: any) => {
    const position = viewer.scene.pickPosition(event.position);
    if (Cesium.defined(position)) {
      const cartographic = Cesium.Cartographic.fromCartesian(position);
      const longitude = Cesium.Math.toDegrees(cartographic.longitude);
      const latitude = Cesium.Math.toDegrees(cartographic.latitude);

      console.log(`Longitude: ${longitude}, Latitude: ${latitude}`);
      // 这里可以处理获取到的经纬度数据
    }
    const pickedFeature = viewer.scene.pick(event.position);
    if (pickedFeature) {
      if (pickedFeature.id && pickedFeature.id._id) {
        const result = mapacarDataList.value.filter(
          (item: any) => item.id == pickedFeature.id._id
        );
        // console.log("经度", result);
        // console.log("经度", result[0].lat);
        // console.log("纬度", result[0].lng);
        titleVal.data=result[0]
        let worldPosition = Cesium.Cartesian3.fromDegrees(
          result[0].lat,
          result[0].lng
        );
        let screenPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
          viewer.scene,
          worldPosition
        );
        if (screenPosition) {
          isShowBullet.value = true;
          pierpop.value.top = `${screenPosition.y - 310}px`;
          pierpop.value.left = `${screenPosition.x - 168}px`;
        }
        // 监听场景渲染事件
        viewer.scene.postRender.addEventListener(() => {
          let worldPositionNew = Cesium.Cartesian3.fromDegrees(
            result[0].lat,
            result[0].lng
          );
          let screenPositionNew =
            Cesium.SceneTransforms.wgs84ToWindowCoordinates(
              viewer.scene,
              worldPositionNew
            );
          if (screenPositionNew) {
            pierpop.value.top = `${screenPositionNew.y - 310}px`;
            pierpop.value.left = `${screenPositionNew.x - 168}px`;
          }
        });
        console.log("screenPositionNew", screenPosition);
      } else {
        return;
      }
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
   /**
   * 渲染贴图
   */
  const getDataList = () => {
    mapacarDataList.value.map((item: any) => {
      let carimg = "";
      if (item.type == 1) {
        carimg = u233;
      } else {
        carimg = u236;
      }

      getImgLabeMap(carimg, item.lat, item.lng, item.id, item.name);
    });
  };
  const getImgLabeMap = (
    img?: string,
    lat?: number,
    lng?: number,
    id?: string | number,
    name?: string
  ) => {
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(lat!, lng!, 1),
      billboard: {
        image: img,
        scale: 1,
        // pixelOffset: new Cesium.Cartesian2(-45, -35),
      },
      id: id,
      name: name,
    });

    // viewer.zoomTo(viewer.entities);
  };
  let entityIDgetList: string[] = [];
  /**
   * 监听鼠标已入事件
   */
  viewer.screenSpaceEventHandler.setInputAction(
    function onMouseMove(movement: any) {
      const pickedObject = viewer.scene.pick(
        movement.endPosition
      );

      if (pickedObject && pickedObject.id) {
        // 添加小手
        (viewer.container as HTMLDivElement).style.cursor =
          "pointer";
      } else {
        // 还原
        (viewer.container as HTMLDivElement).style.cursor =
          "default";
      }
    },
    Cesium.ScreenSpaceEventType.MOUSE_MOVE
  );
};

</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;
 
}

.bulletframe_box {
  position: absolute;
  width: 331px;
  height: 254px;
  background: url("../assets/u305.png") no-repeat;
  display: flex;
  position: absolute;
  .closeicon {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
  }
  .bulletframe_title{
    position: relative;
    color: #fff;
    top: 53%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .bulletframe_textbox {
    width: 80%;
    height: 80%;
    /* // background: red; */
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;

    p {
      margin: 0;
      padding: 0;
      line-height: 30px;
      color: #fff;
      margin-left: 25px;
    }
  }
}
</style>