Cesium加载3dtile并且点击获取3dtile经纬度_cesium 3d tiles的坐标获取

作者：weixin_40725706 | 2024-07-28 08:27:17
踩
cesium 3d tiles的坐标获取
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <!--Cesium js文件引入 -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000000;
        }

        #trailer {
            position: absolute;
            bottom: 75px;
            right: 0;
            width: 320px;
            height: 180px;
        }
    </style>
</head>
<body>
<template>
    <div>
        <div id="cesiumContainer"></div>
    </div>
</template>
 <!-- 视图显示容器 -->
  <div id="cesiumContainer"></div>
  <div id="latlng_show" style="width:420px;height:30px;position:absolute;bottom:40px;right:200px;z-index:1;font-size:15px;">
        <div style="width:140px;height:30px;float:left;">
            <font size="3" color="white">经度：<span id="longitude_show"></span></font>
        </div>
        <div style="width:140px;height:30px;float:left;">
            <font size="3" color="white">纬度：<span id="latitude_show"></span></font>
        </div>
        <div style="width:140px;height:30px;float:left;">
            <font size="3" color="white">高程：<span id="altitude_show"></span>m</font>
        </div>
    </div>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    // 注册密钥: https://cesium.com/ion/tokens.
    // 账号密钥
    Cesium.Ion.defaultAccessToken = '你的Cesium token';
	 //viewer.imageryLayers.get(0).show = false;
	 //viewer.scene.globe.baseColor = Cesium.Color.BLACK;
	Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 22, 130, 55)  //默认视角定位中国上空
	var viewer = new Cesium.Viewer('cesiumContainer',{
			animation: false, //是否显示动画控件
			shouldAnimate: false,
			homeButton: false, //是否显示Home按钮
			fullscreenButton: false, //是否显示全屏按钮
			baseLayerPicker: false, //是否显示图层选择控件
			geocoder: false, //是否显示地名查找控件
			timeline: false, //是否显示时间线控件
			sceneModePicker: false, //是否显示投影方式控件
			navigationHelpButton: false, //是否显示帮助信息控件
			infoBox: false, //是否显示点击要素之后显示的信息
			requestRenderMode: true, //启用请求渲染模式
			scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
			sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
			skyAtmosphere:false,
			fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处	
			 // 地形 
			terrainProvider:new Cesium.createWorldTerrain({
				requestVertexNormals:false,
				requestWaterMask:false
			}) 
	});
	viewer.scene.globe.depthTestAgainstTerrain = true;
	viewer.scene.sun.show = false;
	viewer.scene.moon.show = false;
	viewer.scene.skyBox.show = false; //关闭天空盒，否则会显示天空颜色
	viewer.scene.undergroundMode = false;
	viewer.scene.globe.show = false; //关闭地球

	var longitude_show = document.getElementById('longitude_show');
	var latitude_show = document.getElementById('latitude_show');
	var altitude_show = document.getElementById('altitude_show');
	 
	 
	//获取坐标转经纬度
	let handler = new Cesium.ScreenSpaceEventHandler(window.viewer.canvas);
	handler.setInputAction(function (event) {
	    console.log(event.position);
		let earthPosition = window.viewer.scene.pickPosition(event.position);
		if (Cesium.defined(earthPosition)) {
			let cartographic = Cesium.Cartographic.fromCartesian(earthPosition);
			console.log(cartographic);
			let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
			let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
			let height = cartographic.height.toFixed(2);
			console.log(earthPosition, {
				lon: lon,
				lat: lat,
				height: height,
			});
			longitude_show.innerHTML = lon;
			latitude_show.innerHTML = lat;
			altitude_show.innerHTML = height;
		}
	}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
	
	
	//加载3DTiles 
	function tilesetload(){
	var uri = '你的瓦片图地址/tileset.json';
		var tileset =  new Cesium.Cesium3DTileset({       
			url: uri,
			//我这里使用的本地iis代理的数据  后期会出iis如何代理瓦片数据的
			// url: 'http://localhost:8086/tileset.json',
          //控制切片视角显示的数量，可调整性能
            // maximumScreenSpaceError: 2,
            //     maximumNumberOfLoadedTiles: 100000,
			show:true,
			skipLevelOfDetail : true,
	     	baseScreenSpaceError : 1024,
      		skipScreenSpaceErrorFactor : 16,
	      	skipLevels : 1,
	     	immediatelyLoadDesiredLevelOfDetail : false,
	     	loadSiblings : false,
      		cullWithChildrenBounds : true
      })
	viewer.scene.primitives.add(tileset);
	
	//定位到模型的位置
	    (async () => {
            try {
              await tileset.readyPromise;
              await viewer.zoomTo(tileset);
		    // Apply the default style if it exists
		    var extras = tileset.asset.extras;
			    if (
			    Cesium.defined(extras) &&
			    Cesium.defined(extras.ion) &&
			    Cesium.defined(extras.ion.defaultStyle)
			    ) {
			    tileset.style = new Cesium.Cesium3DTileStyle(extras.ion.defaultStyle);
			    }
		    } catch (error) {
			    console.log(error);
		    }
	    })(); 
		calc3DTileCenter(uri);
	}
 	tilesetload();
	
  </script>
 </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/893417