3DTileset

cesium3DTileset（jM0NH0）

<template><div class="frame-content" ref="frameCon"><div class="page2"><div class="modelBox" v-show="showModel"><video id="myVideo" muted="" autoplay="" loop="" crossorigin="" controls=""><source id="mySource" :src="videoData&&videoData.one" type="video/mp4"></video><div id="cesiumContainer" style="height: 100%"></div></div></div></div>
</template>
<script>import '../../public/cesium-measure.js'const viewModel = {debugBoundingVolumesEnabled: false,edgeStylingEnabled: true
};
var that, viewer, tileset, clippingPlanes, boundingSphere , handler, entityCollection,dbIdToFeatures = [], measure, highlighted = [], inter = null;
;export default {name: 'bridge',data() {return {//更改视频videoData: {one: "http://sovv.qianpailive.com/f243adee44a9c1d90c3e05d805b9baee/1679536085/20200217/65f4054df3daae7ef256d39665c93a9f?a=ylu7kvm4yc47&t=1679536085848881186&u=FxkYoDsKVsBpsk3GbRzr1wBKXFmZU5lbQR5tWkWw&vid=Ym5PARAb7ynw",},showModel: true}},created() {that = this;},mounted() {Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMmNjYzIwMy02MmYwLTQ1MDgtOWZjMy0yOWM3ZWFhN2Y3YTciLCJpZCI6OTI3MTksImlhdCI6MTY1MTg5M******.e1FDFA-oE6Fp3kdbdzfmaUKLP0lNMD7-5S2il3Nq9FU';viewer = new Cesium.Viewer("cesiumContainer", {infoBox: false,// 地图默认点击弹窗selectionIndicator: false,// 地图默认点击元素绿色框框// 导航栏animation: false,baseLayerPicker: false,geocoder: false,timeline: false,//时间线sceneModePicker: false,//场景模式选择器navigationHelpButton: false,//导航帮助按钮fullscreenButton: false,//全屏按钮homeButton: false, //主页按钮orderIndependentTranslucency: false,contextOptions: {webgl: {alpha: true,}}});viewer.cesiumWidget.creditContainer.style.display = "none"; //去除logoviewer.scene.globe.show = false; //不显示地球，这条和地球透明度选一个就可以viewer.canvas.height = this.$refs.frameCon.clientHeightconsole.log(viewer, 'viewer')this.initModel();},methods: {//加载模型initModel() {let url = '/cesium/bridge/tileset.json';tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: url,type: "3dtiles",}));//===============================================================================================融合视频（需要搭配video 标签使用）
//===============================================================================================融合视频（需要搭配video 标签使用）
//===============================================================================================融合视频（需要搭配video 标签使用）const videoElement = document.getElementById("myVideo");videoElement.style.display = 'none';let synchronizer = new Cesium.VideoSynchronizer({clock : viewer.clock,element : videoElement});viewer.clock.shouldAnimate = true;// 获取视频元素function mas(){var bluePlane = viewer.entities.add({name : "Blue plane",position : Cesium.Cartesian3.fromDegrees(100.51310128958818,0.0011429199684450354, 190),plane : {plane : new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),dimensions : new Cesium.Cartesian2(-150.0, 100.0),material : videoElement,},});return bluePlane;}var sp = mas();//===============================================================================================添加广告牌
//===============================================================================================添加广告牌
//===============================================================================================添加广告牌// 方式一、添加广告牌实体   https://blog.csdn.net/wangbiao9292/article/details/91988858var billboard2 = viewer.entities.add({name: 'video',position: Cesium.Cartesian3.fromDegrees(100.51279149701331,0.002348978500664829,0.6935823878039076),label: { //文字标签text: "这里有棵树",font: '500 30px Helvetica',// 15pt monospacescale: 0.5, //比例缩放style: Cesium.LabelStyle.FILL,fillColor: Cesium.Color.WHITE,pixelOffset: new Cesium.Cartesian2(0, -75), //偏移量showBackground: true,backgroundColor: new Cesium.Color(0.5, 0.6, 1, 1.0)},billboard:{image: '/cesium/images/Dangerous01.png',heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //相对于对象的原点（注意是原点的位置）的水平位置verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //相对于对象的原点的垂直位置，BOTTOM时锚点在下，对象在上scale: 0.1,}})/**** 方式二、添加广告牌* 用于添加poi的icon和label的函数* @param {*} lon ：经度* @param {*} lat ：纬度* @param {*} high ：高度（ high+extent）* @param {*} extent ：线长度* @param {*} km ：线距离物体距离* @param {*} name ：标签内容* @param {*} color ：底部圆和横线的颜色* @param {*} url ：icon地址*/var billboard3 = poiIconLabelAdd(100.51310128958818,0.0011429199684450354,1.2004733174844704,100,1,"垃圾请扔在这里","red","/cesium/images/Dangerous01.png");function poiIconLabelAdd(lon, lat, high , extent ,km ,name , color , url) {viewer.entities.add({name: "video2",position: Cesium.Cartesian3.fromDegrees(lon, lat, high+extent),// 图标billboard: {image: url,width: 50,height: 50,},label: {//文字标签text: name,font: '20px sans-serif',style: Cesium.LabelStyle.FILL,// 对齐方式 居中对齐且在上horizontalOrigin: Cesium.HorizontalOrigin.CENTER,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,pixelOffset: new Cesium.Cartesian2(20, -20),showBackground: true,backgroundColor: new Cesium.Color.fromBytes(0, 70, 24),},});// 先画线后画点，防止线压盖点let linePositions = [];linePositions.push(new Cesium.Cartesian3.fromDegrees(lon, lat, km)); //线距离物体的高度linePositions.push(new Cesium.Cartesian3.fromDegrees(lon, lat, extent));  //线的长度viewer.entities.add({polyline: {positions: linePositions,width: 1.5,material: color,}})// 画点viewer.entities.add({// 给初始点位设置一定的离地高度，否者会被压盖position: Cesium.Cartesian3.fromDegrees(lon, lat, 2),point: {color: color,pixelSize: 15,}})}//点击获取到广告牌，然后对广告牌操作var handlerVideo = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handlerVideo.setInputAction(function (click) {//移除视频viewer.entities.remove(sp);var pick = viewer.scene.pick(click.position);console.log("pick------------" , pick.id._name)if (pick && pick.id._name == "video") {billboard2._billboard._image._value = '/cesium/images/gif1.gif';billboard2._label._text._value = "别点了，再点我就死给你看！";//更改数据源// that.$data.videoData.one = "http://sovv.qianpailive.com/f243adee44a9c1d90c3e05d805b9baee/1679536085/20200217/65f4054df3daae7ef256d39665c93a9f?a=ylu7kvm4yc47&t=1679536085848881186&u=FxkYoDsKVsBpsk3GbRzr1wBKXFmZU5lbQR5tWkWw&vid=Ym5PARAb7ynw";changeSrc('http://sovv.qianpailive.com/f243adee44a9c1d90c3e05d805b9baee/1679536085/20200217/65f4054df3daae7ef256d39665c93a9f?a=ylu7kvm4yc47&t=1679536085848881186&u=FxkYoDsKVsBpsk3GbRzr1wBKXFmZU5lbQR5tWkWw&vid=Ym5PARAb7ynw')} else if (pick && pick.id._name == "video2"){//更改数据源// that.$data.videoData.one = "http://sovv.qianpailive.com/65653132767174e8995338ebef6821c7/1679478035/25f7/20230321/11726655e8f41c4f55564b28090dcfa4?a=ylu7kvm4yc47&t=1679478035130599961&u=akAyToMuSEfNMpY7Z1x1GjLSpnpAnzbkd2BtJ9Tl&vid=qjKlZdP0RE5D";changeSrc('http://sovv.qianpailive.com/3f3ebb4ad7bfe472657f3d211e67d323/1679537089/5255/20230321/4b02dac57146595f118b60b6bdd42ceb?a=ylu7kvm4yc47&t=1679537089283065941&u=ia5peIadMiJK8gZ346mDyLjfA5BRXtHCNpzEljjG&vid=LyG0ZDn4a1MK')}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);//更改视频源function changeSrc(src){document.getElementById("myVideo").src = srcsp = mas();}//===============================================================================================模型阴影
//===============================================================================================模型阴影
//===============================================================================================模型阴影//模型阴影（文档：https://www.wenjiangs.com/doc/cesium-api-shadowmap）viewer.scene.globe.enableLighting = true // Enable lighting based on sun/moon positions(启用基于太阳/月亮位置的照明),使用太阳光也就是我们平时的光白天亮晚上黑// viewer.shadows = true //阴影（太阳投射而成的阴影）viewer.terrainShadows = Cesium.ShadowMode.RECEIVE_ONLYviewer.shadowMap.softShadows  = true //可选 是否启用百分比更接近过滤以产生更柔和的阴影。viewer.scene.shadowMap.enabled=true //场景中的阴影贴图viewer.shadowMap.darkness = 0.18 //阴影透明度--越大越透明// viewer.shadowMap.normalOffset = false //是否将法线偏移应用于阴影。// viewer.shadowMap.size = 2048*2048 //可选 每个阴影贴图的宽度和高度（以像素为单位）。    解決放大产生线条inter = setInterval(() => {// 改变时间设置光照效果let date = new Date().getTime()let utc = Cesium.JulianDate.fromDate(new Date(date))//北京时间=UTC+8=GMT+8 不用加8viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc, 0, new Cesium.JulianDate())}, 100)//加快阴影效果（肉眼直观）// let time = 0// inter = setInterval(() => {//   // 改变时间设置光照效果//   let date = new Date().getTime() + time//   let utc = Cesium.JulianDate.fromDate(new Date(date))//   //北京时间//   viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc, 0, new Cesium.JulianDate())//   time = time + 1000 * 60// }, 100)//打开过后时间就不会影响阴影的改变// viewer.scene.light = new Cesium.DirectionalLight({//   //去除时间原因影响模型颜色//   direction: new Cesium.Cartesian3(0.35492591601301104, -0.8909182691839401, -0.2833588392420772)// })//关闭光照效果的方法function clearOpenLight() {viewer.scene.globe.enableLighting = falseviewer.shadows = falseviewer.terrainShadows = Cesium.ShadowMode.DISABLEDif (inter) {clearInterval(inter)inter = null}}//===============================================================================================点击获取对应子模型信息，从而操作
//===============================================================================================点击获取对应子模型信息，从而操作
//===============================================================================================点击获取对应子模型信息，从而操作//1、模型加载完毕将数据给到dbIdToFeaturestileset.tileLoad.addEventListener(function (tile) {const content = tile.content;const innerContents = content.innerContents;if (Cesium.defined(innerContents)) {const length = innerContents.length;for (let i = 0; i < length; ++i) {processContentFeatures(innerContents[i], loadFeature);}} else {processContentFeatures(content, loadFeature);}function processContentFeatures(content, callback) {const featuresLength = content.featuresLength;for (let i = 0; i < featuresLength; ++i) {const feature = content.getFeature(i);callback(feature);}}function loadFeature(feature) {const id = getFeatureId(feature);let features = dbIdToFeatures[id];if (!Cesium.defined(features)) {dbIdToFeatures[id] = features = [];}features.push(feature);}// 获取构件IDfunction getFeatureId(feature) {if (Cesium.defined(feature) && Cesium.defined(feature.getProperty)) {return parseInt(feature.getProperty('id'), 10);}return -1;}})tileset.debugShowBoundingVolume = viewModel.debugBoundingVolumesEnabled;//2、点击获取对象viewer.screenSpaceEventHandler.setInputAction(function (clickEvent) {//2-1根据坐标clickEvent获取对应信息var pick = viewer.scene.pickPosition(clickEvent.position);var pickModel = viewer.scene.pick(clickEvent.position);//2-2信息不为空，就获取子模型id更改颜色if (pickModel && pick && !pickModel.id) {var id = getFeatureId(pickModel);const s = [id]for (let item of s) {setColorById(item, Cesium.Color.fromCssColorString("#353535"))}}//点击的时候可以将上面的对象（添加广告牌）的坐标更改if (!pick) return;let cartographic = Cesium.Cartographic.fromCartesian(pick);let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度let height = cartographic.height //高度console.log(lng, "========",lat,"========",height)//更改例子： billboard.position= Cesium.Cartesian3.fromDegrees(lng,lat,height);}, Cesium.ScreenSpaceEventType.LEFT_CLICK);// 通过ID来修改模型颜色function setColorById(id, color) {const features = dbIdToFeatures[id];for (let feature of features) {feature.color = Cesium.Color.clone(color, feature.color);// tileset.material = Cesium.ImageMaterialProperty({image: '/cesium/images/Simple_Metal_Mtl_Brush_pattern.jpg'});}}// 获取构件IDfunction getFeatureId(feature) {if (Cesium.defined(feature) && Cesium.defined(feature.getProperty)) {return parseInt(feature.getProperty('id'), 10);}return -1;}return tileset.readyPromise.then(function (tileset) {viewer.zoomTo(tileset);//缩放到模型return tileset; //向集合中添加}).catch(function (error) {console.log(error);});},},//缩放到模型zoomTo() {viewer.zoomTo(tileset);//缩放到模型},
}</script>
<style lang="scss" scoped>
.frame-content {display: flex;width: 100%;height: 100%;
}//.page1,
.page2 {width: 100%;height: 100%;
}
</style>