| | |
| | | <div class="earthLable">{{ longitude }}</div> |
| | | <div class="earthLable">纬度 :</div> |
| | | <div class="earthLable">{{ latitude }}</div> |
| | | <div class="earthLable">地形高度 :</div> |
| | | <div class="earthLable">{{ altHeight }} </div> |
| | | <div class="earthLable">米</div> |
| | | <div class="earthLable">视角高度 :</div> |
| | | <div class="earthLable">{{ alt }} </div> |
| | | <div class="earthLable">千米</div> |
| | |
| | | </template> |
| | | |
| | | <script lang="ts" setup> |
| | | import InitMap from "@/assets/js/Map"; |
| | | import { |
| | | ref, |
| | | onMounted, |
| | |
| | | const latitude = ref("0.00"); |
| | | const rate = ref("0.00"); |
| | | const alt = ref("0.00"); |
| | | const alheight = ref("0.00"); |
| | | const altHeight = ref("0.00"); |
| | | |
| | | let entitiesObj = reactive({ |
| | | lonLine: [], |
| | |
| | | latitude.value = SmartEarth.Cesium.Math.toDegrees( |
| | | cartographic.latitude |
| | | ).toFixed(6); |
| | | |
| | | let scene = window.Viewer.scene; |
| | | // 获取画布的大小 |
| | | var width = scene.canvas.clientWidth; |
| | | var height = scene.canvas.clientHeight; |
| | | //获取画布中心两个像素的坐标(默认地图渲染在画布中心位置) |
| | | var left = scene.camera.getPickRay( |
| | | new SmartEarth.Cesium.Cartesian2((width / 2) | 0, (height - 1) / 2) |
| | | altHeight.value = window.Viewer.scene.globe.getHeight( |
| | | Cesium.Cartographic.fromDegrees(longitude.value, latitude.value, 0) |
| | | ); |
| | | var right = scene.camera.getPickRay( |
| | | new SmartEarth.Cesium.Cartesian2((1 + width / 2) | 0, (height - 1) / 2) |
| | | ); |
| | | var globe = scene.globe; |
| | | var leftPosition = globe.pick(left, scene); |
| | | var rightPosition = globe.pick(right, scene); |
| | | if (!Cesium.defined(leftPosition) || !Cesium.defined(rightPosition)) { |
| | | return; |
| | | if (altHeight.value) { |
| | | altHeight.value = altHeight.value.toFixed(2); |
| | | } |
| | | var leftCartographic = |
| | | globe.ellipsoid.cartesianToCartographic(leftPosition); |
| | | var rightCartographic = |
| | | globe.ellipsoid.cartesianToCartographic(rightPosition); |
| | | var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic(); |
| | | geodesic.setEndPoints(leftCartographic, rightCartographic); |
| | | rate.value = geodesic.surfaceDistance.toFixed(6); //分辨率 |
| | | } |
| | | }, SmartEarth.Cesium.ScreenSpaceEventType.MOUSE_MOVE); |
| | | |
| | |
| | | 2 |
| | | ); |
| | | alt.value = camera_alt; |
| | | // // 方位角 |
| | | // let heading = Cesium.Math.toDegrees(viewer.camera.heading).toFixed(2); |
| | | // // 俯仰角 |
| | | // let pitch = Cesium.Math.toDegrees(viewer.camera.pitch).toFixed(2); |
| | | // // 翻滚角 |
| | | // let roll = Cesium.Math.toDegrees(viewer.camera.roll).toFixed(2); |
| | | // // 级别 |
| | | // let level = 0; |
| | | // let tileRender = viewer.scene._globe._surface._tilesToRender; |
| | | // if (tileRender && tileRender.length > 0) { |
| | | // level = viewer.scene._globe._surface._tilesToRender[0]._level; |
| | | // } |
| | | let scene = window.Viewer.scene; |
| | | // 获取画布的大小 |
| | | var width = scene.canvas.clientWidth; |
| | | var height = scene.canvas.clientHeight; |
| | | //获取画布中心两个像素的坐标(默认地图渲染在画布中心位置) |
| | | var left = scene.camera.getPickRay( |
| | | new SmartEarth.Cesium.Cartesian2((width / 2) | 0, (height - 1) / 2) |
| | | ); |
| | | var right = scene.camera.getPickRay( |
| | | new SmartEarth.Cesium.Cartesian2((1 + width / 2) | 0, (height - 1) / 2) |
| | | ); |
| | | var globe = scene.globe; |
| | | var leftPosition = globe.pick(left, scene); |
| | | var rightPosition = globe.pick(right, scene); |
| | | if (!Cesium.defined(leftPosition) || !Cesium.defined(rightPosition)) { |
| | | return; |
| | | } |
| | | var leftCartographic = |
| | | globe.ellipsoid.cartesianToCartographic(leftPosition); |
| | | var rightCartographic = |
| | | globe.ellipsoid.cartesianToCartographic(rightPosition); |
| | | var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic(); |
| | | geodesic.setEndPoints(leftCartographic, rightCartographic); |
| | | rate.value = geodesic.surfaceDistance.toFixed(2); //分辨率 |
| | | }); |
| | | }; |
| | | const gridSwitch = () => { |
| | | gridIsshow.value = !gridIsshow.value; |
| | | if (gridIsshow.value) { |
| | | grid(10); |
| | | // getHeight(); |
| | | // createPrimitives(); |
| | | } else { |
| | | gridDel(); |
| | | } |
| | | InitMap.showlonlatLine(); |
| | | }; |
| | | const getHeight = () => { |
| | | let removeListener = Viewer.camera.changed.addEventListener(() => { |
| | | // 当前高度 |
| | | let height = Viewer.camera.positionCartographic.height; |
| | | heightlevel = getLevel(height); |
| | | console.log(heightlevel); |
| | | |
| | | if (heightlevel == 6) { |
| | | gridDel(); |
| | | grid(5); |
| | |
| | | // ]) |
| | | // ); |
| | | // } |
| | | // console.log(ps); |
| | | |
| | | // let polylineGeometry = new Cesium.PolylineGeometry({ |
| | | // positions: ps, |
| | | // width: 5, |
| | |
| | | const grid = (degree) => { |
| | | const entities = Viewer.entities; |
| | | for (let longitude = -180; longitude <= 180; longitude += degree) { |
| | | console.log( |
| | | Cesium.Cartesian3.fromDegreesArray([ |
| | | longitude, |
| | | -90, |
| | | longitude, |
| | | 0, |
| | | longitude, |
| | | 90, |
| | | ]) |
| | | ); |
| | | let text = ""; |
| | | if (longitude === 0) { |
| | | text = "0"; |
| | |
| | | if (lat === 0) { |
| | | text = ""; |
| | | } |
| | | // console.log(lat, "---lat"); |
| | | |
| | | let obj = entities.add({ |
| | | position: Cesium.Cartesian3.fromDegrees(0, lat), |
| | | polyline: { |
| | |
| | | }); |
| | | entitiesObj.latLine.push(obj); |
| | | } |
| | | console.log(entitiesObj); |
| | | |
| | | // 抗锯齿 |
| | | if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) { |
| | | //判断是否支持图像渲染像素化处理 |