顯示源代碼
                地形剖面
                 開發(fā)文檔
                            <!DOCTYPE html>
                <html lang="en">
                    <head>
                        <meta charset="UTF-8" />
                        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                        <script src="http://bigemap.com/offline_data/newjunbiao/vue.js"></script>
                        <link
                            href="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
                            rel="stylesheet"
                        />
                        <script src="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
                        <!-- elementui -->
                        <script src="http://bigemap.com/offline_data/newjunbiao/elementui.js"></script>
                        <link
                            rel="stylesheet"
                            href="http://bigemap.com/offline_data/newjunbiao/elementui.css"
                        />
                        <!-- 引入echarts -->
                        <script src="/offline_data/echarts.min.js"></script>
                        <title>地形剖面分析</title>
                        <style>
                            * {
                                margin: 0;
                                padding: 0;
                            }
                            html,
                            body {
                                width: 100%;
                                height: 100%;
                            }
                            #app {
                                width: 100%;
                                height: 100%;
                            }
                            #baseMap {
                                width: 100%;
                                height: 65%;
                            }
                            #echartsMap {
                                width: 100%;
                                height: 35%;
                                background-color: rgba(39, 44, 54, 0.9);
                                overflow: hidden;
                            }
                            .tools {
                                position: absolute;
                                z-index: 9;
                                top: 40px;
                                right: 60px;
                                width: 200px;
                                height: 40px;
                                display: flex;
                                align-items: center;
                            }
                        </style>
                    </head>
                    <body>
                        <div id="app">
                            <div id="baseMap"></div>
                            <div id="echartsMap"></div>
                        </div>
                        <script>
                            window.viewer = null;
                            let linesArr = [
                                [102.1261597, 30.76446533],
                                [102.2689819, 30.78643799],
                                [102.3019409, 30.84686279],
                                [102.3912048, 30.96221924],
                                [102.5354004, 30.98144531],
                                [102.6425171, 31.13800049],
                                [102.6287842, 31.26434326],
                                [102.9542542, 31.28082275],
                                [103.0133057, 31.04736328],
                                [102.7867127, 30.8454895],
                                [102.9212952, 30.6312561],
                                [103.2220459, 30.66558838],
                                [103.2110596, 30.94985962],
                                [103.3909607, 30.98007202],
                            ];
                            let newArr = new Array(14).fill(0);
                            let lb = newArr.map((v, i) => {
                                return `${i + 1}號點(diǎn)位`;
                            });
                            window.posArr = [];
                            window.onload = () => {
                                new Vue({
                                    el: "#app",
                                    data() {
                                        return {
                                            showText: "暫無高程數(shù)據(jù)信息",
                                            echartsData: [],
                                            labelData: [],
                                            tableShow: false,
                                        };
                                    },
                                    mounted() {
                                        this.initMap();
                                    },
                                    methods: {
                                        //初始化地圖
                                        initMap() {
                                            var _this = this;
                                            bmgl.Config.HTTP_URL =
                                                "http://ua.bigemap.com:30081/bmsdk/";
                                            viewer = new bmgl.Viewer("baseMap", {
                                                mapId: "bigemap.dc-satellite",
                                                infoBox: false,
                                                selectionIndicator: false,
                                                requestRenderMode: false,
                                                // terrainId指定離線服務(wù)器上發(fā)布的高程服務(wù)的id
                                                terrainId: "bigemap.dc-terrain",
                                            });
                                            if (
                                                bmgl.FeatureDetection.supportsImageRenderingPixelated()
                                            ) {
                                                viewer.resolutionScale =
                                                    window.devicePixelRatio;
                                            }
                                            //開啟抗鋸齒,讓圖像更加順滑
                                            viewer.scene.postProcessStages.fxaa.enabled = true;
                                            viewer.terrainProvider.readyPromise
                                                .then(function (terrainProvider) {
                                                    console.log("地形加載完成");
                                                    // 在這里執(zhí)行地形加載完成后的操作
                                                    _this.loadLines();
                                                })
                                                .otherwise(function (error) {
                                                    console.error("地形加載失敗", error);
                                                });
                                            // this.loadLines();
                                        },
                                        loadLines() {
                                            let bl = viewer.entities.add({
                                                polyline: {
                                                    positions: bmgl.Cartesian3.fromDegreesArray(
                                                        linesArr.flat()
                                                    ),
                                                    width: 4.0,
                                                    material:
                                                        bmgl.Color.fromCssColorString(
                                                            "#009efc"
                                                        ),
                                                    clampToGround: true,
                                                },
                                            });
                
                                            viewer.camera.flyTo({
                                                destination: bmgl.Cartesian3.fromDegrees(
                                                    102.84814348201657,
                                                    31.097350000050334,
                                                    11074.133580966802
                                                ),
                                                orientation: {
                                                    heading: 0.22449683617942018,
                                                    pitch: -0.3883918330117684,
                                                    roll: 6.2678425339793336,
                                                },
                                                complete: () => {
                                                    setTimeout(()=>{
                                                        this.computedHeight();
                                                    },1000)
                                                },
                                            });
                                        },
                
                                        computedHeight() {
                                            linesArr.forEach((v, i) => {
                                                let cartesian = bmgl.Cartographic.fromDegrees(
                                                    v[0],
                                                    v[1]
                                                );
                                                window.posArr.push(cartesian);
                                            });
                                            // console.log(posArr, "linesArr");
                                            this.getNowheight(window.posArr, 0);
                                        },
                                        //根據(jù)提供的位置計(jì)算高度
                                        getNowheight(posArr, count) {
                                            let item = posArr.shift();
                                            // console.log("count", count);
                                            var _this = this;
                                            if (item) {
                                                let height = viewer.scene.globe.getHeight(item);
                                                // console.log(`height`, height);
                                                if (height < 0 || !height) {
                                                } else {
                                                    _this.echartsData.push({
                                                        name: `${lb[count]}`,
                                                        value: parseFloat(height.toFixed(2)),
                                                    });
                                                }
                                                count += 1;
                                                _this.getNowheight(window.posArr, count);
                                            } else {
                                                _this.createEaherts(
                                                    _this.labelData,
                                                    _this.echartsData
                                                );
                                            }
                                        },
                                        createEaherts(labelData, optionData) {
                                            if(optionData.length == 0) return
                                            let chartDom =
                                                document.getElementById("echartsMap");
                                            let myChart = echarts.init(chartDom);
                                            let option;
                                            option = {
                                                title: {
                                                    text: "點(diǎn)位對應(yīng)高程值",
                                                    textStyle: {
                                                        color: "#fff",
                                                        fontFamily: "楷體",
                                                        fontStyle: "normal",
                                                        fontWeight: "bold",
                                                    },
                                                    left: "center",
                                                    top: "2px",
                                                },
                                                grid: {
                                                    left: 15,
                                                    right: 15,
                                                    top: 44,
                                                    bottom: 10,
                                                    containLabel: true,
                                                },
                                                tooltip: {
                                                    trigger: "item",
                                                    formatter: (res) => {
                                                        let index = res.dataIndex;
                                                        let pos = linesArr[index];
                                                        let val = res.data.value;
                                                        // console.log("結(jié)果",index,pos,val);
                                                        let string = `${index + 1}點(diǎn)位信息如下:<br>` +
                                                            `經(jīng)度:${pos[0]}<br>` +
                                                            `緯度:${pos[1]}<br>` +
                                                            `高度:${val}米`
                                                        // console.log("結(jié)果",index,pos,val,string);    
                                                        return string;
                                                        ;
                                                    },
                                                },
                                                xAxis: {
                                                    type: "category",
                                                    data: lb,
                                                    axisLabel: {
                                                        interval: 0,
                                                        rotate: 40,
                                                        color: "#ffffff",
                                                        fontSize: 12,
                                                    },
                                                },
                                                yAxis: {
                                                    type: "value",
                                                    name: "高程值",
                                                    axisLabel: {
                                                        color: "#ffffff",
                                                        fontSize: 12,
                                                    },
                                                    nameTextStyle: {
                                                        color: "#fff",
                                                        fontFamily: "楷體",
                                                        fontStyle: "normal",
                                                        fontWeight: "bold",
                                                    },
                                                },
                                                series: [
                                                    {
                                                        data: optionData,
                                                        type: "bar",
                                                        showBackground: true,
                                                        backgroundStyle: {
                                                            color: "rgba(180, 180, 180, 0.2)",
                                                        },
                                                        label: {
                                                            color: "white",
                                                            fontSize: 12,
                                                        },
                                                        itemStyle: {
                                                            color: new echarts.graphic.LinearGradient(
                                                                0,
                                                                0,
                                                                0,
                                                                1,
                                                                [
                                                                    {
                                                                        offset: 0,
                                                                        color: "#83bff6",
                                                                    },
                                                                    {
                                                                        offset: 0.5,
                                                                        color: "#188df0",
                                                                    },
                                                                    {
                                                                        offset: 1,
                                                                        color: "#188df0",
                                                                    },
                                                                ]
                                                            ),
                                                        },
                                                        emphasis: {
                                                            itemStyle: {
                                                                color: new echarts.graphic.LinearGradient(
                                                                    0,
                                                                    0,
                                                                    0,
                                                                    1,
                                                                    [
                                                                        {
                                                                            offset: 0,
                                                                            color: "#2378f7",
                                                                        },
                                                                        {
                                                                            offset: 0.7,
                                                                            color: "#2378f7",
                                                                        },
                                                                        {
                                                                            offset: 1,
                                                                            color: "#83bff6",
                                                                        },
                                                                    ]
                                                                ),
                                                            },
                                                        },
                                                    },
                                                    {
                                                        data: optionData,
                                                        type: "line",
                                                        itemStyle: {
                                                            color: new echarts.graphic.LinearGradient(
                                                                0,
                                                                0,
                                                                0,
                                                                1,
                                                                [
                                                                    {
                                                                        offset: 0,
                                                                        color: "#83bff6",
                                                                    },
                                                                    {
                                                                        offset: 0.5,
                                                                        color: "#188df0",
                                                                    },
                                                                    {
                                                                        offset: 1,
                                                                        color: "#188df0",
                                                                    },
                                                                ]
                                                            ),
                                                        },
                                                    },
                                                ],
                                                legend: {},
                                            };
                                            option && myChart.setOption(option);
                                        },
                                    },
                                    beforeDestroy() {
                                        viewer.destroy();
                                        viewer = null;
                                    },
                                });
                            };
                        </script>
                    </body>
                </html>
                        
                主站蜘蛛池模板: 色综合久久久久久久久久| yellow字幕网在线zmzz91| 永久免费bbbbbb视频| 国产丰满麻豆videossexhd| 免费看国产精品麻豆| 久久精品国产99精品国产2021 | 国产黄色毛片视频| 丰满人体bbw| 桃花视频性视频| 免费在线观看污| 蜜臀AV在线播放一区二区三区| 国产精品日韩欧美一区二区三区 | 欧美大陆日韩一区二区三区| 内射一区二区精品视频在线观看| 高潮毛片无遮挡高清免费视频| 国内精品久久久久久久影视麻豆 | 欧美伊人久久大香线蕉综合| 免费在线观看亚洲| 色费女人18毛片**在线| 国产激情一区二区三区四区| 99精品国产在这里白浆| 成人无码WWW免费视频| 久久精品国产亚洲AV高清热| 欧美国产激情二区三区| 交换年轻夫妇5| 精品国产三级在线观看| 国产人澡人澡澡澡人碰视频| 亚洲五月丁香综合视频| 国内精品伊人久久久久妇| 一区二区三区高清在线| 日本xxxxx在线观看| 五月天在线婷婷| 欧美成人高清WW| 亚洲精品美女久久7777777| 精品人妻无码专区中文字幕| 日本精品卡一卡2卡三卡| 亚洲欧美日韩国产精品一区二区 | 国产亚洲精品aaaaaaa片| 二个人看的www免费视频| 在线免费观看色片| www国产成人免费观看视频|