cesium-定位方法
2022/3/27 23:23:16
本文主要是介绍cesium-定位方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
cesium-定位方法
视图定位-定位到点
<!DOCTYPE html> <html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8"/> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!-- Make the application on mobile take up the full browser screen and disable user scaling. --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/> <title>cesium定位方法</title> <script src="../lib/Cesium-1.89/Build/Cesium/Cesium.js"></script> <style> @import url(../lib/Cesium-1.89/Build/Cesium/Widgets/widgets.css); html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div style="display: -webkit-flex;display: flex;width: 100%;height: 100%"> <div style="width: 90%;height: 100%"> <div id="cesiumContainer"></div> </div> <div style="width: 10%;height: 100%;background-color: #d3d3d3;padding: 30px"> <button onclick="viewerFlyToLonLat(110.0, 35.8, 500)">视图定位-定位到点</button> </div> </div> <script> //天地图token let TDT_tk = "token"; //Cesium token let cesium_tk = "cesium token"; //天地图影像 let TDT_IMG_C = "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles&tk=" + TDT_tk; //标注 let TDT_CIA_C = "http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles&tk=" + TDT_tk; //初始页面加载 Cesium.Ion.defaultAccessToken = cesium_tk; let viewer = new Cesium.Viewer('cesiumContainer', { geocoder: false, // 位置查找工具 baseLayerPicker: false,// 图层选择器(地形影像服务) timeline: false, // 底部时间线 homeButton: false,// 视角返回初始位置 fullscreenButton: false, // 全屏 animation: false, // 左下角仪表盘(动画器件) sceneModePicker: false,// 选择视角的模式(球体、平铺、斜视平铺) navigationHelpButton: false, //导航帮助按钮 // infoBox: false,//信息框控件 // navigationInstructionsInitiallyVisible: false, //导航说明初始可见 // shouldAnimate: false, //动画 // requestWaterMask: false, //请求水面罩 // requestVertexNormals: false, //请求顶点法线 imageryProvider: new Cesium.WebMapTileServiceImageryProvider({ url: TDT_IMG_C, layer: "tdtImg_c", style: "default", format: "tiles", tileMatrixSetID: "c", subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], tilingScheme: new Cesium.GeographicTilingScheme(), tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"], maximumLevel: 50, show: false }) }); //调用影响中文注记服务 viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ url: TDT_CIA_C, layer: "tdtImg_c", style: "default", format: "tiles", tileMatrixSetID: "c", subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], tilingScheme: new Cesium.GeographicTilingScheme(), tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"], maximumLevel: 50, show: false })); // 去除版权信息 viewer._cesiumWidget._creditContainer.style.display = "none"; let entity = null; /** * 视图定位方法,定位到点 * @param lon 经度 * @param lat 纬度 * @param alt 范围(相机距离中心点的位置为5000) */ function viewerFlyToLonLat(lon, lat, alt) { if (entity) viewer.entities.remove(entity); entity = new Cesium.Entity({ id: 'flyTmp', position: Cesium.Cartesian3.fromDegrees(lon, lat), point: { pixelSize: 10, color: Cesium.Color.WHITE.withAlpha(0.9), outlineColor: Cesium.Color.WHITE.withAlpha(0.9), outlineWidth: 1 } }); viewer.entities.add(entity); viewer.flyTo(entity, { offset: { heading: Cesium.Math.toRadians(0.0), //默认方向为正北,正角度为向东旋转,即水平选装,也叫偏航角 pitch: Cesium.Math.toRadians(-50), // 俯仰角 range: alt } }); } </script> </body> </html>
相机定位-定位到点
/** * 相机定位方法,定位到点 * @param lon 经度 * @param lat 纬度 * @param alt 范围(相机距离中心点的位置为5000) */ function cameraFlyToLonLat(lon, lat, alt) { viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(lon, lat, alt), orientation: { heading: Cesium.Math.toRadians(0.0), pitch: Cesium.Math.toRadians(-25.0), roll: 0.0 } }); }
视图定位-定位到范围
/** * 视图定位方法,定位到范围 * @param rect 范围数组(最西、最南、最东、最北) */ function viewerFlyToRange(rect) { if (locationRectEntity) viewer.entities.remove(locationRectEntity); locationRectEntity = viewer.entities.add({ name: 'locationRectangle', id: 'locationRectangle', rectangle: { coordinates: Cesium.Rectangle.fromDegrees(rect[0], rect[1], rect[2], rect[3]), material: Cesium.Color.GREEN.withAlpha(1.0), height: 10.0, outline: false } }); let flyPromise = viewer.flyTo(locationRectEntity, { duration: 5, offset: new Cesium.HeadingPitchRange(0.0, Cesium.Math.toRadians(-20.0)) }); }
相机定位-定位到范围
/** * 相机定位方法,定位到范围 * @param rect 范围数组(最西、最南、最东、最北) */ function cameraFlyToRange(rect) { viewer.camera.flyTo({ destination: Cesium.Rectangle.fromDegrees(rect[0], rect[1], rect[2], rect[3]), duration: 5, orientation: { heading: Cesium.Math.toRadians(0.0), pitch: Cesium.Math.toRadians(-25.0), roll: 0.0 } }); }
视图定位-定位到范围-计算中心
/** * 视图定位方法,定位到范围,并重新计算距离 * @param rect */ function viewerFlyToRangeAndCenter(rect) { if (locationRectEntity) viewer.entities.remove(locationRectEntity); locationRectEntity = viewer.entities.add({ name: 'locationRectangle', id: 'locationRectangle', rectangle: { coordinates: Cesium.Rectangle.fromDegrees(rect[0], rect[1], rect[2], rect[3]), material: Cesium.Color.GREEN.withAlpha(1.0), height: 10.0, outline: false } }); let flyPromise = viewer.flyTo(locationRectEntity, { duration: 5, offset: new Cesium.HeadingPitchRange(0.0, Cesium.Math.toRadians(-20.0)) }); //倾斜后记录相机到矩形中心点的距离,然后再根据倾斜角度,计算新的距离, // 再viewer.flyto的完成后,再通过中心点离相机的距离,使用zoomTo来拉近一下距离 flyPromise.then(function () { let center = Cesium.Rectangle.center(Cesium.Rectangle.fromDegrees(rect[0], rect[1], rect[2], rect[3])); let car = Cesium.Cartesian3.fromRadians(center.longitude, center.latitude); let range = Cesium.Cartesian3.distance(car, viewer.camera.position) * Math.cos(20); viewer.zoomTo(locationRectEntity, new Cesium.HeadingPitchRange(0.0, Cesium.Math.toRadians(-20.0), range)); }); }
本文转自 https://jackie-sun.blog.csdn.net/article/details/122380900?spm=1001.2014.3001.5502,如有侵权,请联系删除。
这篇关于cesium-定位方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升