| | |
| | | </template> |
| | | |
| | | <script lang="ts" setup> |
| | | import InitMap from "@/assets/js/Map"; |
| | | import server from "@/assets/js/Map/server"; |
| | | import { |
| | | ref, |
| | | onMounted, |
| | |
| | | let camera_alt = (Viewer.camera.positionCartographic.height / 1000).toFixed( |
| | | 2 |
| | | ); |
| | | |
| | | alt.value = camera_alt; |
| | | let scene = window.Viewer.scene; |
| | | // 获取画布的大小 |
| | |
| | | if (!Cesium.defined(leftPosition) || !Cesium.defined(rightPosition)) { |
| | | return; |
| | | } |
| | | var ellipsoid = SmartEarth.Cesium.Ellipsoid.MOON200; |
| | | 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); //分辨率 |
| | | |
| | | geodesic.setEndPoints(leftCartographic, rightCartographic, ellipsoid); |
| | | // rate.value = geodesic.surfaceDistance.toFixed(2); //分辨率 |
| | | }); |
| | | |
| | | |
| | | Viewer.scene.postRender.addEventListener(() => { |
| | | // // 获取画布的大小 |
| | | let scene = earthCtrl.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 leftPosition = scene.globe.pick(left, scene); |
| | | var rightPosition = scene.globe.pick(right, scene); |
| | | if (!SmartEarth.Cesium.defined(leftPosition) || !SmartEarth.Cesium.defined(rightPosition)) { |
| | | return; |
| | | } |
| | | const ellipsoid = SmartEarth.Cesium.Ellipsoid.MOON2000 |
| | | var leftCartographic = ellipsoid.cartesianToCartographic(leftPosition); |
| | | var rightCartographic = ellipsoid.cartesianToCartographic(rightPosition); |
| | | var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic(leftCartographic, rightCartographic, ellipsoid); |
| | | var distance = geodesic.surfaceDistance;// 分辨率 |
| | | rate.value =distance.toFixed(2); //分辨率 |
| | | }) |
| | | }; |
| | | const gridSwitch = () => { |
| | | if (!window.graticules) { |
| | | window.graticules = new SmartEarth.Cesium.Graticules( |
| | | earthCtrl.Viewer, |
| | | SmartEarth.Cesium.Color.PALEGREEN |
| | | ); |
| | | |
| | | earthCtrl.Viewer.scene.preUpdate.addEventListener(function () { |
| | | window.graticules.update(); |
| | | }); |
| | | } else { |
| | | window.graticules._enable = false; |
| | | } |
| | | // window.earthCtrl.wireframe = !window.earthCtrl.wireframe; |
| | | // gridIsshow.value = !gridIsshow.value; |
| | | // if (gridIsshow.value) { |
| | | // grid(10); |
| | | // // getHeight(); |
| | | // // createPrimitives(); |
| | | // } else { |
| | | // gridDel(); |
| | | // } |
| | | server.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); |
| | |
| | | return levelArray.length - 1; |
| | | }; |
| | | const createPrimitives = (degree) => { |
| | | // let ps = []; |
| | | // for (let longitude = -180; longitude <= 180; longitude += 10) { |
| | | // ps.push( |
| | | // Cesium.Cartesian3.fromDegreesArray([ |
| | | // longitude, |
| | | // -90, |
| | | // longitude, |
| | | // 0, |
| | | // longitude, |
| | | // 90, |
| | | // ]) |
| | | // ); |
| | | // } |
| | | // console.log(ps); |
| | | // let polylineGeometry = new Cesium.PolylineGeometry({ |
| | | // positions: ps, |
| | | // width: 5, |
| | | // id: "polylineGeometry", |
| | | // }); |
| | | // Viewer.scene.primitives.add( |
| | | // new Cesium.Primitive({ |
| | | // geometryInstances: new Cesium.GeometryInstance({ |
| | | // geometry: polylineGeometry, |
| | | // }), |
| | | // // vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT, |
| | | // appearance: new Cesium.EllipsoidSurfaceAppearance({ |
| | | // material: Cesium.Material.fromType("Stripe"), |
| | | // }), |
| | | // }) |
| | | // ); |
| | | var GridImagery = new Cesium.GridImageryProvider(); |
| | | var imageryLayers = Viewer.imageryLayers; |
| | | var GridImageryLayer = imageryLayers.addImageryProvider(GridImagery); // 添加网格图层 |
| | |
| | | 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()) { |
| | | //判断是否支持图像渲染像素化处理 |