• 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 {
              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;" onclick="SetMode('drawPloy')">面积</button>
          <button type="button" class="btn btn-info"  style="position:absolute;top:20px;left: 95px;" onclick="SetMode('drawLine')">测量</button>
          <button type="button" class="btn btn-info"  style="position:absolute;top:20px;left: 185px;" onclick="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>

  • 相关阅读:
    编程时候底层函数的来源
    (转)线程相关的东东
    (转)CreateThread与_beginthread,内存泄漏为何因(原帖排版有些不好 ,所以我稍微整理下)
    测试CDockablePane。 测试他的最基本的功能。
    (转)单例模式(Singleton)的常见应用场景
    (转)http 之session和cookie
    Palindrome Linked List
    Basic Calculator II
    (转)外部排序
    (转)eclipse调试java程序的九个技巧
  • 原文地址:https://www.cnblogs.com/heguxin/p/10096072.html
Copyright © 2020-2023  润新知