<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="Cesium/Cesium.js"></script>
<link rel="stylesheet" href="Cesium/Widgets/widgets.css">
<style>
.item{
margin: 10px;
height: 50px;
line-height: 50px;
width: 100px;
background-color: #2874a7;
color: white;
font-size: 20px;
text-align: center;
border-radius: 5%;
cursor:pointer;
box-shadow: 0 0 1px 1px #66ccff;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div style=" position: absolute;z-index: 10000;left: 60px;top: 160px;justify-content: space-between;padding: 30px;cursor:pointer;color: white"
>
<div class="item" id="item1">
225
</div>
<div class="item" id="item2">
227
</div>
</div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer')
let dataLists=[]
Cesium.Resource.fetchJson({
url:'Cesium/Cesium3DTiles/tiles/scenetree.json'
}).then(res=>{
res.scenes[0].children.forEach(item => {
dataLists.push({
id:item.id,
name: item.name,
sphere: item.sphere,
})
})
})
let tileset = add3DTiles('Cesium/Cesium3DTiles/tiles/tileset.json')
viewer.zoomTo(tileset)
function add3DTiles(url) {
var primitive = new Cesium.Cesium3DTileset({
url: url,
shadows:Cesium.ShadowMode.DISABLED
})
var tileset = viewer.scene.primitives.add(primitive)
return tileset
}
let features =[]
tileset.tileLoad.addEventListener(tile=>{
const content = tile._content
let featuresLength = content.featuresLength
for(let i =0;i<featuresLength;i++){
let feature = content.getFeature(i)
features.push({feature:feature,name:feature.getProperty('name'),id:feature.getProperty('id')})
}
})
//模型颜色改变，一通过条件改变；二通过筛选feature
let con =``
document.getElementById('item1').onclick = function(){
features.forEach((item)=>{
if(item.name == '225' ){
item.feature.color = Cesium.Color.fromCssColorString('#11eae6')
}else{{
item.feature.color = Cesium.Color.fromCssColorString('#fff').withAlpha(0.5)
}}
})
dataLists.forEach(item=>{
if(item.name =='225'){
let sphere = item.sphere
let center = new Cesium.Cartesian3(sphere[0], sphere[1], sphere[2])
const boundingSphere = new Cesium.BoundingSphere(center, sphere[3])
viewer.camera.flyToBoundingSphere( boundingSphere, {
offset: new Cesium.HeadingPitchRange(3.5, -0.5, 200),
duration: 2,
})
}
})
}
document.getElementById('item2').onclick = function(){
con = [
['${name} ==="227" ', 'color("purple", 0.9)'], //符合条件项
['true', 'rgba(255,255,255,0.5)'] //其他项
]
tileset.style = new Cesium.Cesium3DTileStyle({
color:{
conditions:con
}
})
dataLists.forEach(item=>{
if(item.name =='227'){
let sphere = item.sphere
let center = new Cesium.Cartesian3(sphere[0], sphere[1], sphere[2])
const boundingSphere = new Cesium.BoundingSphere(center, sphere[3])
viewer.camera.flyToBoundingSphere( boundingSphere, {
offset: new Cesium.HeadingPitchRange(3.5, -0.5, 200),
duration: 2,
})
}
})
}
</script>
</body>
</html>
Cesium 定位到模型
需积分: 5 76 浏览量
2023-08-02
15:47:38
上传
评论
收藏 6.26MB RAR 举报
Cesium 定位到模型 （379个子文件） 
NoLod_0.b3dm 24KB index.cjs 3.76MB widgets.css 29KB lighter.css 6KB InfoBoxDescription.css 5KB Timeline.css 3KB Animation.css 3KB CesiumInspector.css 3KB BaseLayerPicker.css 2KB Cesium3DTilesInspector.css 2KB CesiumWidget.css 2KB NavigationHelpButton.css 2KB Viewer.css 2KB shared.css 2KB InfoBox.css 2KB lighter.css 2KB Geocoder.css 2KB SceneModePicker.css 2KB ProjectionPicker.css 1KB lighter.css 1KB lighterShared.css 1KB lighter.css 734B lighter.css 495B SelectionIndicator.css 472B VoxelInspector.css 449B lighter.css 438B PerformanceWatchdog.css 371B lighter.css 307B FullscreenButton.css 193B VRButton.css 169B
info-loading.gif 723B
定位到模型.html 4KB
waterNormals.jpg 287KB StarBurst.jpg 191KB tycho2t3_80_mz.jpg 164KB tycho2t3_80_py.jpg 149KB tycho2t3_80_pz.jpg 149KB tycho2t3_80_my.jpg 149KB tycho2t3_80_px.jpg 120KB tycho2t3_80_mx.jpg 116KB DirtMask.jpg 111KB waterNormalsSmall.jpg 33KB moonSmall.jpg 18KB 2.jpg 16KB 2.jpg 16KB 2.jpg 16KB 3.jpg 15KB 1.jpg 15KB 3.jpg 15KB 0.jpg 14KB 1.jpg 13KB 1.jpg 13KB 1.jpg 13KB 3.jpg 12KB 1.jpg 12KB 1.jpg 12KB 2.jpg 12KB 0.jpg 12KB 3.jpg 12KB 3.jpg 12KB 3.jpg 12KB 2.jpg 11KB 2.jpg 11KB 1.jpg 11KB 1.jpg 11KB 2.jpg 11KB 3.jpg 11KB 0.jpg 10KB 0.jpg 10KB 0.jpg 10KB 3.jpg 10KB 1.jpg 10KB 1.jpg 10KB 0.jpg 9KB 0.jpg 9KB 1.jpg 9KB 0.jpg 9KB 0.jpg 8KB 0.jpg 8KB 2.jpg 8KB 0.jpg 8KB 0.jpg 7KB 0.jpg 7KB 1.jpg 7KB 0.jpg 6KB Cesium.js 3.71MB index.js 3.71MB google-earth-dbroot-parser.js 214KB Transforms-c842a68c.js 122KB draco_decoder_nodejs.js 57KB Matrix2-7a8e9daf.js 36KB basis_transcoder.js 33KB GeometryPipeline-87cdea8e.js 30KB pako_deflate.min.js 27KB createVerticesFromHeightmap.js 26KB decodeGoogleEarthEnterprisePacket.js 25KB transcodeKTX2.js 24KB Matrix3-b2351961.js 23KB pako_inflate.min.js 21KB FrustumGeometry-2418e7ca.js 19KB共 379 条
- 1
- 2
- 3
- 4
资源评论
