Cesium 海拔 经纬度 展示

最新推荐文章于 2024-08-01 15:30:17 发布
最新推荐文章于 2024-08-01 15:30:17 发布
阅读量2.6k 收藏 5
点赞数
分类专栏： cesium 文章标签： cesium 海拔 经度 维度

通过参考http://gishome.net.cn/cesium/cesium-coordinates/，整理修改后

 

<!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>Hello World!</title>
  <link rel="stylesheet" href="Bootstrap/css/bootstrap.css">
    <script src="Bootstrap/js/jquery-1.11.3.min.js"></script>

  <script src="../Build/Cesium/Cesium.js"></script>
  <script src="Bootstrap/js/bootstrap.min.js"></script>

  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
      #_coordinates{
      position:absolute;
      bottom:20px;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
      <button type="button" class="btn btn-info" id="moni" style="position:absolute;top:20px;" οnclick="SetMode('drawPloy')">面积</button>
      <button type="button" class="btn btn-info"  style="position:absolute;top:20px;left: 95px;" οnclick="SetMode('drawLine')">测量</button>
      <button type="button" class="btn btn-info"  style="position:absolute;top:20px;left: 185px;" οnclick="clearDrawingBoard()">清除</button>

  <script>
    
    var viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否显示动画控件
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: true, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: true, //是否显示点击要素之后显示的信息
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
            layer: "tdtBasicLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false
        })
    });
    var scene = viewer.scene;

       //地图底部工具栏显示地图坐标信息
        var elementbottom = document.createElement("div");
        $("#cesiumContainer").append(elementbottom);
        elementbottom.className = "mapfootBottom";
        var coordinatesDiv = document.getElementById("_coordinates");
        if (coordinatesDiv) {
            coordinatesDiv.style.display = "block";
        }
        else {
            //var scale;
            var _divID_coordinates = "_coordinates";
            coordinatesDiv = document.createElement("div");
            coordinatesDiv.id = _divID_coordinates;
            coordinatesDiv.className = "map3D-coordinates";
            coordinatesDiv.innerHTML = "<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;color:#edffff;'>暂无坐标信息</span>";
            //document.getElementById(this.mapDivId).appendChild(coordinatesDiv);
            $("#cesiumContainer").append(coordinatesDiv);
            var handler3D = new Cesium.ScreenSpaceEventHandler(
                viewer.scene.canvas);
            handler3D.setInputAction(function(movement) {
                var pick= new Cesium.Cartesian2(movement.endPosition.x,movement.endPosition.y);
                if(pick){
                    var cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(pick), viewer.scene);
                    if(cartesian){
                        //世界坐标转地理坐标（弧度）
                        var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                        if(cartographic){
                            //海拔
                            var height = viewer.scene.globe.getHeight(cartographic);
                            //视角海拔高度
                            var he = Math.sqrt(viewer.scene.camera.positionWC.x * viewer.scene.camera.positionWC.x + viewer.scene.camera.positionWC.y * viewer.scene.camera.positionWC.y + viewer.scene.camera.positionWC.z * viewer.scene.camera.positionWC.z);
                            var he2 = Math.sqrt(cartesian.x * cartesian.x + cartesian.y * cartesian.y + cartesian.z * cartesian.z);
                            //地理坐标（弧度）转经纬度坐标
                            var point=[ cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
                            if(!height){
                                height = 0;
                            }
                            if(!he){
                                he = 0;
                            }
                            if(!he2){
                                he2 = 0;
                            }
                            if(!point){
                                point = [0,0];
                            }
                            coordinatesDiv.innerHTML = "<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;color:#edffff;'>"+"视角海拔高度:"+(he - he2).toFixed(2)+"米"+"&nbsp;&nbsp;&nbsp;&nbsp;海拔:"+height.toFixed(2)+"米"+"&nbsp;&nbsp;&nbsp;&nbsp;经度：" + point[0].toFixed(6) + "&nbsp;&nbsp;纬度：" + point[1].toFixed(6)+ "</span>";
                        }
                    }
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        }

  </script>
</body>
</html>

失独者
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Cesium 实战 12 - 根据经纬度获取高度
linzi19900517的博客
01-22 1048
Cesium 实战 - 根据经纬度获取高度。
cesium的经纬度显示
ljtcrx的博客
05-13 257
【代码】cesium的经纬度显示。
cesium教程-3（显示高度,海拔,经度,纬度）
weshmily前端
09-14 4380
老规矩先看效果 解析： 在Cesium里面，我们可以通过Cesium.ScreenSpaceEventHandler的实例化对象的setInputAction方法绑定鼠标事件： var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); //Cesium.ScreenSpaceEventType.MOUSE_MOVE ：监听鼠标移动 handler.setInputAction(function(event) { }, Cesium.
cesium 三维点击地图获取经纬度坐标
最新发布
ctf_0226的博客
08-01 357
【代码】cesium 三维点击地图获取经纬度坐标。
Cesium已知一个经纬度获取其高度
小灰灰的博客
12-26 1044
Cesium已知一个经纬度获取其高度
【Cesium基础】从3dtiles 采高度，已知根据经纬度点集
警警的博客
05-16 633
今天，明天一定要贴地。
Cesium 地图显示鼠标经纬度和高度
02-23
本项目“Cesium地图显示鼠标经纬度和高度”是基于HTML前端技术实现的一个基本功能，允许用户在交互地图时查看鼠标位置的经度、纬度以及海拔高度。下面我们将深入探讨这一功能的实现及其相关技术。 首先，我们需要...
64.（cesium篇）cesium根据坐标位置获取地形高度.zip
06-13
该资源包的执行效果查看地址：...“地图之家”专栏中的“64.（cesium篇）cesium根据坐标位置获取地形高度”。如下载有问题，可联系博主。 解压密码：cesium
Cesium.js 根据经纬度 获取高程信息
weixin_43974540的博客
07-21 2951
由api可知，通过sampleTerrain，可实现获取高程信息，如图 同时，通过异步加载形式，获取return的数据 function getHeigthByLngLat11(lng, lat ){ let positions = Cesium.Cartographic.fromDegrees(lng,lat);//经纬度转为世界坐标 //异步函数 return new Promise((resolve, reject)=>{ new Cesium
Cesium获取经度 ，纬度，高度
08-02 760
实例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取坐标转经纬度</title> <!--引入Cesium框架和部件css--> <script src...
获取经纬度点的高程值
12-27
输入经纬度值，可以获取该点对应的高程值，代码中增加了redis数据库的使用，用于进度条，增加omp线程优化，输入在json文件里面配置
Cesium高程提取代码（分多种情况）
08-25
不采用鼠标点击的被动式获取方式，通过插值等等方式获取离散点，借助cesium的api获取直线、范围面的高程，只需要经纬度坐标即可，分不同情况调用不同接口，放上代码与截图说明
Cesium 点击获取模型经纬度、高程
qq_35956444的博客
08-28 883
【代码】Cesium 点击获取模型经纬度、高程。
cesium 获取当前经纬度和视角还有当前level层级
老段的CSDN的博客
05-18 3370
cesium 获取当前经纬度和视角还有当前level层级 // 跟随鼠标获取经纬度和视角高度 var longitude_show=document.getElementById('longitude_show'); var latitude_show=document.getElementById('latitude_show'); var altitude_show=document.getElementById('altitude_sho
Cesium计算地形高度
qq_35956444的博客
05-31 500
/根据经纬度计算出地形高度。
Cesium已知经纬度获取其高度
小灰灰的博客
12-10 1226
Cesium已知经纬度获取其高度
Cesium 各高度的获取
热门推荐
资深三维GIS开发
05-15 1万+
1、地形高度的获取 方法a: 通过事件获取到像素坐标，然后转为世界坐标，再求地形高度 var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); handler.setInputAction(function(evt) { var ray=viewer.camera.getPickRay(evt.position); ...
cesium实现经纬度网格
03-31
Cesium可以使用实体和图元来创建经纬度网格。以下是一个示例代码，它创建了一个经度和纬度为10度的网格： ```javascript // 创建一个Cartesian3对象，表示网格的中心位置 var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883); // 创建网格的实体对象 var grid = new Cesium.Entity({ name: 'Lat/Long Grid', show: true, position: center, billboard: { image: './images/grid.png', scale: 1.0 } }); // 创建经纬度网格的图元 var latLongGrid = new Cesium.GridMaterialProperty({ color: new Cesium.Color(1.0, 1.0, 1.0, 0.2), cellAlpha: 0.1, lineCount: new Cesium.Cartesian2(180, 90), lineThickness: new Cesium.Cartesian2(1.0, 1.0), lineOffset: new Cesium.Cartesian2(0.0, 0.0) }); // 将经纬度网格图元添加到实体对象中 grid.addProperty('material', latLongGrid); // 将实体对象添加到场景中 viewer.entities.add(grid); ``` 在这个示例中，`Cesium.GridMaterialProperty`类用于创建经纬度网格的图元，其中`lineCount`属性确定网格线的数量，`lineThickness`属性确定网格线的宽度，`lineOffset`属性确定网格线的偏移量。最后，将经纬度网格图元添加到实体对象中，并将实体对象添加到Cesium场景中。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值