Cesium（五）剖面分析（仿火星科技）

原創 hpugisers 2020-06-08 18:04

剖面分析是三維分析的一種，僅在地形圖狀態下方可使用。作爲一個測繪人員剖面分析，大多在地形的狀態下高程變化，本文采用Ceisum和echart結合，下面講解剖面分析的實現過程。

效果圖：
在這裏插入圖片描述一、實現原理
1、根據點擊事件繪製剖面線段（貼地形），並獲取start、end兩點，爲線段空間插值做數據準備，採用viewer.scene.pickPosition(click.position);
2、線段插值，線段插值採用var cart = Cesium.Cartesian3.lerp(start, end, i / count, new Cesium.Cartesian3());
3、將插值的數據，賦值給chartData
二、主要函數
1、剖面分析函數封裝

function profileAnalyse(start, end) {
            var startPoint = Cesium.Cartographic.fromCartesian(start);
            var endPoint = Cesium.Cartographic.fromCartesian(end);
            profile.arrLX.push(0);
            profile.ponits.push(startPoint);
            profile.arrPoint.push(getDegrees(startPoint));
            profile.arrHB.push(startPoint.height);
            // 插值100個點，點越多模擬越精確，但是效率會低
            var count = 100;
            for (var i = 1; i < count; i++) {
                var cart = Cesium.Cartesian3.lerp(start, end, i / count, new Cesium.Cartesian3());
                var cartographicCart = Cesium.Cartographic.fromCartesian(cart);
                var disc = distance(profile.ponits[i - 1], cartographicCart);               
                profile.distance = profile.distance + disc;
                profile.ponits.push(cartographicCart);
                profile.arrLX.push(profile.arrLX[i - 1] + disc);

                profile.arrPoint.push(getDegrees(cart));
                profile.arrHB.push(cartographicCart.height);
            }
            profile.ponits.push(endPoint);
            profile.arrLX.push(profile.arrLX[profile.arrLX.length - 1] + distance(profile.ponits[profile.ponits.length-1], endPoint));
            profile.arrPoint.push(getDegrees(endPoint));
            profile.arrHB.push(endPoint.height);
            return profile;
        }

2、設置Echart數據函數封裝

function setEchartsData(e) {
            if (null != e && null != e.arrPoint) {
                $("#sectionChars").show(),
                    null == myChart && (myChart = echarts.init(document.getElementById("echartsView1"), "dark"));
                console.log(e.arrHB.value);
                var t = e.arrPoint,
                    chartData = {
                        grid: {
                            left: 10,
                            right: 10,
                            bottom: 10,
                            containLabel: !0
                        },
                        dataZoom: [{
                            type: "inside",
                            throttle: 50
                        }],
                        tooltip: {
                            trigger: "axis",
                            formatter: function (e) {
                                var a = "";
                                if (0 == e.length) return a;
                                e[0].value;
                                console.log(e);
                                var r = t[e[0].dataIndex];
                                console.log(r);
                                return a += "所在位置&nbsp;" + strFormat(r.x ) + "," + strFormat(r.y ) + "<br />距起點&nbsp;<label>" + haoutil.str.formatLength(e[0].axisValue) + "</label><br />" + e[0].seriesName + "&nbsp;<label style='color:" + e[0].color + ";'>" + haoutil.str.formatLength(e[0].value) + "</label><br />"
                            }
                        },
                        xAxis: [{
                            name: "行程",
                            type: "category",
                            boundaryGap: !1,
                            axisLine: {
                                show: !1
                            },
                            axisLabel: {
                                show: !1
                            },
                            data: e.arrLX
                        }],
                        yAxis: [{
                            type: "value",
                            axisLabel: {
                                rotate: 60,
                                formatter: "{value} 米"
                            }
                        }],
                        series: [{
                            name: "高程值",
                            type: "line",
                            smooth: !0,
                            symbol: "none",
                            sampling: "average",
                            itemStyle: {
                                normal: {
                                    color: "rgb(255, 70, 131)"
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "rgb(255, 158, 68)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgb(255, 70, 131)"
                                    }])
                                }
                            },
                            data: e.arrHB
                        }]
                    };
                myChart.setOption(chartData)
            }
        }

三、完整demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>剖面分析</title>
    <link href="../script/Cesium-1.56.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script src="../script/Cesium-1.56.1/Build/Cesium/Cesium.js"></script>
    <script src="../../Scripts/jquery-3.3.1.min.js"></script>
    <script src="../js/haoutil.js"></script>
    <script src="../../Scripts/incubator-echarts-master/dist/echarts.min.js"></script>
    <link href="../css/style.css" rel="stylesheet" />
    <style>
        .sectionChars {
            top: auto;
            width: 90%;
            height: 200px;
            bottom: 10px;
            left: 5%;
            top: auto;
            bottom: 10px;
            display: none
        }
    </style>
</head>
<body>
    <div id="sectionChars" class="infoview sectionChars">
        <div id="echartsView1" style="width:100%;height:100%"></div>
    </div>
    <div id="container"></div>
    <script>
        Cesium.Ion.defaultAccessToken = ' ';
        //創建地形圖層
        var rectangle = new Cesium.Rectangle(Cesium.Math.toRadians(5.9993076), Cesium.Math.toRadians(-0.00025749207),
            Cesium.Math.toRadians(7.00078), Cesium.Math.toRadians(1.001215));
        var terrainLayer = new Cesium.CesiumTerrainProvider({
            url: 'http://localhost:9002/api/wmts/terrain/671bf0e4425e421a8fbe701e2b4db959',
            requestWaterMask: true,
            credit: 'http://www.bjxbsj.cn',
        });
        //創建容器
        var viewer = new Cesium.Viewer('container', {
            selectionIndicator: false,
            infoBox: false,
            terrainProvider: terrainLayer
        });
        viewer.scene.globe.depthTestAgainstTerrain = true;
        //定位到目標地形
        viewer.scene.camera.flyTo({ destination: rectangle });
        //取消左鍵雙擊事件
        viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
        //具體事件的實現
        var ellipsoid = viewer.scene.globe.ellipsoid;
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
        var start, end;
        var profile = {
            arrHB: [],
            arrPoint: [],
            arrLX: [],
            ponits: [],
            distance: 0
        };
        var myChart;
        var draw = function (drawingMode) {
            var entityPolygon = null;
            var points = null;
            //取消左鍵雙擊事件
            viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
            //淹沒分析entity
            function createPoint(worldPosition) {
                var point = viewer.entities.add({
                    position: worldPosition,
                    point: {
                        pixelSize: 10,
                        color: Cesium.Color.YELLOW,
                        //disableDepthTestDistance: Number.POSITIVE_INFINITY,
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                    },
                });
                points = point;
                return point;
            }
            var drawingMode = drawingMode;
            function drawShape(positionData) {
                var shape;
                if (drawingMode === 'line') {
                    shape = viewer.entities.add({

                        polyline: {
                            positions: positionData,
                            clampToGround: true,
                            arcType: Cesium.ArcType.RHUMB,
                            material: Cesium.Color.GREEN,
                            width: 5,

                            //zIndex:1
                        }
                        //,show:false
                    });
                }
                else if (drawingMode === 'polygon') {
                    shape = viewer.entities.add({
                        polygon: {
                            hierarchy: positionData,
                            material: new Cesium.ColorMaterialProperty(Cesium.Color.LIGHTSKYBLUE.withAlpha(0.7))
                        }
                    });
                }
                return shape;
            }
            var activeShapePoints = [];
            var activeShape;
            var floatingPoint;
            handler.setInputAction(function (event) {
                if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
                    console.log('This browser does not support polylines on terrain.');
                    return;
                }
                // 使用viewer.scene.pickPosition` 來代替`viewer.camera.pickEllipsoid` 這樣當鼠標掠過terrain能得到正確的座標
                var earthPosition = viewer.scene.pickPosition(event.position);
                if (Cesium.defined(earthPosition)) {
                    if (activeShapePoints.length === 0) {
                        start = earthPosition;
                        floatingPoint = createPoint(earthPosition);
                        activeShapePoints.push(earthPosition);
                        var dynamicPositions = new Cesium.CallbackProperty(function () {
                            return activeShapePoints;
                        }, false);
                        activeShape = drawShape(dynamicPositions);
                    }
                    //計算距離並且進行疊加
                    profile.distance = profile.distance + distance(activeShapePoints[activeShapePoints.length - 1], earthPosition);
                    activeShapePoints.push(earthPosition);
                    createPoint(earthPosition);
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            handler.setInputAction(function (event) {
                if (Cesium.defined(floatingPoint)) {
                    var newPosition = viewer.scene.pickPosition(event.endPosition);
                    if (Cesium.defined(newPosition)) {
                        floatingPoint.position.setValue(newPosition);
                        activeShapePoints.pop();
                        activeShapePoints.push(newPosition);
                    }
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            function terminateShape() {
                activeShapePoints.pop();
                entityPolygon = drawShape(activeShapePoints);
                viewer.entities.remove(floatingPoint);
                viewer.entities.remove(activeShape);
                entityPolygon = null;
                floatingPoint = undefined;
                activeShape = undefined;
                activeShapePoints = [];
            }
            handler.setInputAction(function (event) {
                var length = activeShapePoints.length - 1;
                end = activeShapePoints[length];
                var data = profileAnalyse(start, end);
                console.log(data);
                setEchartsData(data);
                terminateShape();
            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

        }
        //剖面分析
        function profileAnalyse(start, end) {
            var startPoint = Cesium.Cartographic.fromCartesian(start);
            var endPoint = Cesium.Cartographic.fromCartesian(end);
            profile.arrLX.push(0);
            profile.ponits.push(startPoint);
            profile.arrPoint.push(getDegrees(startPoint));
            profile.arrHB.push(startPoint.height);
            // 插值100個點，點越多模擬越精確，但是效率會低
            var count = 100;
            for (var i = 1; i < count; i++) {
                var cart = Cesium.Cartesian3.lerp(start, end, i / count, new Cesium.Cartesian3());
                var cartographicCart = Cesium.Cartographic.fromCartesian(cart);
                var disc = distance(profile.ponits[i - 1], cartographicCart);               
                profile.distance = profile.distance + disc;
                profile.ponits.push(cartographicCart);
                profile.arrLX.push(profile.arrLX[i - 1] + disc);

                profile.arrPoint.push(getDegrees(cart));
                profile.arrHB.push(cartographicCart.height);
            }
            profile.ponits.push(endPoint);
            profile.arrLX.push(profile.arrLX[profile.arrLX.length - 1] + distance(profile.ponits[profile.ponits.length-1], endPoint));
            profile.arrPoint.push(getDegrees(endPoint));
            profile.arrHB.push(endPoint.height);
            return profile;
        }
        //計算兩點間的距離
        function distance(point1, point2) {
            //var point1cartographic = Cesium.Cartographic.fromCartesian(point1);
            //var point2cartographic = Cesium.Cartographic.fromCartesian(point2);
            /**根據經緯度計算出距離**/
            var geodesic = new Cesium.EllipsoidGeodesic();
            geodesic.setEndPoints(point1, point2);
            var s = geodesic.surfaceDistance;
            //返回兩點之間的距離
            s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2.height - point1.height, 2));
            return s;

        }
        //世界座標轉換爲經緯度
        function getDegrees(cart) {
            var cartographic = ellipsoid.cartesianToCartographic(cart);
            var lat = Cesium.Math.toDegrees(cartographic.latitude);
            var lng = Cesium.Math.toDegrees(cartographic.longitude);
            var alt = cartographic.height;
            return {x:lng,y:lat,z:alt};
        }
        //經緯度保留兩位小數
        function strFormat(str) {
            var strString = str.toString();
            var strs = strString.slice(0, strString.indexOf(".")+3);
            return strs;
        }
        //設置Echart數據
        function setEchartsData(e) {
            if (null != e && null != e.arrPoint) {
                $("#sectionChars").show(),
                    null == myChart && (myChart = echarts.init(document.getElementById("echartsView1"), "dark"));
                console.log(e.arrHB.value);
                var t = e.arrPoint,
                    chartData = {
                        grid: {
                            left: 10,
                            right: 10,
                            bottom: 10,
                            containLabel: !0
                        },
                        dataZoom: [{
                            type: "inside",
                            throttle: 50
                        }],
                        tooltip: {
                            trigger: "axis",
                            formatter: function (e) {
                                var a = "";
                                if (0 == e.length) return a;
                                e[0].value;
                                console.log(e);
                                var r = t[e[0].dataIndex];
                                console.log(r);
                                return a += "所在位置&nbsp;" + strFormat(r.x ) + "," + strFormat(r.y ) + "<br />距起點&nbsp;<label>" + haoutil.str.formatLength(e[0].axisValue) + "</label><br />" + e[0].seriesName + "&nbsp;<label style='color:" + e[0].color + ";'>" + haoutil.str.formatLength(e[0].value) + "</label><br />"
                            }
                        },
                        xAxis: [{
                            name: "行程",
                            type: "category",
                            boundaryGap: !1,
                            axisLine: {
                                show: !1
                            },
                            axisLabel: {
                                show: !1
                            },
                            data: e.arrLX
                        }],
                        yAxis: [{
                            type: "value",
                            axisLabel: {
                                rotate: 60,
                                formatter: "{value} 米"
                            }
                        }],
                        series: [{
                            name: "高程值",
                            type: "line",
                            smooth: !0,
                            symbol: "none",
                            sampling: "average",
                            itemStyle: {
                                normal: {
                                    color: "rgb(255, 70, 131)"
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "rgb(255, 158, 68)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgb(255, 70, 131)"
                                    }])
                                }
                            },
                            data: e.arrHB
                        }]
                    };
                myChart.setOption(chartData)
            }
        }
        draw('line');
    </script>
</body>
</html>

四、參考博文
1、https://xiaozhuanlan.com/topic/2108573649
2、https://blog.csdn.net/qq_34149805/article/details/78393540
3、https://blog.csdn.net/u013517229/article/details/84563952
4、http://cesium.marsgis.cn/cesium-example/editor.html#42_measure_section

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Cesium對3dtile單個feature進行特效處理

cesium中對3dtile做特效處理的時候，目前只能對所有3dtile處理或者小區域內的3dtile（例如3dtile挖洞，淹沒分析等）進行處理，本身上還是對drawcommand進行着色器的部分的改動。通常所作我們只能對選中的

hpugisers 2020-07-04 10:34:37

生成Cesium APP

1.首先去Cesium官網下載CesiumJS：https://cesiumjs.org/downloads/ 2.下載Visual Studio2017並安裝 Node.js，使用.NET的移動開發，使用JavaScript的移動開發相

dtwd886 2020-06-20 16:26:06

關於對數深度的一些知識

這些知識忘了在哪粘貼的，希望原作者看到可以留言 OpenGL渲染時，頂點着色器輸出的w值爲是 W = -Z; 而深度值是 D = Z * ( n + f ) / ( n - f ) + 2.0 * f * n / (n

hpugisers 2020-06-20 00:27:02

Cesium分屏對比實現

不向現實低頭，不服輸，永不放棄學習 送給每一位戰鬥的工程師，這幾天寫了一個簡單的分屏效果，在這記錄一下，希望能幫到有緣人，原理很簡單就是兩個Viewer，話不多說直接上代碼 /* * @Author: your name

hpugisers 2020-06-20 00:27:02

cesium源碼研究之VertexArray（VAO對象）生成的兩種方式

1、方式（利用內置primitive圖元） var polygon = new Cesium.PolygonGeometry({ polygonHierarchy: new Cesium.Pol

hpugisers 2020-06-19 23:09:31

cesium源碼研究之uniformMap的自動更新機制

在利用drawcommand繪製圖形的時候，會通過uniformMap傳遞變量到着色器，如果用到異步加載圖片生成紋理再傳遞給uniformMap,這個時候需要需要注意return的方式。應先判斷需要傳值的紋理是否爲null或者un

hpugisers 2020-06-19 23:09:31

Cesium之天空盒對應方位

下文講解一下關於Cesium的天空盒具體方位。 天空盒對應圖 一個立方體展開圖,相當於一個站在negz的位置，背對電腦屏幕，對應關係如下 negz→down posx→right negx→left posy→back pos

hpugisers 2020-06-19 23:09:31

Cesium(三)在Terrain動態繪製線和麪

在繪製線和麪在Ceisum中GitHub中以有輪子（drawhelper），該輪子僅能繪製在2D層次，在Terrain上則不能繪製。在Terrain上繪製線和麪，是進行淹沒分析和剖面分析的第一步，在這裏在展示如何在Terrain

hpugisers 2020-06-08 18:04:31

Cesium&&helloCesium（一）

在今後的一段時間準備寫一系列關於Ceisum的學習教程，Ceisum是一款開源的前端三維api，近幾年比較火。在這裏首先介紹以下如何學習一個新的地圖api，只要是地圖一類的api有一個特點需要一個容器，例如OL或者leaflet

hpugisers 2020-06-08 18:04:31

Cesium（四）常用代碼總結

1、陰影效果 viewer.shadows = true; 2、取消左鍵雙擊事件 viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.Scre

hpugisers 2020-06-08 18:04:31

Cesium（二）加載Cesium3DTileset&Cesium3DTileFeature模型高亮顯示&實時顯示經緯度以及高度

下面是三個示例，分別是加載Cesium3DTileset、點擊模型，使得模型高亮、實時顯示經緯度，所有代碼均借鑑網上已有的代碼，這裏只做演示。 效果gif 一、加載Cesium3DTileset //加載三維模型灰模 var

hpugisers 2020-06-08 18:04:31

關於WebGL報錯l-value required (can't modify a uniform "color")

hpugisers 2020-04-21 07:53:56

關於Cesium拖json文件上傳的插件

hpugisers 2020-03-13 11:43:50

cesium源碼研究關於ShaderSource的replaceMain方法巧妙用處

hpugisers 2020-02-21 07:31:05

Cesium對3dtile單個feature進行特效處理

cesium中對3dtile做特效處理的時候，目前只能對所有3dtile處理或者小區域內的3dtile（例如3dtile挖洞，淹沒分析等）進行處理，本身上還是對drawcommand進行着色器的部分的改動。通常所作我們只能對選中的

hpugisers 2020-07-04 10:34:37