当前位置：首页 > news >正文

CesiumJS 案例 P37：图片图层视角恢复、指定长宽的图片图层视角恢复（原点为图片图层的中心点）

news 2026/3/27 5:30:46

CesiumJS

CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图）

CesiumJS 官网：https://www.cesium.com/
CesiumJS 下载地址：https://www.cesium.com/platform/cesiumjs/
CesiumJS API 文档：https://cesium.com/learn/cesiumjs/ref-doc/index.html

图片图层视角恢复

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>ImageryProvider - 图片图层视角恢复</title><linkrel="stylesheet"href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css"/><style>*{margin:0;padding:0;box-sizing:border-box;}html, body{width:100%;height:100%;}.container{width:100%;height:100%;}.btn-reset-view{position:fixed;left:0px;top:0px;}</style></head><body><divid="container"></div><buttonclass="btn-reset-view">恢复默认视角</button></body><scriptsrc="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>constviewer=newCesium.Viewer("container");constwest=0;// 西经（西经为负）constsouth=0;// 南纬（南纬为负）consteast=10;// 东经（东经为正）constnorth=10;// 北纬（北纬为正）// 创建图片图层constimageryProvider=newCesium.SingleTileImageryProvider({url:"../img/test.jpg",rectangle:Cesium.Rectangle.fromDegrees(west,south,east,north),});constimageryLayer=viewer.imageryLayers.addImageryProvider(imageryProvider);constresetView=()=>{viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees((west+east)/2,(south+north)/2,1000000),duration:2.0,});};constbtnResetView=document.querySelector(".btn-reset-view");btnResetView.addEventListener("click",resetView);resetView();</script></html>

指定长宽的图片图层视角恢复（原点为图片图层的中心点）

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>ImageryProvider - 指定长宽的图片图层视角恢复（原点为图片图层的中心点）</title><linkrel="stylesheet"href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css"/><style>*{margin:0;padding:0;box-sizing:border-box;}html, body{width:100%;height:100%;}.container{width:100%;height:100%;}.btn-reset-view{position:fixed;left:0px;top:0px;}</style></head><body><divid="container"></div><buttonclass="btn-reset-view">恢复默认视角</button></body><scriptsrc="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>constviewer=newCesium.Viewer("container");// offset：偏移量（米）// offset.x：X 轴偏移，东方向偏移// offset.y：Y 轴偏移，北方向偏移functiontransformCoordinate(origin,offset){offset.x=-offset.x;// 将原点经纬度转换为弧度constoriginLongitudeRadians=Cesium.Math.toRadians(origin.longitude);constoriginLatitudeRadians=Cesium.Math.toRadians(origin.latitude);// 创建原点的 Cartographic 对象constoriginCartographic=newCesium.Cartographic(originLongitudeRadians,originLatitudeRadians);// 将原点的 Cartographic 对象转换为笛卡尔坐标constoriginCartesian=Cesium.Ellipsoid.WGS84.cartographicToCartesian(originCartographic);// 创建偏移量的 Cartesian3 对象，偏移量在东和北方向consteast=newCesium.Cartesian3(offset.x,0,0);constnorth=newCesium.Cartesian3(0,offset.y,0);// 将偏移量投影到地球表面上constsurfaceNormal=Cesium.Cartesian3.normalize(originCartesian,newCesium.Cartesian3());consteastSurface=Cesium.Cartesian3.cross(surfaceNormal,Cesium.Cartesian3.UNIT_Z,newCesium.Cartesian3());constnorthSurface=Cesium.Cartesian3.cross(eastSurface,surfaceNormal,newCesium.Cartesian3());Cesium.Cartesian3.normalize(eastSurface,eastSurface);Cesium.Cartesian3.normalize(northSurface,northSurface);constoffsetEast=Cesium.Cartesian3.multiplyByScalar(eastSurface,offset.x,newCesium.Cartesian3());constoffsetNorth=Cesium.Cartesian3.multiplyByScalar(northSurface,offset.y,newCesium.Cartesian3());// 将投影的偏移量加到原点的笛卡尔坐标上constnewCartesian=Cesium.Cartesian3.add(originCartesian,Cesium.Cartesian3.add(offsetEast,offsetNorth,newCesium.Cartesian3()),newCesium.Cartesian3());// 将新的笛卡尔坐标转换回经纬度坐标constnewCartographic=Cesium.Ellipsoid.WGS84.cartesianToCartographic(newCartesian);// 将弧度转换回角度constnewLongitude=Cesium.Math.toDegrees(newCartographic.longitude);constnewLatitude=Cesium.Math.toDegrees(newCartographic.latitude);return{longitude:newLongitude,latitude:newLatitude,};}// 图片图层的长宽constimageWidth=200;// 单位为米constimageHeight=100;// 单位为米// 图片图层的原点constoriginLongitude=0;// 原点经度constoriginLatitude=0;// 原点纬度constresult=transformCoordinate({longitude:originLongitude,latitude:originLatitude,},{x:imageWidth/2,y:imageHeight/2,},);constwest=originLongitude-result.longitude;// 西经（西经为负）constsouth=originLatitude-result.latitude;// 南纬（南纬为负）consteast=originLongitude+result.longitude;// 东经（东经为正）constnorth=originLatitude+result.latitude;// 北纬（北纬为正）// 创建图片图层constimageryProvider=newCesium.SingleTileImageryProvider({url:"../img/test.jpg",rectangle:Cesium.Rectangle.fromDegrees(west,south,east,north),});viewer.imageryLayers.addImageryProvider(imageryProvider);// 添加一个点表示原点constentity=viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(originLongitude,originLatitude),point:{pixelSize:5,color:newCesium.Color(0,1,0,1),},});// ----------------------------------------------------------------------------------------------------constreset=()=>{viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(originLongitude,originLatitude,imageWidth<imageHeight?imageWidth:imageHeight),duration:2.0,});};constbtnResetView=document.querySelector(".btn-reset-view");btnResetView.addEventListener("click",reset);reset();</script></html>