token记得换成您自己的！！！
申请cesium的token 官网【Cesium: The Platform for 3D Geospatial】
pickEllipsoid在加载地形的情况下有一定误差，地形凹凸程度越大，误差越大。
pickPosition在depthTestAgainstTerrain = false时只能在3DTile上获取准确位置，当depthTestAgainstTerrain = true时， 在3DTile和底图上均能获取准确位置
viewer.scene.globe.depthTestAgainstTerrain = true; // 开启地形深度检测
// pickEllipsoid在加载地形的情况下有一定误差，地形凹凸程度越大，误差越大。
// pickPosition在depthTestAgainstTerrain = false时只能在3DTile上获取准确位置，当depthTestAgainstTerrain = true时，
// 在3DTile和底图上均能获取准确位置<template><div id="cesiumContainer"></div><!-- <div id="infoboxs" :style="qnameclass" class="qnamebox">{{ qname }}</div> --><!-- <div class="btnbox"><div class="btnboxel"><el-button class="btnel" v-for="item in pointData2" :key="item.modelId" @click="showBubble(item)">{{ item.name}}</el-button></div></div> --></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 = ref()
let qnameclass = reactive({top: '',left: '',
})let valshowlet infos: any = reactive({pups: []
})
let infoBox1 = ref()onMounted(() => {// 初始化Cesium并创建viewerCesium.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版权viewer.scene.globe.depthTestAgainstTerrain = true; // 开启地形深度检测let destination = Cesium.Cartesian3.fromDegrees(117.598276295, 24.21475226, 80); // 北京天安门广场的经纬度坐标及高度viewer.camera.flyTo({destination: destination,duration: 2, // 飞行动画持续时间（单位：秒）orientation: {heading: Cesium.Math.toRadians(-25), // 方向 y 左右摇头pitch: Cesium.Math.toRadians(-20), // 倾斜角度 x 上下点头 -90看地面 0看前方 90看天上roll: 0, //z 歪头看}});handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);// getasdM()// 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; // 开启地表透明// window._viewer=viewergetRightClick()});// 每帧都要更新标签位置
function getBubble() {viewer.scene.postRender.addEventListener(() => {// console.log("气泡",infos.pups)infos.pups.forEach((item: any) => {let worldcoodinate = Cesium.Cartesian3.fromRadians(item.position.longitude, item.position.latitude, item.position.height)// let screenpops=Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,worldcoodinate)let screenpops = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, worldcoodinate)let pupdiv: any = document.getElementById(item.id)if (pupdiv && screenpops) {// let infoBox1= new Cesium.InfoBox(document.getElementById(item.id))pupdiv.style.top = screenpops.y - 80 + 'px'pupdiv.style.left = screenpops.x + 'px'let pupdivA: any = document.getElementById(item.id + 'A')console.log("pupdivA.height:", pupdivA.style.height)// pupdivA.style.top = screenpops.y-80+25 + 'px'// pupdivA.style.left = screenpops.x-20+ 'px'// pupdiv.style.sheet.addRule('#'+'::after', 'content: "";position:absolute; width: 0;height: 0; top: 25px;left: -35px;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 35px solid #42b983; transform: skewY(-50deg)');}})})
}// 右击事件
function getRightClick() {handler.setInputAction(function (event) {// 此处点击模型// const pickedObject = viewer.scene.pick(event.position);let windowpos = viewer.camera.getPickRay(event.position)// 判断是否点击地球if (windowpos) {// pickEllipsoid在加载地形的情况下有一定误差，地形凹凸程度越大，误差越大。// pickPosition在depthTestAgainstTerrain = false时只能在3DTile上获取准确位置，当depthTestAgainstTerrain = true时，// 在3DTile和底图上均能获取准确位置// let cartesian2 = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid);var cartesian2 = viewer.scene.pickPosition(event.position)// console.log("cartesian",cartesian)let carto2 = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian2)// if (Cesium.defined(pickedObject)) {// console.log("右击事件");// const id = pickedObject.getProperty("id");// const name = pickedObject.getProperty("name");// let params = { id: buildUUID(), position: carto2, modelId: id, name }// ceastPup(params)// // const entity = pickedObject.id;// // if (Cesium.defined(entity)) {// // console.log("右击事件", entity);// // }// }// const id = pickedObject.getProperty("id");// const name = pickedObject.getProperty("name");var randomNumber = Math.floor(Math.random() * 10+1);let params = { id: buildUUID(), position: carto2, modelId: buildUUID(), name: getRandomChineseWord(randomNumber) }ceastPup(params)}}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
}
function getRandomChineseWord(num) {let arr: any = []for (var i = 0; i < num; i++) {var _rsl = "";// 40869 - 19968 40870 - 19968var _randomUniCode = Math.floor(Math.random() * (40870 - 19968) + 19968).toString(16);eval("_rsl=" + '"\\u' + _randomUniCode + '"');arr.push(_rsl)}let chinese = arr.join("")return chinese;
}// 创建气泡
function ceastPup(param: any) {let object: any = infos.pups.find(item => { return item.id == param.id })if (!object) {object = new Object()object.id = param.idobject.position = param.positioninfos.pups.push(object)let divmark = `<div id='${param.id}' style="position:absolute;width:340px;background-color:#42b983;border-radius:5px;color:#fff; " ><div id='${param.id}A' style=" position: absolute;width: 10px;height: 40px;top: 35px;left: -20px;border-top: 0px solid transparent;border-bottom: 50px solid transparent;border-right: 12px solid #42b983;border-left: 10px solid transparent;transform: skewY(-50deg);"></div><div style="margin-left:20px;margin-top:10px;margin-bottom:10px;margin-right:10px"><span>Id:${param.modelId}</span><span>${param.name}</span></div></div>`// let divmark = "<div id='"+ param.id +"' style='position:absolute;width:200px;height:50px;background-color:#42b983;border-radius:5px;' ></div>"// console.log("divmark",divmark)// var style = document.createElement("style");// document.head.appendChild(style);// let sheet: any = style.sheet;// console.log("sheet",sheet)// // //兼容IE浏览器// sheet.addRule('#'+param.id+'::after', 'content: "";position:absolute; width: 0;height: 0; top: 25px;left: -35px;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 35px solid #42b983; transform: skewY(-50deg)');// $('<style>#'+param.id+'::after{content: "";position:absolute; width: 0;height: 0; top: 25px;left: -35px;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 35px solid #42b983; transform: skewY(-50deg);}</style>').appendTo('head');$('#' + viewer._container.id).append(divmark)getBubble()}}// 随机数字
const buildUUID = () => {const hexList: string[] = [];for (let i = 0; i <= 15; i++) {hexList[i] = i.toString(16);}let uuid = "";for (let i = 1; i <= 36; i++) {if (i === 9 || i === 14 || i === 19 || i === 24) {uuid += "-";} else if (i === 15) {uuid += 4;} else if (i === 20) {uuid += hexList[(Math.random() * 4) | 8];} else {uuid += hexList[(Math.random() * 16) | 0];}}return uuid.replace(/-/g, "");
};// 加载模型
const getasdM = () => {try {tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: '../../public/asd/tileset.json',// type: "3dtiles",maximumScreenSpaceError: 2, //最大的屏幕空间误差show: true,modelMatrix: Cesium.Matrix4.fromArray([0.9920306777526413, 0.035672572522648105, 0.12084122627336652, 0, -0.0052179803729043295, 0.9698924230752208, -0.24347784363696146, 0, -0.12588847079245385, 0.24090694309399502, 0.9623491765937375, 0, -1232.2319169966504, 2358.065217874944, 6764.694671697915, 1]),}))viewer.flyTo(tileset)// viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin); // 开启3D Tiles检测器} catch (error) {console.log(`Error loading tileset: ${error}`);}}</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%; */
}/* .row-4{margin: 40px auto;width: 200px;height: 50px;color: #fff;line-height: 50px;text-align: center;position: relative;background: teal;border-radius: 5px;}.row-4::after{content: '';position: absolute;width: 0;height: 0;top: 25px;right: -20px;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 20px solid teal;transform: skewY(50deg);} */
.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; */}
}.qnamebox {position: absolute;border: 1px solid #ccc;background: #4cb872;border-radius: 5px;padding: 10px;color: #fff;
}
</style>
)
)
