cesium距離、面積量算

阿新 • • 發佈：2018-12-19

<!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="css/bootstrap.css">
    <script src="js/lib/jquery.min.js"></script>

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

  <style>
      @import url(Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </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 loadedModels = [];

    var tempPoints = [];
    var tempEntities = [];
    var tempPinEntities = [];
    var tempPinLon, tempPinLat;

    var handler = null;

    function clearEffects() {
        if (handler != null) {
            handler.destroy();
        }
    }

    //設定各種操作模式
    function SetMode(mode) {
        if (mode == "drawPloy")
        {
            tempPoints = [];
            handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
            handler.setInputAction(function (click) {
                var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
                if (cartesian) {
                    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
                    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                    tempPoints.push({ lon: longitudeString, lat: latitudeString });
                    var tempLength = tempPoints.length;
                    drawPoint(tempPoints[tempPoints.length-1]);
                    if (tempLength > 1) {
                        drawLine(tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1], true);
                    }
                } 
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

            handler.setInputAction(function (click) {
                var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
                if (cartesian) {
                    var tempLength = tempPoints.length;
                    if (tempLength < 3) {
                        alert('請選擇3個以上的點再執行閉合操作命令');
                    } else {
                        drawLine(tempPoints[0], tempPoints[tempPoints.length - 1], true);
                        drawPoly(tempPoints);
                        <!-- highLightAssetsInArea(tempPoints); -->
                        
                    
                var         ent =
                viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(((tempPoints[0].lon +(tempPoints[tempPoints.length-1].lon+ tempPoints[tempPoints.length-2].lon)/2)/2 ),
                    ((tempPoints[0].lat +(tempPoints[tempPoints.length-1].lat+tempPoints[tempPoints.length -2].lat)/2 )/2)),
                    label: {
                        text: SphericalPolygonAreaMeters(tempPoints) .toFixed(1) + '㎡',
                        font: '22px Helvetica',
                        fillColor: Cesium.Color.BLACK
                    }
                });
            tempEntities.push(ent);
                        tempPoints = [];
                        clearEffects();
                    }

                }
            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        }
        
       
        else if ("drawLine" == mode)
        {
            tempPoints = [];
            handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
            handler.setInputAction(function (click) {
                var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
                if (cartesian) {
                    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
                    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                    tempPoints.push({ lon: longitudeString, lat: latitudeString });
                    var tempLength = tempPoints.length;
                    drawPoint(tempPoints[tempPoints.length - 1]);
                    if (tempLength > 1) {
                        drawLine(tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1], true);
                    }
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            handler.setInputAction(function (click) {
                tempPoints = [];
                clearEffects();
            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        }
    }

    function drawPoint(point) {
        var entity = 
        viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),
            label: {
                        text: '',
                        font: '22px Helvetica'
                    },
            point: {
                pixelSize: 10,
                color: Cesium.Color.CHARTREUSE
            }
        });
        tempEntities.push(entity);
    }

    function drawLine(point1, point2, showDistance) {
        var entity =
        viewer.entities.add({
            polyline: {
                positions: [Cesium.Cartesian3.fromDegrees(point1.lon, point1.lat), Cesium.Cartesian3.fromDegrees(point2.lon, point2.lat)],
                width: 10.0,
                material: new Cesium.PolylineGlowMaterialProperty({
                    color: Cesium.Color.CHARTREUSE.withAlpha(.5)
                })
            }
        });
        tempEntities.push(entity);
        if (showDistance) {
            var w = Math.abs(point1.lon - point2.lon);
            var h = Math.abs(point1.lat - point2.lat);
            var offsetV = w >= h ? 0.0005 : 0;
            var offsetH = w < h ? 0.001 : 0;
            var distance = getFlatternDistance(point1.lat, point1.lon, point2.lat, point2.lon);
            entity =
                viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(((point1.lon + point2.lon) / 2) + offsetH,
                    ((point1.lat + point2.lat) / 2) + offsetV),
                    label: {
                        text: distance.toFixed(1) + 'm',
                        font: '22px Helvetica',
                        fillColor: Cesium.Color.WHITE
                    }
                });
            tempEntities.push(entity);
        }
    }

    function drawPoly(points) {
        var pArray = [];
        for (var i = 0; i < points.length; i ++) {
            pArray.push(points[i].lon);
            pArray.push(points[i].lat);
        }
        var entity =
        viewer.entities.add({
            polygon: {
                hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(pArray)),
                material: Cesium.Color.CHARTREUSE.withAlpha(.5)
            }
        });
        tempEntities.push(entity);
    }

    //計算兩點間距離
    function getFlatternDistance(lat1, lng1, lat2, lng2) {
        var EARTH_RADIUS = 6378137.0;    //單位M
        var PI = Math.PI;

        function getRad(d) {
            return d * PI / 180.0;
        }
        var f = getRad((lat1 + lat2) / 2);
        var g = getRad((lat1 - lat2) / 2);
        var l = getRad((lng1 - lng2) / 2);

        var sg = Math.sin(g);
        var sl = Math.sin(l);
        var sf = Math.sin(f);

        var s, c, w, r, d, h1, h2;
        var a = EARTH_RADIUS;
        var fl = 1 / 298.257;

        sg = sg * sg;
        sl = sl * sl;
        sf = sf * sf;

        s = sg * (1 - sl) + (1 - sf) * sl;
        c = (1 - sg) * (1 - sl) + sf * sl;

        w = Math.atan(Math.sqrt(s / c));
        r = Math.sqrt(s * c) / w;
        d = 2 * w * a;
        h1 = (3 * r - 1) / 2 / c;
        h2 = (3 * r + 1) / 2 / s;

        return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
    }

    //計算多邊形面積
    var earthRadiusMeters = 6371000.0;
    var radiansPerDegree = Math.PI / 180.0;
    var degreesPerRadian = 180.0 / Math.PI;
    function SphericalPolygonAreaMeters(points) {
        var totalAngle = 0;
        for (var i = 0; i < points.length; i++) {
            var j = (i + 1) % points.length;
            var k = (i + 2) % points.length;
            totalAngle += Angle(points[i], points[j], points[k]);
        }
        var planarTotalAngle = (points.length - 2) * 180.0;
        var sphericalExcess = totalAngle - planarTotalAngle;
        if (sphericalExcess > 420.0) {
            totalAngle = points.length * 360.0 - totalAngle;
            sphericalExcess = totalAngle - planarTotalAngle;
        } else if (sphericalExcess > 300.0 && sphericalExcess < 420.0) {
            sphericalExcess = Math.abs(360.0 - sphericalExcess);
        }
        return sphericalExcess * radiansPerDegree * earthRadiusMeters * earthRadiusMeters;
    }

    /*角度*/
    function Angle(p1, p2, p3) {
        var bearing21 = Bearing(p2, p1);
        var bearing23 = Bearing(p2, p3);
        var angle = bearing21 - bearing23;
        if (angle < 0) {
            angle += 360;
        }
        return angle;
    }
    /*方向*/
    function Bearing(from, to) {
        var lat1 = from.lat * radiansPerDegree;
        var lon1 = from.lon * radiansPerDegree;
        var lat2 = to.lat * radiansPerDegree;
        var lon2 = to.lon * radiansPerDegree;
        var angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));
        if (angle < 0) {
            angle += Math.PI * 2.0;
        }
        angle = angle * degreesPerRadian;
        return angle;
    }
 /**
     * 清除地圖痕跡
     */
    function clearDrawingBoard() {
    <!-- viewer.entities.removeAll(); -->
        var primitives = viewer.entities;
            for (i = 0; i <  tempEntities.length; i++) {
                primitives.remove(tempEntities[i]);
        }
        tempEntities=[];
        clearEffects();
    }

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

cesium距離、面積量算

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8"> <

ArcGIS For JS 距離與面積量算的三種方法

在用ArcGIS For JS開發地圖過程中，距離與面積的量算功能是比較常用的，下面我們來看看實現量算功能的三種方法。 1.GeometryService GeometryService是ArcGIS For JS提供的一種服務，需要依賴ArcGIS釋出的幾何服務（1）

ArcEngine c#開發距離面積量算（零碎）

using System; using System.IO ; using System.Windows.Forms ; using System.Reflection ; using ESRI.ArcGIS.Carto ; using ESRI.ArcGIS.Display ; using ESR

cesium地圖貼地量算工具效果

measure AS 效果圖 ima http pan alt span 分享詳細的實現過程見：這裏本篇實現cesium地圖量算工具功能，效果圖如下： cesium地圖貼地量算工具效果

如何快速測量CAD圖紙中的距離、面積

在繁忙的CAD繪圖工作中，我們常常需要測量各種不同CAD圖紙中的距離、面積。我們是否有更加方便的方法，一鍵操作快速測量CAD圖紙中的距離、面積呢？當然有。如此方便的快速測量方法，大大提高我們繪圖工作效率的同時，也減輕了我們的工作負擔。今天小編就在此給大傢俱體演示一下。演示操作如下：開啟測量距離、面積的CAD圖

ArcGIS Android API 應用開發之圖形繪製與長度面積量算

本文通過一個簡單的小Demo，向大家介紹如何使用ArcGIS Android API繪製點、線、面圖形，並且測量線的長度和多邊形的面積。首先來看一下程式執行的效果圖：實現上述功能，首先需要向地圖中新增一個GraphicsLayer，用來繪製Point、Poly

Cesium【空間距離】量算

網上提供了地表測距方法，這裡供上【空間】測距的方法：兩者區別是前者只是兩點間的水平距離，僅考慮到【經緯度】，後者還考慮到了【高度】。 /******************************************* */ //測量空間直線距離 /******

用字面量創建對象桌子，有屬性：長、寬、高、面積、體積有方法：求面積、求體積

屬性 func function table 方法 inf document AR return <script> var table = { length: 60, width: 40, height

Android Arcgis入門(七)、利用GeometryEngine座標轉換、計算距離與面積等

GeometryEngine是Arcgis的重要工具類，利用此工具類，可以計算地圖上的距離、面積，將點、線、面轉化為Json資料，將Json轉化為點線面，座標轉換作用非常強大。一、座標轉化將用到方法 GeometryEngine.project(Ge

轉 linux shell自定義函數(定義、返回值、變量作用域)介紹

shel 自己 lai cell define ber article clas ner linux shell 可以用戶定義函數，然後在shell腳本中可以隨便調用。下面說說它的定義方法，以及調用需要註意那些事項。一、定義shell函數(define function)

Python-基礎知識-數據類型、變量和常量

規則特殊數學不同類 pre cep rom 不能布爾值一、數據類型在Python中，能夠直接處理的數據類型有以下幾種： 1、整數 2、浮點數 3、字符串　　字符串是以單引號‘或雙引號"括起來的任意文本，比如‘abc‘，"xyz"等等。請註意，‘‘或""本身只是

JVM高級特性-四、垃圾收集算法

.html 執行 title itl 標記介紹 logs 算法 href 一、標記-清除算法　　標記清除算法是最基礎的收集算法，執行過程就名字一樣，分為兩個階段，標記和清除　　首先對需要回收的對象進行標記，標記完成後統一對已標記對象進行回收，具體標記過程的介紹可以　

拿代碼量算績效考核？別毀了程序員

name 谷歌 blog -s rep 矛盾沒有 fonts lac 原文鏈接雖然程序員都說自己是搬磚的，但很顯然，搬磚是很好考核的，一天搬多少塊磚是一目了然可以量化的，一天搬1000塊磚肯定比一天搬800塊磚的要厲害；而程序員卻很難以這樣的方式來考核，一天10

三維空間兩直線/線段最短距離、線段計算算法【轉】

發布 2.3 main position overflow 解析 get fix 三維 https://segmentfault.com/a/1190000006111226 d(ls,lt)=|sj−tj|=|s0−t0+(be

類的無參帶參方法、變量作用域、JavaDoc文檔註釋、包

並且函數定義語句 min() 可選 aaa null 棧內存構造方法如何定義類的方法　　public 返回值類型方法名(){ 　　　　//方法的主體 } return: 如果有返回值跳出方法、返回結果、如果一個方法有返回值的話，那調用這個方法

this、apply/call、bind、閉包、函數、變量復制

報錯 regex 變量提升 blog .get 定義技術 highlight ini 一、實際場景中抽象出的一個問題下面this各指向什麽？ var a = { b: fu

6、數組算法

spa nbsp reac 需要分隔 .so 翻轉 cnblogs 實現數組常用方法： 1.方法的作用 2.該方法是否需要傳參 3.該方法是否有返回值 4.原數組是否發生改變一、增刪替換 5個 ---原數組不變 var ary=[1,3,5]; var r

【H.264/AVC視頻編解碼技術具體解釋】十三、熵編碼算法（3）：CAVLC原理

統計視頻編解碼高效 png h264 轉化頻率遊程編碼而且《H.264/AVC視頻編解碼技術具體解釋》視頻教程已經在“CSDN學院”上線。視頻中詳述了H.264的背景、標準協議和實現，並通過一個實戰project的形式對H.264的標準進行解

php的註釋、變量、類型、常量、運算符、比較符、條件語句；

小數 array cas 單引號標識 php 規則 tro 特殊 php的註釋 1.// 2.# 3./* */ 變量變量是儲存信息的容器；變量規則： 1.變量以$開頭，後面跟名稱》》》$sum; 2.變量必須以字母或下滑先開頭，不能用數字開頭； 3.變量名稱對大小

int型、char*、string、的swap算法

char* spa es2017 ble ring mage 中間 turn char 1.倆整數，不使用中間變量交換其值： int& intswap(int& a, int& b) { b ^= a; a ^= b; b

cesium距離、面積量算

相關推薦