YOLOv12官版镜像踩坑总结，这些错误别再犯了
CesiumJSCesiumJS 是一个开源的 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图片图层视角恢复!doctypehtmlhtmllangenheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale
0/titleImageryProvider - 图片图层视角恢复/titlelinkrelstylesheethref../js/Cesium-
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/headbodydividcontainer/divbuttonclassbtn-reset-view恢复默认视角/button/bodyscriptsrc../js/Cesium-
112/Build/Cesium/Cesium.js/scriptscriptconstviewernewCesium.Viewer(container);constwest0;// 西经西经为负constsouth0;// 南纬南纬为负consteast10;// 东经东经为正constnorth10;// 北纬北纬为正// 创建图片图层constimageryProvidernewCesium.SingleTileImageryProvider({url:../img/test.jpg,rectangle:Cesium.Rectangle.fromDegrees(west,south,east,north),});constimageryLayerviewer.imageryLayers.addImageryProvider(imageryProvider);constresetView(){viewer.camera.flyTo({destination:Cesium.Cartesian
fromDegrees((westeast)/2,(southnorth)/2,
,duration:
0,});};constbtnResetViewdocument.querySelector(.btn-reset-view);btnResetView.addEventListener(click,resetView);resetView();/script/html指定长宽的图片图层视角恢复原点为图片图层的中心点!doctypehtmlhtmllangenheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale
0/titleImageryProvider - 指定长宽的图片图层视角恢复原点为图片图层的中心点/titlelinkrelstylesheethref../js/Cesium-
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/headbodydividcontainer/divbuttonclassbtn-reset-view恢复默认视角/button/bodyscriptsrc../js/Cesium-
112/Build/Cesium/Cesium.js/scriptscriptconstviewernewCesium.Viewer(container);// offset偏移量米// offset.xX 轴偏移东方向偏移// offset.yY 轴偏移北方向偏移functiontransformCoordinate(origin,offset){offset.x-offset.x;// 将原点经纬度转换为弧度constoriginLongitudeRadiansCesium.Math.toRadians(origin.longitude);constoriginLatitudeRadiansCesium.Math.toRadians(origin.latitude);// 创建原点的 Cartographic 对象constoriginCartographicnewCesium.Cartographic(originLongitudeRadians,originLatitudeRadians);// 将原点的 Cartographic 对象转换为笛卡尔坐标constoriginCartesianCesium.Ellipsoid.WGS
cartographicToCartesian(originCartographic);// 创建偏移量的 Cartesian3 对象偏移量在东和北方向consteastnewCesium.Cartesian3(offset.x,0,
;constnorthnewCesium.Cartesian3(0,offset.y,
;// 将偏移量投影到地球表面上constsurfaceNormalCesium.Cartesian
normalize(originCartesian,newCesium.Cartesian3());consteastSurfaceCesium.Cartesian
cross(surfaceNormal,Cesium.Cartesian
UNIT_Z,newCesium.Cartesian3());constnorthSurfaceCesium.Cartesian
cross(eastSurface,surfaceNormal,newCesium.Cartesian3());Cesium.Cartesian
normalize(eastSurface,eastSurface);Cesium.Cartesian
normalize(northSurface,northSurface);constoffsetEastCesium.Cartesian
multiplyByScalar(eastSurface,offset.x,newCesium.Cartesian3());constoffsetNorthCesium.Cartesian
multiplyByScalar(northSurface,offset.y,newCesium.Cartesian3());// 将投影的偏移量加到原点的笛卡尔坐标上constnewCartesianCesium.Cartesian
add(originCartesian,Cesium.Cartesian
add(offsetEast,offsetNorth,newCesium.Cartesian3()),newCesium.Cartesian3());// 将新的笛卡尔坐标转换回经纬度坐标constnewCartographicCesium.Ellipsoid.WGS
cartesianToCartographic(newCartesian);// 将弧度转换回角度constnewLongitudeCesium.Math.toDegrees(newCartographic.longitude);constnewLatitudeCesium.Math.toDegrees(newCartographic.latitude);return{longitude:newLongitude,latitude:newLatitude,};}// 图片图层的长宽constimageWidth200;// 单位为米constimageHeight100;// 单位为米// 图片图层的原点constoriginLongitude0;// 原点经度constoriginLatitude0;// 原点纬度constresulttransformCoordinate({longitude:originLongitude,latitude:originLatitude,},{x:imageWidth/2,y:imageHeight/2,},);constwestoriginLongitude-result.longitude;// 西经西经为负constsouthoriginLatitude-result.latitude;// 南纬南纬为负consteastoriginLongituderesult.longitude;// 东经东经为正constnorthoriginLatituderesult.latitude;// 北纬北纬为正// 创建图片图层constimageryProvidernewCesium.SingleTileImageryProvider({url:../img/test.jpg,rectangle:Cesium.Rectangle.fromDegrees(west,south,east,north),});viewer.imageryLayers.addImageryProvider(imageryProvider);// 添加一个点表示原点constentityviewer.entities.add({position:Cesium.Cartesian
fromDegrees(originLongitude,originLatitude),point:{pixelSize:5,color:newCesium.Color(0,1,0,
,},});// ----------------------------------------------------------------------------------------------------constreset(){viewer.camera.flyTo({destination:Cesium.Cartesian
fromDegrees(originLongitude,originLatitude,imageWidthimageHeight?imageWidth:imageHeight),duration:
0,});};constbtnResetViewdocument.querySelector(.btn-reset-view);btnResetView.addEventListener(click,reset);reset();/script/html
阴斗-阴斗应用
