P2022036_Web2.git

TreeWish

2023-02-16 af8e5d35d64f9ca894cd933d0cfbea8f067abcbf

'一张图页面整体编写'

已添加22个文件

已修改5个文件

	package.json	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	public/SmartEarthSDK/Workers/path/ProjectPath.html	461 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/img/Screen/bdimg.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/img/Screen/bigST.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/img/Screen/bottombg.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/img/Screen/btnbg.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/img/Screen/btnc.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/img/Screen/centerbtn.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/img/Screen/centerbtnc.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/img/Screen/chartbg.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/img/Screen/leftArrow.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/img/Screen/logobg.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/img/Screen/ptree.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/img/Screen/return.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/img/Screen/rightArrow.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/img/Screen/yximg.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/Screen/ProjectTree.vue	252 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/Screen/bottom.vue	194 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/Screen/left.vue	82 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/Screen/mapsdk.vue	88 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/Screen/right.vue	82 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/Screen/top.vue	145 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main.js	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/Thematic/index.vue	1025 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/Thematic/index1.vue	977 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/Tools/LayerTree.vue	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	vue.config.js	16 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 package.json

@@ -10,6 +10,7 @@
  },
  "dependencies": {
    "@turf/turf": "^6.5.0",
    "animate.css": "^4.1.1",
    "aws-sdk": "^2.963.0",
    "axios": "^0.21.1",
    "cesium": "^1.84.0",

 public/SmartEarthSDK/Workers/path/ProjectPath.html

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,461 @@
ï»¿<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>å·¥ç¨å·¡æ£</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        html,
        body,
        .layui-prop {
            background-color: rgba(0, 0, 0, 0);
            height: 100%;
            color: #fff;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .layui-prop::-webkit-scrollbar {
            /*æ»å¨æ¡æ´ä½æ ·å¼*/
            width: 8px;
            /*é«å®½åå«å¯¹åºæ¨ªç«æ»å¨æ¡çå°ºå¯¸*/
            height: 8px;
            scrollbar-arrow-color: red;
        }

        .layui-prop::-webkit-scrollbar-thumb {
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
            box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
            background: rgba(218, 218, 218, 0.5);
            scrollbar-arrow-color: red;
        }

        .layui-prop::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
            box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
            border-radius: 0;
            background: rgba(218, 218, 218, 0.1);
        }

        form {
            width: 95%;
        }

        html {
            overflow: hidden;
        }

        .layui-form-item {
            width: 313px !important;
        }

        .layui-input {
            background-color: #fff !important;
            height: 30px;
            margin-top: 5px;
        }

        .layui-form-label {
            width: 96px !important;
        }

        .layui-input-block {
            width: 150px !important;
            margin-left: 150px !important;
        }

        .layui-prop {
            margin-left: 10px;
        }

        .layui-form-item .line {
            display: block;
        }

        .layui-input-block {
            margin-left: 0;
        }

        .layui-form-item {
            border: 1px solid;
            margin-bottom: 0px !important;
            border-bottom: none;
        }

        .layui-input {
            background-color: rgba(0, 0, 0, 0) !important;
            margin-top: 5px;
            color: #fff;
        }

        .layui-form-select dl {
            background-color: rgba(0, 0, 0, 0.5) !important;
        }

        .layui-form-select dl dd:hover {
            background-color: #f2f2f250;
        }

        .bnt-box {
            text-align: center;
            height: 58px;
        }

        .bnt-box button {
            margin-top: 10px;
        }

        .fly {
            display: none;
        }

        #flySpeed {
            padding: 19px 0;
        }
    </style>
</head>

<body>
    <div class="layui-prop">
        <div class="bnt-box">
            <button type="button" class="layui-btn layui-btn-normal" id="start">ç»§ç»å·¡æ£</button>
            <button type="button" class="layui-btn layui-btn-normal" id="stop" style="margin-left: 0;">æåå·¡æ£</button>
            <button type="button" class="layui-btn layui-btn-normal" id="exit">éåºå·¡æ£</button>
        </div>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">è·¯çº¿åç§°</label>
                <div class="layui-input-block" id="roadName" style="line-height: 38px;">

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">è§è§æ¨¡å¼</label>
                <div class="layui-input-block">
                    <select id="sjms" name="sjms" lay-filter="sjms">
                        <option value="0">è·éæ¨¡å</option>
                        <option value="1">ç¬¬ä¸äººç§°è§è§</option>
                        <option value="2">ä¸å¸è§è§</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item norline fly">
                <label class="layui-form-label">é£è¡é«åº¦</label>
                <div class="layui-input-block">
                    <input id="cameraHeight" type="text" value="0" name="cameraHeight" lay-filter="cameraHeight"
                        class="layui-input" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
                </div>
            </div>
            <div class="layui-form-item norline fly notGod">
                <label class="layui-form-label">é£è¡è·ç¦»</label>
                <div class="layui-input-block">
                    <input id="cameraDistance" type="text" value="0" name="cameraDistance" lay-filter="cameraDistance"
                        class="layui-input" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
                </div>
            </div>
            <div class="layui-form-item norline fly notGod">
                <label class="layui-form-label">ä¿¯ä»°è§</label>
                <div class="layui-input-block">
                    <input id="pitch" type="text" value="0" name="pitch" lay-filter="pitch" class="layui-input"
                        onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
                </div>
            </div>
            <div class="layui-form-item norline">
                <label class="layui-form-label">å·¡æ£éåº¦(m/s)</label>
                <div class="layui-input-block">
                    <div id="flySpeed" class="flySpeed"></div>
                </div>
            </div>
            <div class="layui-form-item norline">
                <label class="layui-form-label">æ»é¿åº¦</label>
                <div class="layui-input-block" id="totalLen" style="line-height: 38px;">
                </div>
            </div>
            <div class="layui-form-item norline">
                <label class="layui-form-label">å·²å·¡æ£é¿åº¦</label>
                <div class="layui-input-block" id="distanceTraveled" style="line-height: 38px;">
                    0
                </div>
            </div>
            <div class="layui-form-item norline">
                <label class="layui-form-label">æ»æ¶é¿</label>
                <div class="layui-input-block" id="totalTime" style="line-height: 38px;">
                </div>
            </div>
            <div class="layui-form-item norline">
                <label class="layui-form-label">å·²å·¡æ£æ¶é´</label>
                <div class="layui-input-block" id="time" style="line-height: 38px;">
                    0
                </div>
            </div>
            <div class="layui-form-item norline">
                <label class="layui-form-label">æ¯å¦æ¾ç¤ºæ¨¡å</label>
                <div class="layui-input-block">
                    <input id="showModel" type="checkbox" lay-skin="switch" lay-filter="showModel" value="off"
                        lay-text="æ¯|å¦">
                </div>
            </div>
            <div class="layui-form-item norline">
                <label class="layui-form-label">æ¯å¦æ¾ç¤ºè·¯çº¿</label>
                <div class="layui-input-block">
                    <input id="showLine" type="checkbox" lay-skin="switch" lay-filter="showLine" value="off"
                        lay-text="æ¯|å¦">
                </div>
            </div>
            <div class="layui-form-item norline">
                <label class="layui-form-label">éåº¦</label>
                <div class="layui-input-block" id="sd" style="line-height: 38px;">
                    50m/s
                </div>
            </div>
            <div class="layui-form-item norline">
                <label class="layui-form-label">ç»åº¦</label>
                <div class="layui-input-block" id="jd" style="line-height: 38px;">
                </div>
            </div>

            <div class="layui-form-item norline">
                <label class="layui-form-label">çº¬åº¦</label>
                <div class="layui-input-block" id="wd" style="line-height: 38px;">
                </div>
            </div>

            <div class="layui-form-item norline">
                <label class="layui-form-label">å·¡æ£é«ç¨</label>
                <div class="layui-input-block" id="height" style="line-height: 38px;">
                </div>
            </div>
            <div class="layui-form-item norline">
                <label class="layui-form-label">å°é¢é«ç¨</label>
                <div class="layui-input-block" id="globeHeight" style="line-height: 38px;">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="ratio">
                    <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                </div>
            </div>
        </form>
    </div>
    <script src="../jquery-2.0.3.js"></script>
    <script src="../layui/layui.js"></script>

    <script>
        /// <reference path="sjcs.js" />
        var fly = null;
        var sgworld = parent.sgworld;
        var routeData = parent.PathAnimationData.flyData;
        var url = parent.SmartEarthRootUrl + "Workers/Model/xiaoche.glb";
        $('#start').hide();
        $('#stop').show();
        var form, element, slider;
        var ratio = 0;
        layui.use(['form', 'element', 'slider'], function () {
            form = layui.form;
            element = layui.element;
            slider = layui.slider;

            if (routeData.distance) {
                document.getElementById("totalLen").innerText = getDistance(routeData.distance);
            }
            if (routeData.Totaltime) {
                document.getElementById("totalTime").innerText = getTime(routeData.Totaltime);
            }
            if (routeData.range) {
                document.getElementById("cameraDistance").value = routeData.range;
            }
            if (routeData.height) {
                document.getElementById("cameraHeight").value = routeData.height;
            }
            if (routeData.pitch) {
                document.getElementById("pitch").value = routeData.pitch;
            }
            document.getElementById("roadName").innerText = routeData.name;

            fly = sgworld.Creator.createDynamicObject(routeData, url, shuj);
            parent.PathAnimationData.fly = fly

            if (routeData.mode) {
                $('#sjms option[value="' + routeData.mode + '"]').attr('selected', '');
                form.render();
                switch (routeData.mode) {
                    case 1:
                        $('.fly').show();
                        break;
                    case 2:
                        $('.fly').show();
                        $('.notGod').hide();
                        break;
                }
            }
            form.on('select(sjms)', function (data) {
                if (data.value === "0") {
                    fly && fly.changeFlyMode(0);
                    routeData && (routeData.mode = 0);
                    $('.fly').hide();
                } else if (data.value === "1") {
                    fly && fly.changeFlyMode(1);
                    routeData && (routeData.mode = 1);
                    $('.fly').show();
                } else if (data.value === "2") {
                    fly && fly.changeFlyMode(2);
                    routeData && (routeData.mode = 2);
                    $('.fly').show();
                    $('.notGod').hide();
                }
            });

            slider.render({
                elem: '#flySpeed',
                theme: '#1E9FFF', //ä¸»é¢è²
                min: 1,
                max: 500,
                value: 50,
                change: function (value) {
                    let multiplier = value / 50.5;
                    fly && fly.setMultiplier(multiplier);
                    routeData && (routeData.multiplier = multiplier);
                    document.getElementById("sd").innerText = value + 'm/s';
                }
            });

            $('#cameraDistance').on('input propertychange', function (event) {
                var distance = $(this).val().replace(/[^\d\.\-]/g, '');
                fly && fly.setFlyDistance(parseFloat(distance));
                routeData && (routeData.range = parseFloat(distance));
            });
            $('#cameraHeight').on('input propertychange', function (event) {
                var height = $(this).val().replace(/[^\d\.\-]/g, '');
                fly && fly.setFlyHeight(parseFloat(height));
                routeData && (routeData.height = parseFloat(height));
            });
            $('#pitch').on('input propertychange', function (event) {
                var pitch = $(this).val().replace(/[^\d\.\-]/g, '');
                fly && fly.setFlyPitch(parseFloat(pitch));
                routeData && (routeData.pitch = parseFloat(pitch));
            });
            if (routeData.showModel) {
                $('#showModel').next().click();
                $('#showModel').attr('value', 'on');
            }
            form.on('switch(showModel)', function (data) {
                fly && fly.showModel(this.checked);
                routeData && (routeData.showModel = this.checked);
            });
            if (routeData.showLine) {
                $('#showLine').next().click();
                $('#showLine').attr('value', 'on');
            }
            form.on('switch(showLine)', function (data) {
                fly && fly.showLine(this.checked);
                routeData && (routeData.showLine = this.checked);
            });
            //è¿åº¦æ¡
            setInterval(function () {
                element.progress('ratio', ratio + '%');
            }, 500);
        });
        //æé®äºä»¶
        $(".bnt-box button").click(function () {
            var id = this.id;
            switch (id) {
                case 'start':
                    fly && fly.isPause(false);
                    $('#start').hide();
                    $('#stop').show();
                    break;
                case 'stop':
                    fly && fly.isPause(true);
                    $('#start').show();
                    $('#stop').hide();
                    break;
                case 'exit':
                    parent.layer.close(parent.PathAnimationData.winIndex)
                    break;
            }
        });

        function shuj(data) {
            if (data.distanceTraveled) {
                //å·²å·¡æ£é¿åº¦
                document.getElementById("distanceTraveled").innerText = getDistance(data.distanceTraveled);
            }
            if (data.time) {
                //å·²å·¡æ£æ¶é´
                document.getElementById("time").innerText = getTime(parseInt(data.time));
            }
            if (data.longitude) {
                //ç»åº¦
                document.getElementById("jd").innerText = data.longitude.toFixed(7) + 'Â°';
            }
            if (data.latitude) {
                //çº¬åº¦
                document.getElementById("wd").innerText = data.latitude.toFixed(7) + 'Â°';
            }
            // if (data.speed) {
            //     //éåº¦
            //     document.getElementById("sd").innerText = data.speed;
            // }
            if (data.height) {
                //éåº¦
                document.getElementById("height").innerText = getDistance(data.height);
            }
            if (data.globeHeight) {
                //éåº¦
                document.getElementById("globeHeight").innerText = getDistance(data.globeHeight);
            }
            if (data.ratio) {
                ratio = parseInt(data.ratio * 100);
            }
        }

        //èªå¨ç¹å»å³éçªå£ç¹å³éäºä»¶
        function closeLayer() {
            var $title = $(window.parent.document).find('.layui-layer-title');
            if ($title.length > 0) {
                $title.each(function (i, item) {
                    if (item.innerHTML === "å·¡æ£è·¯çº¿") {
                        var closeButton = $(item).parent().find('.layui-layer-close');
                        var event = document.createEvent('MouseEvents');
                        event.initEvent("click", false, true);
                        closeButton[0].dispatchEvent(event);
                    }
                })
            }
        }

        function getTime(data) {
            var time;
            if (data < 60) {
                time = data + "ç§";
            } else if (data >= 60 && data < 3600) {
                time = Math.floor(data / 60) + 'å' + data % 60 + 'ç§';
            } else {
                var h = Math.floor(data / 3600);
                data -= h * 3600;
                var m = Math.floor(data / 60);
                data -= m * 60;
                time = h + 'å°æ¶' + m + 'å' + data + 'ç§';
            }
            return time;
        }

        function getDistance(data) {
            var dis;
            data = parseFloat(data).toFixed(2);
            data = parseFloat(data);
            if (data >= 1000) {
                dis = (data / 1000).toFixed(3) + "åç±³";
            } else {
                dis = data + "ç±³";
            }
            return dis;
        }
    </script>
</body>

</html>

 src/assets/img/Screen/bdimg.png


 src/assets/img/Screen/bigST.png


 src/assets/img/Screen/bottombg.png


 src/assets/img/Screen/btnbg.png


 src/assets/img/Screen/btnc.png


 src/assets/img/Screen/centerbtn.png


 src/assets/img/Screen/centerbtnc.png


 src/assets/img/Screen/chartbg.png


 src/assets/img/Screen/leftArrow.png


 src/assets/img/Screen/logobg.png


 src/assets/img/Screen/ptree.png


 src/assets/img/Screen/return.png


 src/assets/img/Screen/rightArrow.png


 src/assets/img/Screen/yximg.png


 src/components/Screen/ProjectTree.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,252 @@
<template>
  <div class="project_tree" :class="{ left_main_show: !leftMenuOpen }">
    <div class="tree-container">
      <el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        default-expand-all
        :props="defaultProps"
        ref="tree"
        class="el-tree"
        @check-change="handleCheckChange"
      >
        <div
          style="display: flex"
          class="custom-tree-node"
          slot-scope="{ node, data }"
        >
          <div style="margin-left: 0px; padding-left: 15px">
            <i
              v-if="data.children && data.children.length > 0"
              style="color: yellow"
              class="el-icon-folder-opened"
            ></i>
            <i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
          </div>

          <div
            class="tree-label"
            :title="node.label || '-'"
          >
            {{ node.label }}
          </div>
        </div>
      </el-tree>
    </div>
    <div class="changeBaseLayer">
      <div @click="changeMenulayer" class="CenDiv">
        <div
          id="cenBg"
          v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import { right_menu, right_list, image_layer } from "@/assets/js/index.js"

import { perms_selectLayers } from "@/api/api.js"

export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      typeIndex: null,
      leftMenuOpen: false,
      rightMenuOpen: false,
      changeSelectStyle: null,
      changeSelectli: null,
      rightMenu: [],
      rightList: [],
      treeData: [],
      centerFlag: false,
      isActive: false,
      isMenuLayer: true,
      openEcharts: false,
    }
  },

  mounted() {
    this.rightList = right_list[0]
    this.rightMenu = right_menu
    this.changeSelectli = this.rightList[0].id
    this.changeSelectStyle = this.rightMenu[0].id
    this.addImageLayer()
  },
  methods: {
    async addImageLayer() {
      const data = await perms_selectLayers()
      if (data.code != 200) {
        return this.$message.error("å¾å±åè¡¨æ¥è¯¢å¤±è´¥")
      }
      var std = []
      var layer_list = []
      var layer_groups = []
      for (var i in data.result) {
        if (data.result[i].type == 1) {
          layer_groups.push({
            id: data.result[i].id,
            label: data.result[i].cnName,
            type: data.result[i].type,
            isEdit: false,
            children: [],
          })
        } else if (data.result[i].type == 2) {
          if (data.result[i].url != null) {
            var layer_entity = {
              id: data.result[i].id,
              pid: data.result[i].pid,
              label: data.result[i].cnName,
              resource: data.result[i].url,
              type: data.result[i].type,
              isEdit: false,
            }
            layer_list.push(layer_entity)
            if (data.result[i].isShow == 1) {
              std.push(data.result[i].id)
              this.setAddImageLayer(layer_entity)
            }
          }
        }
      }
      for (var i in layer_list) {
        for (var j in layer_groups) {
          if (layer_list[i].pid === layer_groups[j].id) {
            layer_groups[j].children.push(layer_list[i])
          }
        }
      }
      this.treeData = layer_groups

      this.$refs.tree.setCheckedKeys(std)
    },
    handleCheckChange(data, checked, indeterminate) {
      if (data.children != null) return
      var std = []
      for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
        var val_id = Viewer.imageryLayers._layers[i].imageryProvider.name
        if (val_id == data.label) {
          std.push(data.label)
          const img_layer = Viewer.imageryLayers._layers[i]
          img_layer.show = checked
        }
      }
      if (std.length == 0 && checked == true) {
        this.setAddImageLayer(data)
      }
    },
    setAddImageLayer(res) {
      let layerWMS = new Cesium.WebMapServiceImageryProvider({
        url: geoServerURl,
        layers: res.resource,
        parameters: {
          transparent: true,
          format: "image/png",
        },
      })
      layerWMS.name = res.label
      Viewer.imageryLayers.addImageryProvider(layerWMS)
    },
    changeMenulayer() {
      this.isActive = !this.isActive
      this.isMenuLayer = !this.isMenuLayer
      this.setLayerVisible()
    },
    setLayerVisible() {
      if (this.isActive == true) {
        Viewer.imageryLayers._layers[1].show = true
        Viewer.imageryLayers._layers[2].show = false
        Viewer.imageryLayers._layers[3].show = false
      } else {
        Viewer.imageryLayers._layers[1].show = false
        Viewer.imageryLayers._layers[2].show = true
        Viewer.imageryLayers._layers[3].show = true
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.project_tree {
  margin: 0;
  width: 300px;
  height: 100%;
  transition: width 2s;
  background: url("~@/assets/img/themic/å·¦æ¡.png") no-repeat center;
  background-size: 100% 100%;

  .tree-container {
    margin: 10px;
    height: 90%;
    overflow-y: auto;
  }
  .changeBaseLayer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
  }
  .CenDiv {
    height: 40px;
    width: 60px;

    margin-right: 7%;
    border-radius: 5px;
    bottom: 3%;
  }

  // .CenDiv:hover {

  // }
  .active {
    height: 40px;
    width: 60px;
    background: url("~@/assets/img/themic/é»è®¤çå½±å.png") no-repeat center;
    position: absolute;
    background-size: 100% 100%;
    border-radius: 5px;
  }
  .menuLayer {
    height: 40px;
    width: 60px;
    background: url("~@/assets/img/themic/é»è®¤çåºå¾.png") no-repeat center;
    position: absolute;
    background-size: 100% 100%;
    border-radius: 5px;
  }
}
</style>

<style lang="scss">
.leftContainer {
  .project_tree {
    .el-tree-node__content > label.el-checkbox {
      margin-right: -30px;
    }
    .el-tree-node__content > .el-tree-node__expand-icon {
      visibility: hidden;
    }
    .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
      display: block;
      visibility: visible;
    }
    .el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
      display: none;
      // visibility: hidden;
    }
    .tree-label {
      padding-left: 10px;
      font-size: 16px;
      color: #fff;
    }
  }
}
</style>

 src/components/Screen/bottom.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,194 @@
<template>
  <div class="bottom">
    <div class="bottom1">
      <div class="bottom11"></div>
      <div class="bottom12">
        <div class="bottombtn">
          <el-popover
            popper-class="popover"
            placement="top"
            width="100"
            trigger="click"
          >
            <!-- åå®¹ -->
            <span slot="reference">é¡¹ç®å±ç¤º</span>
            <div class="popover-content">
              <div class="popover-content__header">é¡¹ç®ä¿¡æ¯</div>
              <div class="popover-content__list">
                <div
                  class="popover-content__list__item"
                  v-for="item in projectInfoList"
                  :key="item.id"
                  :class="currProject == item.name ? 'active' : ''"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </el-popover>
        </div>
        <div class="bottombtn">
          <el-popover placement="top" width="100" trigger="click">
            <!-- åå®¹ -->
            <span slot="reference">å·¥ç¨å±ç¤º</span>
          </el-popover>
        </div>
        <div class="bottombtn">
          <el-popover placement="top" width="100" trigger="click">
            <!-- åå®¹ -->
            <span slot="reference">å·¥ç¨å·¡è§</span>
          </el-popover>
        </div>
      </div>
      <div class="bottom13">
        <img :src="yxImg" @click="ChangeBaseLayer" />
      </div>
    </div>
    <div class="bottom2">
      <img src="../../assets/img/Screen/bottombg.png" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      YXState: true,
      yxImg: require("../../assets/img/Screen/yximg.png"),
      currProject: "å¨çç®¡ç½å¾",
      projectInfoList: [
        {
          name: "å¨å½ç®¡ç½å¾",
          id: "qggwt",
        },
        {
          name: "å¨çç®¡ç½å¾",
          id: "qqgwt",
        },
        {
          name: "å¨å½é¡¹ç®",
          id: "qgxm",
        },
        {
          name: "å¨çé¡¹ç®",
          id: "qqxm",
        },
      ],
    }
  },
  methods: {
    ChangeBaseLayer() {
      if (this.YXState) {
        this.yxImg = require("../../assets/img/Screen/bdimg.png")
        //å è½½ç¾åº¦å½±å
        Viewer.imageryLayers._layers[1].show = true
        Viewer.imageryLayers._layers[2].show = false
        Viewer.imageryLayers._layers[3].show = false
      } else {
        this.yxImg = require("../../assets/img/Screen/yximg.png")
        Viewer.imageryLayers._layers[1].show = false
        Viewer.imageryLayers._layers[2].show = true
        Viewer.imageryLayers._layers[3].show = true
      }
      this.YXState = !this.YXState
    },
  },
}
</script>
<style lang="scss">
.bottom {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .bottom1 {
    height: calc(100% - 36px);
    width: 100%;
    display: flex;
    flex-direction: row;

    .bottom11,
    .bottom13 {
      height: 100%;
      width: 40%;
    }

    .bottom12 {
      height: 100%;
      width: 20%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
    }

    .bottom13 {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      img {
        cursor: pointer;
        margin-right: 30px;
        width: 92px;
        height: 61px;
      }
    }

    .bottombtn {
      height: 36px;
      width: 147px;
      background: url(../../assets/img/Screen/centerbtn.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 600;
      cursor: pointer;
    }
  }

  .bottom2 {
    height: 36px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 80%;
      height: 100%;
    }
  }
}
.popover {
  background-color: aqua;

  .popover-content {
    &__header {
      &::before,
      &::after {
        content: "";
        display: inline-block;
        background-color: aqua;
        border-radius: 50%;
        width: 10px;
        height: 10px;
      }
    }
    &__list {
      &__item {
        background-color: orange;
        &.active {
          background-color: aqua;
        }
      }
    }
  }
}
</style>

 src/components/Screen/left.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,82 @@
<template>
  <div class="current">
    <div class="leftarrow">
      <img :src="leftImg" @click="ChangeLeft" />
    </div>
    <div class="leftContainer" v-if="!ChartDisplay">
      <div class="current1"></div>
      <div class="current1"></div>
      <div class="current1"></div>
    </div>
    <div class="leftContainer" v-if="ChartDisplay">
      <project-tree></project-tree>
      <!-- <div class="current1"></div>
      <div class="current1"></div>
      <div class="current1"></div> -->
    </div>
  </div>
</template>
<script>
import ProjectTree from './ProjectTree.vue'
export default {
  components: {
    ProjectTree
  },
  data() {
    return {
      ChartDisplay: true,
      leftImg: require("../../assets/img/Screen/rightArrow.png"),
    }
  },
  mounted() {},
  methods: {
    ChangeLeft() {
      if (this.ChartDisplay) {
        this.leftImg = require("../../assets/img/Screen/leftArrow.png")
      } else {
        this.leftImg = require("../../assets/img/Screen/rightArrow.png")
      }
      this.ChartDisplay = !this.ChartDisplay
      this.$parent.ChangeWidth("left")
    },
  },
}
</script>
<style lang="scss">
.current {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .leftarrow {
    width: 36px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 30px;
      height: 120px;
      cursor: pointer;
    }
  }
  .leftContainer {
    height: 100%;
    width: calc(100% - 36px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    .current1 {
      height: 30%;
      width: 100%;
      background: url(../../assets/img/Screen/chartbg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}
</style>

 src/components/Screen/mapsdk.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,88 @@
<template>
  <div  class="ParentCentermapdiv">
    <div id="Centermapdiv"></div>
  </div>
</template>

<script>

export default {
  name: "",
  components: {},
  data() {
    return{} 
  },
  mounted() {
    this.init3DMap()
  },
  methods: {
    init3DMap() {
      //å°å¾åå§å
      window.sgworld = new SmartEarth.SGWorld("Centermapdiv", {
        licenseServer: window.sceneConfig.licenseServer,
      })

      window.Viewer = window.sgworld._Viewer
      Viewer.imageryLayers._layers[0].show = false
      //å®ä½
      Viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(110, 33, 25000000),

      });
      Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[0].url,
        })
      )

      Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[1].url,
        })
      )
      Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[2].url,
        })
      )



      Viewer._enableInfoOrSelection = false
      //æ¾ç¤ºfps
      Viewer.scene.debugShowFramesPerSecond = false
      //å¯¼èªæ§ä»¶
      window.sgworld.navControl("nav", false)
      //æ¯ä¾å°º
      window.sgworld.navControl("scale", false)
      //å¼å¯æ·±åº¦æ£æµ
      sgworld.Analysis.depthTestAgainstTerrain(true)


      Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: demLayer,
      })

      //æ¹åå¤©ç©ºé¢è²ä¸ºé»è²
      Viewer.scene.skyBox.show = false //å³éå¤©ç©ºçï¼å¦åä¼æ¾ç¤ºå¤©ç©ºé¢è²
      //èæ¯éæ
      Viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
    },

  }
 
}
</script>

<style scoped lang="scss">
.ParentCentermapdiv{
  display: fixed;
  height: 100%;
    width: 100%;
}
  #Centermapdiv{
    height: 100%;
    width: 100%;
  }

</style>

 src/components/Screen/right.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,82 @@
<template>
    <div class="current">
        
        <div class="rightContainer"  v-show="ChartDisplay">
            <div class="current1"></div>
            <div class="current1"></div>
            <div class="current1"></div>
        </div>
        <div class="rightarrow">
            <img :src="RightImg"  @click="ChangeRight" />
        </div>

    </div>
</template>
<script>
export default{
    data(){
        return{
            ChartDisplay:true,
            RightImg:require("../../assets/img/Screen/leftArrow.png")
        }
    },
    methods:{
        ChangeRight(){
            if(this.ChartDisplay){
                this.RightImg=require("../../assets/img/Screen/rightArrow.png");
            }else{
                this.RightImg=require("../../assets/img/Screen/leftArrow.png");
            }        
            this.ChartDisplay=!this.ChartDisplay;
            this.$parent.ChangeWidth("right");
        }
    }



}



</script>
<style lang="scss">
.current {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .rightarrow{
        width:36px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            width: 30px;
            height: 120px;
            cursor: pointer;
        }
    }
    .rightContainer {
        height: 100%;
        width: calc(100% - 36px);
       
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .current1{
            height: 30%;
            width: 100%;
            background:url(../../assets/img/Screen/chartbg.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
    }



}
</style>

 src/components/Screen/top.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,145 @@
<template>
  <div class="top">
    <div class="topleft">
      <div
        class="topleft1 topleftC"
        :class="{ topleft1: screen == false, topleftC: screen == true }"
      >
        <img src="../../assets/img/Screen/bigST.png" />
        <span>å¤§å±è§å¾</span>
      </div>
      <div
        class="topleft1 topleftC"
        :class="{ topleft1: tree == false, topleftC: tree == true }"
      >
        <img src="../../assets/img/Screen/ptree.png" />
        <span>å·¥ç¨é¡¹ç®</span>
      </div>
    </div>
    <div class="topCenter">
      <div>ç®¡ç½ä¸å¼ å¾</div>
    </div>
    <div class="topRight">
      <div class="topright1 toprightC" @click="ReturnLast">
        <img src="../../assets/img/Screen/return.png" />
        <span>è¿åä¸çº§</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tree: false,
      screen: false,
    }
  },
  mounted() {},
  methods: {
    ReturnLast() {
      this.$router.push("/Synthesis")
    },
  },
}
</script>
<style lang="scss">
.top {
  height: 100%;
  width: 100%;
  background-image: url(../../assets/img/Screen/logobg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: row;
  .topleft {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-around;
    cursor: pointer;
    .topleft1 {
      width: 131px;
      height: 40px;
      background-image: url(../../assets/img/Screen/btnc.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
    }
    .topleftC {
      width: 131px;
      height: 40px;
      background-image: url(../../assets/img/Screen/btnbg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
    }
    img {
      height: 26px;
      width: 32px;
      margin: 0px 8px;
    }
    span {
      color: #b3c8e3;
      font-size: 1rem;
      letter-spacing: 1px;
    }
  }
  .topCenter {
    width: 60%;
    height: 100%;
    font-size: 2rem;
    text-align: center;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 5px;
    color: #e3eafd;
    div {
      margin-top: 5px;
    }
  }
  .topRight {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    cursor: pointer;
    .topright1 {
      width: 131px;
      height: 40px;
      background-image: url(../../assets/img/Screen/btnc.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      margin-right: 10%;
    }
    .toprightC {
      width: 131px;
      height: 40px;
      background-image: url(../../assets/img/Screen/btnbg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      margin-right: 10%;
    }
    img {
      height: 26px;
      width: 32px;
      margin: 0px 8px;
    }
    span {
      color: #b3c8e3;
      font-size: 1rem;
      letter-spacing: 1px;
    }
  }
}
</style>

 src/main.js

@@ -15,6 +15,7 @@
import '@/assets/css/content.css'
import '@/assets/css/configure.css'
import '@/assets/css/config.css'
import 'animate.css';
Vue.prototype.$echarts = echarts;
import * as echarts from 'echarts';
Vue.use(ElementUI, { locale });

 src/views/Thematic/index.vue

@@ -1,977 +1,90 @@
<template>
  <div class="themaic">
    <div
      class="left_menu"
      :class="{ left_main_show: !leftMenuOpen }"
    >
      <div class="tree-container">
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          default-expand-all
          :props="defaultProps"
          ref="tree"
          class="el-tree"
          @check-change="handleCheckChange"
        >
          <span
            class="custom-tree-node"
            slot-scope="{ node, data }"
          >
            <svg-icon
              v-if="!data.children"
              icon-class="file"
              class="svgIcon"
            />
            <svg-icon
              v-else-if="node.expanded"
              icon-class="floder_open"
              class="svgIcon"
            />
            <svg-icon
              v-else
              icon-class="floder_close"
              class="svgIcon"
            />
            <span
              class='fontSize14'
              :title='node.label || "-"'
            >{{node.label}}</span>
          </span>
        </el-tree>
      </div>
      <div class="changeBaseLayer">
        <div
          @click="changeMenulayer"
          class="CenDiv"
        >
          <div
            id="cenBg"
            v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
          ></div>
        </div>
      </div>

    </div>

    <div class="center_content">

      <div
        id="MapView"
        class="MapView"
      >
        <div class="TopHeader">
          <div
            @click="setTopReturn"
            class="TopReturn"
          ></div>
        </div>
        <div class="leftEchart">
          <div class="showEcharts">
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart11></echart11>
            </div>
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart12></echart12>
            </div>
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart13></echart13>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart21></echart21>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart22></echart22>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart23></echart23>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart31></echart31>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart32></echart32>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart33></echart33>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart44></echart44>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart45></echart45>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart46></echart46>
            </div>
          </div>
        </div>
        <div class="rightEchart">
          <div class="showEcharts">
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart14></echart14>
            </div>
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart15></echart15>
            </div>
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart16></echart16>
            </div>

            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart24></echart24>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart25></echart25>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart26></echart26>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart34></echart34>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart35></echart35>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart36></echart36>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart41></echart41>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart42></echart42>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart43></echart43>
            </div>
          </div>
        </div>
        <div class="left_content">
          <div
            @click="showLeftMenu"
            v-show=" !leftMenuOpen"
          >
            <div class="LeftMenu"></div>
          </div>
          <div
            @click="showLeftMenu"
            v-show=" leftMenuOpen"
          >
            <div class="LeftMenu1"></div>
          </div>
        </div>

        <div class="right_content">
          <div
            @click="showRightMenu"
            v-show="!rightMenuOpen "
          >
            <div class="RightMenu"></div>
          </div>
          <div
            @click="showRightMenu"
            v-show="rightMenuOpen "
          >
            <div class="RightMenu1"></div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="right_menu"
      :class="{ right_main_show: !rightMenuOpen }"
    >
      <div class="content_right">
        <div class="contentLi">
          <ul>
            <li
              @click="changeRightList(item)"
              v-for="item in rightList"
              :class="item.id == changeSelectli ? 'changeliStyle' : ''"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="contentBottom">
          <div
            v-for="item in rightMenu"
            class="right_item"
            :class="{ changeStyle: changeSelectStyle == item.id }"
            @click="changeRightMenu(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <mapsdk></mapsdk>
    <top class="title" ref="title"></top>
    <left class="mapleft" :style="{ width: leftWidth }"></left>
    <right class="mapright" :style="{ width: rightWidth }"></right>
    <bottom class="mapbottom"></bottom>
  </div>
</template>

<script>
window.sgworld = null;
var Viewer = null;
import mapsdk from "@/components/Screen/mapsdk.vue"
import top from "../../components/Screen/top.vue"
import left from "@/components/Screen/left.vue"
import right from "../../components/Screen/right.vue"
import bottom from "../../components/Screen/bottom.vue"

import mapsdk from '../../components/mapsdk.vue';
import { right_menu, right_list, image_layer } from '../../assets/js/index.js';
import { perms_selectLayers } from '../../api/api.js';
import echart11 from '../../components/echart11.vue';
import echart12 from '../../components/echart12.vue';
import echart13 from '../../components/echart13.vue';
import echart14 from '../../components/echart14.vue';
import echart15 from '../../components/echart15.vue';
import echart16 from '../../components/echart16.vue';
import echart21 from '../../components/echart21.vue';
import echart22 from '../../components/echart22.vue';
import echart23 from '../../components/echart23.vue';
import echart24 from '../../components/echart24.vue';
import echart25 from '../../components/echart25.vue';
import echart26 from '../../components/echart26.vue';
import echart31 from '../../components/echart31.vue';
import echart32 from '../../components/echart32.vue';
import echart33 from '../../components/echart33.vue';
import echart34 from '../../components/echart34.vue';
import echart35 from '../../components/echart35.vue';
import echart36 from '../../components/echart36.vue';
import echart41 from '../../components/echart41.vue';
import echart42 from '../../components/echart42.vue';
import echart43 from '../../components/echart43.vue';
import echart44 from '../../components/echart44.vue';
import echart45 from '../../components/echart45.vue';
import echart46 from '../../components/echart46.vue';
import axios from 'axios';
import axios from "axios"
export default {
  components: {
    mapsdk,
    echart11,
    echart12,
    echart13,
    echart14,
    echart15,
    echart16,
    echart21,
    echart22,
    echart23,
    echart24,
    echart25,
    echart26,
    echart31,
    echart32,
    echart33,
    echart34,
    echart35,
    echart36,
    echart41,
    echart43,
    echart42,
    echart44,
    echart45,
    echart46,
  },
  components: { mapsdk, top, left, right, bottom },
  data() {
    return {
      typeIndex: null,
      leftMenuOpen: false,
      rightMenuOpen: false,
      changeSelectStyle: null,
      changeSelectli: null,
      rightMenu: [],
      rightList: [],
      treeData: [],
      centerFlag: false,
      isActive: false,
      isMenuLayer: true,
      openEcharts: false,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  mounted() {

    this.rightList = right_list[0];
    this.rightMenu = right_menu;
    this.changeSelectli = this.rightList[0].id;
    this.changeSelectStyle = this.rightMenu[0].id;
    this.initMapView();
    this.addImageLayer();
 
   
  },
  created() {

  },
  methods: {
    setTopReturn() {
      this.$router.push('/Synthesis');
      sessionStorage.setItem('changeSelectStyle', 3)
    },
    changeRightList(res) {
      this.changeSelectli = res.id;
      if (res.layer != null) {
        var layer = res.layer;
        this.$refs.tree.setCheckedKeys(layer);
      }
      if (res.index != null) {
        this.openEcharts = true;
        this.typeIndex = res.index;
      } else {
        this.openEcharts = false;
        this.typeIndex = null;
      }
      var vid = res.id;

      if (vid.indexOf('b') != -1) {
        var url = geoserverWFS + '%27' + res.name + '%27';
        axios.get(url).then((res) => {
          if (res.status == 200) {
            var point = res.data.features[0].geometry.coordinates;
            //å®ä½
            Viewer.camera.flyTo({
              //è·³è½¬è§è§
              destination: new Cesium.Cartesian3.fromDegrees(
                point[0],
                point[1],
                8000
              ),
            });
          }
        });
      } else if (vid.indexOf('a') != -1) {
        //å®ä½
        Viewer.camera.flyTo({
          //è·³è½¬è§è§
          destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
        });
      } else if (vid.indexOf('c') != -1) {
        var url = geoserverWFSLine + '%27' + res.name + '%27';
        axios.get(url).then((res) => {

          if (res.status == 200) {
            if (res.data.features.length == 0) return;
            var std = [];
            for (var i in res.data.features) {
              var featurLayer = res.data.features[i];
              var path = featurLayer.geometry.coordinates[0];
              for (var j in path) {
                // std.push(path[j][0], path[j][1], 50);
                std.push(path[j])
              }
            }

            var str = this.removeRepeat1(std);
            var val = [];
            for (var i in str) {
              val.push(str[i][0], str[i][1], 50);
            }
            this.showPathLine(val)
          }
        });
      }
    },
    removeRepeat1(arr) {
      const obj = {};
      return arr.filter(item => {
        if (!obj[item.toString()]) {
          obj[item.toString()] = item.toString();
          return item;
        }
      });
    },

    showPathLine(res) {

      window.sgworld.Creator.getFlyData(res, (data) => {
        data.showPoint = false;
        data.showLine = true;
        data.mode = 1;
        data.height = 2000;

        // å¼¹çªæ°æ®
        window.PathAnimationData = {
          flyData: data,
        };
        window.PathAnimationData.winIndex = layer.open({
          type: 2,
          title: 'è·¯å¾å¨ç»',
          shade: false,
          area: ['352px', '690px'],
          offset: 'r',
          skin: 'other-class',
          content: SmartEarthRootUrl + 'Workers/path/Path.html',
          end: function () {
            PathAnimationData.fly && PathAnimationData.fly.exit();
          },
        });
      });
    },
    showLeftMenu() {
      this.leftMenuOpen = !this.leftMenuOpen;
      var a = 0;
      var layer = setInterval(() => {
        a++;
        this.$bus.$emit('resizeEchart', true);
        if (a == 20) {
          clearInterval(layer);
          this.$bus.$emit('resizeEchart', true);
        }
      }, 100);
    },
    showRightMenu() {
      this.rightMenuOpen = !this.rightMenuOpen;
      var a = 0;
      var layer = setInterval(() => {
        a++;
        this.$bus.$emit('resizeEchart', true);
        if (a == 30) {
          clearInterval(layer);
          this.$bus.$emit('resizeEchart', true);
        }
      }, 100);
    },
    changeRightMenu(res) {
      this.rightList = right_list[parseInt(res.id) - 1];
      this.changeSelectStyle = res.id;
    },
    initMapView() {
      sgworld = new SmartEarth.SGWorld('MapView', {
        licenseServer: window.sceneConfig.licenseServer,
      });

      Viewer = sgworld._Viewer;
      Viewer.imageryLayers._layers[0].show = false;
      //å®ä½
      sgworld.Navigate.jumpTo({
        //è·³è½¬è§è§
        destination: new Cesium.Cartesian3.fromDegrees(
          116.3911,
          39.9115,
          100000
        ),
      });
      for (var i in gaoDeBaseUrl) {
        sgworld.Creator.createUrlTemplateImageryProvider(
          gaoDeBaseUrl[i].label,
          gaoDeBaseUrl[i].url,
          '0',
          undefined,
          true,
          ''
        );
      }

      //æ¾ç¤ºfps
      Viewer.scene.debugShowFramesPerSecond = false;
      //å¯¼èªæ§ä»¶
      sgworld.navControl('nav', false);
      //æ¯ä¾å°º
      sgworld.navControl('scale', false);

      Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: demLayer
      });


    },
    changeMenulayer() {
      this.isActive = !this.isActive;
      this.isMenuLayer = !this.isMenuLayer;
      this.setLayerVisible();
    },
    setLayerVisible() {
      if (this.isActive == true) {
        Viewer.imageryLayers._layers[1].show = true;
        Viewer.imageryLayers._layers[2].show = false;
        Viewer.imageryLayers._layers[3].show = false;
      } else {
        Viewer.imageryLayers._layers[1].show = false;
        Viewer.imageryLayers._layers[2].show = true;
        Viewer.imageryLayers._layers[3].show = true;
      }
    },
    async addImageLayer() {
      const data = await perms_selectLayers();
      // var val_layer = this.treeData[0].children;
      // var std = [];
      // for (var i = 0; i < val_layer.length; i++) {
      //   if (val_layer[i].id != 13 && val_layer[i].id != 14) {
      //     let layerWMS = new Cesium.WebMapServiceImageryProvider({
      //       url: geoServerURl,
      //       layers: val_layer[i].resource,
      //       parameters: {
      //         transparent: true,
      //         format: 'image/png',
      //       },
      //     });
      //     layerWMS.name = val_layer[i].label;
      //     Viewer.imageryLayers.addImageryProvider(layerWMS);
      //     std.push(val_layer[i].id);
      //   }
      // }
      if (data.code != 200) {
        return this.$message.error("å¾å±åè¡¨æ¥è¯¢å¤±è´¥");
      }
      var std = [];
      var layer_list = [];
      var layer_groups = [];
      for (var i in data.result) {
        if (data.result[i].type == 1) {
          layer_groups.push({
            id: data.result[i].id,
            label: data.result[i].cnName,
            type: data.result[i].type,
            isEdit: false,
            children: [],
          })
        } else if (data.result[i].type == 2) {
          if (data.result[i].url != null) {
            var layer_entity = {
              id: data.result[i].id,
              pid: data.result[i].pid,
              label: data.result[i].cnName,
              resource: data.result[i].url,
              type: data.result[i].type,
              isEdit: false,
            }
            layer_list.push(layer_entity)
            if (data.result[i].isShow == 1) {
              std.push(data.result[i].id);
            this.setAddImageLayer(layer_entity);
            }
          }
        }
      }
      for (var i in layer_list) {
        for (var j in layer_groups) {
          if (layer_list[i].pid === layer_groups[j].id) {
            layer_groups[j].children.push(layer_list[i])
          }
        }
      }
      this.treeData = layer_groups;

      this.$refs.tree.setCheckedKeys(std);
    },
    handleCheckChange(data, checked, indeterminate) {
      if (data.children != null) return;
      var std = [];
      for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
        var val_id =
          Viewer.imageryLayers._layers[i].imageryProvider.name;
        if (val_id == data.label) {
          std.push(data.label)
          const img_layer = Viewer.imageryLayers._layers[i];
          img_layer.show = checked;
        }
      }
      if (std.length == 0 && checked == true) {
        this.setAddImageLayer(data);
      }
    },
    setAddImageLayer(res) {
      let layerWMS = new Cesium.WebMapServiceImageryProvider({
        url: geoServerURl,
        layers: res.resource,
        parameters: {
          transparent: true,
          format: 'image/png',
        },
      });
      layerWMS.name = res.label;
      Viewer.imageryLayers.addImageryProvider(layerWMS);
      leftWidth: "20%",
      rightWidth: "20%",
    }
  },
};
  mounted() {},
  created() {},
  methods: {
    //ä¿®æ¹å·¦ä¾§å®½åº¦
    ChangeWidth(parm) {
      if (parm == "left") {
        if (this.leftWidth == "20%") {
          this.leftWidth = "36px"
        } else {
          this.leftWidth = "20%"
        }
      }
      if (parm == "right") {
        if (this.rightWidth == "20%") {
          this.rightWidth = "36px"
        } else {
          this.rightWidth = "20%"
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.themaic {
  width: 100%;
  height: 100%;
  background: #303030;
  width: 100%;
  position: absolute;
  display: flex;
  overflow: hidden;
  .left_menu {
    margin: 0;
    width: 300px;
    height: 100%;
    transition: width 2s;
    background: url("../../assets/img/themic/å·¦æ¡.png") no-repeat center;
    background-size: 100% 100%;

    .tree-container {
      margin: 10px;
      height: 90%;
      overflow-y: auto;
    }
    .changeBaseLayer {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      overflow: hidden;
    }
    .CenDiv {
      height: 40px;
      width: 60px;

      margin-right: 7%;
      border-radius: 5px;
      bottom: 3%;
    }

    // .CenDiv:hover {

    // }
    .active {
      height: 40px;
      width: 60px;
      background: url("../../assets/img/themic/é»è®¤çå½±å.png") no-repeat center;
      position: absolute;
      background-size: 100% 100%;
      border-radius: 5px;
    }
    .menuLayer {
      height: 40px;
      width: 60px;
      background: url("../../assets/img/themic/é»è®¤çåºå¾.png") no-repeat center;
      position: absolute;
      background-size: 100% 100%;
      border-radius: 5px;
    }
  }
  .center_content {
    flex: 1;
    height: 100%;
    .MapView {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      float: left;
      position: relative;
      display: flex;
      justify-content: space-around;
      .TopHeader {
        width: 100%;
        height: 106px;
        margin-top: -21px;
        position: absolute;
        background: url("../../assets/img/themic/bj.png") no-repeat;
        background-size: 100% 100%;
        z-index: 40;
        .TopReturn {
          width: 142px;
          height: 40px;
          top: 37%;
          left: 2.2%;
          background: url("../../assets/img/themic/è¿å.png") no-repeat;
          background-size: 100% 100%;
          position: absolute;
          z-index: 60;
        }
      }
      .leftEchart {
        z-index: 60;
        position: absolute;
        bottom: 2px;
        height: calc(100% - 77px);
        width: 24%;
        left: 10px;
        position: absolute;
        right: 10px;
      }
      .showEcharts {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .rightEchart {
        z-index: 60;
        position: absolute;
        height: calc(100% - 77px);
        width: 24%;
        right: 10px;
        bottom: 2px;
        position: absolute;
        right: 10px;
      }
      .rightEchartShow {
        margin-right: 20px;
      }
      .right_content {
        width: 20px;
        height: 100%;
        z-index: 60;
        right: 10px;
        position: absolute;
        display: flex;
        align-items: center;
      }

      .left_content {
        width: 20px;
        height: 100%;
        z-index: 60;
        left: 10px;
        position: absolute;
        display: flex;
        align-items: center;
      }
      .LeftMenu {
        width: 20px;
        height: 100px;
        background: url("../../assets/img/themic/life.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        float: right;
      }
      .LeftMenu1 {
        width: 20px;
        height: 100px;
        background: url("../../assets/img/themic/left1.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        float: right;
      }
      .RightMenu {
        width: 20px;
        height: 100px;
        background: url("../../assets/img/themic/right.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        float: right;
      }
      .RightMenu1 {
        width: 20px;
        height: 100px;
        background: url("../../assets/img/themic/right1.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        float: right;
      }
    }
  }
  .item_menu {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .left_main_show {
    width: 0;
  }
  .right_menu {
    margin: 0;
    width: 300px;
    height: 100%;
    transition: width 2s;
    background: url("../../assets/img/themic/å³æ¡.png") no-repeat center;
    background-size: 100% 100%;
    .content_right {
      width: calc(100% - 40px);
      height: calc(100% - 60px);
      margin-top: 30px;
      margin-left: 20px;
      .contentLi {
        width: 100%;
        height: 95%;
        overflow-y: auto;
      }
      .contentBottom {
        width: 100%;
        height: 5%;
        margin-top: 5%;
        display: flex;
        justify-content: space-between;
        .right_item {
          align-items: center;
          display: flex;
          height: calc(100% - 2px);
          flex-grow: 1;
          justify-content: center;
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: white;
          background: url("../../assets/img/themic/é»è®¤çæé®èæ¯.png")
            no-repeat center;
          background-size: 100% 100%;
        }
        .changeStyle {
          background: url("../../assets/img/themic/éä¸çæé®èæ¯.png")
            no-repeat center;
          background-size: 100% 100%;
        }
      }
      li {
        padding: 10px 10px;
        color: white;
        background: url("../../assets/img/themic/listBJ.png") no-repeat center;
        background-size: 100% 100%;
      }
      li:hover {
        color: #409eff;
      }
      .changeliStyle {
        color: #409eff;
      }
    }
  }

  .right_main_show {
    width: 0;
  }
  .echart1 {
    width: 100%;
    height: 33%;
    background: url("../../assets/img/themic/xxk.png") no-repeat;
    background-size: 100% 100%;
  }

  /* å»é¤æè½¬å¨ç» */
  .el-tree /deep/ .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* æåèç¹ ä¸æªå±å¼ */
  .el-tree /deep/ .el-icon-caret-right:before {
    background: url("../../assets/img/themic/åè§ç©å½¢ 3 æ·è´ 3.png") no-repeat 0
      3px;
    content: "";
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  /* //æåèç¹ ä¸å·²å±å¼ */
  /deep/
    .el-tree
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url("../../assets/img/themic/åè§ç©å½¢ 3 æ·è´ 4.png") no-repeat 0
      3px;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  /* æ²¡æåèç¹ */
  /deep/ .el-tree .el-tree-node__expand-icon.is-leaf::before {
    background: url("../../assets/img/themic/åè§ç©å½¢ 3 æ·è´ 3.png") no-repeat 0
      3px;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  /deep/ .el-tree {
    padding-top: 15px;
    padding-left: 10px;
    // ä¸å¯å¨éæ ·å¼
    .el-tree-node {
      .is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
      }
      .el-checkbox .el-checkbox__inner {
        display: none;
      }
    }
  }
  /deep/.el-tree .el-tree-node__content:hover {
    background-color: transparent !important;
  }
  /deep/.el-tree {
    color: white !important;
    background: transparent !important;
  }
  /deep/.el-tree-node:focus > .el-tree-node__content {
    background: transparent !important;
  }
}
.title {
  position: absolute;
  top: 0;
  left: 0;
  height: 86px;
  width: 100%;
  z-index: 999;
}
.mapleft {
  position: absolute;
  top: 90px;
  left: 0px;
  // width: 20%;
  height: calc(100% - 180px);
  z-index: 999;
}
.mapright {
  position: absolute;
  top: 90px;
  right: 0px;
  // width: 20%;
  height: calc(100% - 180px);
  z-index: 999;
}
.mapbottom {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 90px;
  width: 100%;
  z-index: 999;
}
</style>

 src/views/Thematic/index1.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,977 @@
<template>
  <div class="themaic">
    <div
      class="left_menu"
      :class="{ left_main_show: !leftMenuOpen }"
    >
      <div class="tree-container">
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          default-expand-all
          :props="defaultProps"
          ref="tree"
          class="el-tree"
          @check-change="handleCheckChange"
        >
          <span
            class="custom-tree-node"
            slot-scope="{ node, data }"
          >
            <svg-icon
              v-if="!data.children"
              icon-class="file"
              class="svgIcon"
            />
            <svg-icon
              v-else-if="node.expanded"
              icon-class="floder_open"
              class="svgIcon"
            />
            <svg-icon
              v-else
              icon-class="floder_close"
              class="svgIcon"
            />
            <span
              class='fontSize14'
              :title='node.label || "-"'
            >{{node.label}}</span>
          </span>
        </el-tree>
      </div>
      <div class="changeBaseLayer">
        <div
          @click="changeMenulayer"
          class="CenDiv"
        >
          <div
            id="cenBg"
            v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
          ></div>
        </div>
      </div>

    </div>

    <div class="center_content">

      <div
        id="MapView"
        class="MapView"
      >
        <div class="TopHeader">
          <div
            @click="setTopReturn"
            class="TopReturn"
          ></div>
        </div>
        <div class="leftEchart">
          <div class="showEcharts">
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart11></echart11>
            </div>
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart12></echart12>
            </div>
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart13></echart13>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart21></echart21>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart22></echart22>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart23></echart23>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart31></echart31>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart32></echart32>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart33></echart33>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart44></echart44>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart45></echart45>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart46></echart46>
            </div>
          </div>
        </div>
        <div class="rightEchart">
          <div class="showEcharts">
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart14></echart14>
            </div>
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart15></echart15>
            </div>
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart16></echart16>
            </div>

            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart24></echart24>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart25></echart25>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart26></echart26>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart34></echart34>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart35></echart35>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart36></echart36>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart41></echart41>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart42></echart42>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart43></echart43>
            </div>
          </div>
        </div>
        <div class="left_content">
          <div
            @click="showLeftMenu"
            v-show=" !leftMenuOpen"
          >
            <div class="LeftMenu"></div>
          </div>
          <div
            @click="showLeftMenu"
            v-show=" leftMenuOpen"
          >
            <div class="LeftMenu1"></div>
          </div>
        </div>

        <div class="right_content">
          <div
            @click="showRightMenu"
            v-show="!rightMenuOpen "
          >
            <div class="RightMenu"></div>
          </div>
          <div
            @click="showRightMenu"
            v-show="rightMenuOpen "
          >
            <div class="RightMenu1"></div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="right_menu"
      :class="{ right_main_show: !rightMenuOpen }"
    >
      <div class="content_right">
        <div class="contentLi">
          <ul>
            <li
              @click="changeRightList(item)"
              v-for="item in rightList"
              :class="item.id == changeSelectli ? 'changeliStyle' : ''"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="contentBottom">
          <div
            v-for="item in rightMenu"
            class="right_item"
            :class="{ changeStyle: changeSelectStyle == item.id }"
            @click="changeRightMenu(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
window.sgworld = null;
var Viewer = null;

import mapsdk from '../../components/mapsdk.vue';
import { right_menu, right_list, image_layer } from '../../assets/js/index.js';
import { perms_selectLayers } from '../../api/api.js';
import echart11 from '../../components/echart11.vue';
import echart12 from '../../components/echart12.vue';
import echart13 from '../../components/echart13.vue';
import echart14 from '../../components/echart14.vue';
import echart15 from '../../components/echart15.vue';
import echart16 from '../../components/echart16.vue';
import echart21 from '../../components/echart21.vue';
import echart22 from '../../components/echart22.vue';
import echart23 from '../../components/echart23.vue';
import echart24 from '../../components/echart24.vue';
import echart25 from '../../components/echart25.vue';
import echart26 from '../../components/echart26.vue';
import echart31 from '../../components/echart31.vue';
import echart32 from '../../components/echart32.vue';
import echart33 from '../../components/echart33.vue';
import echart34 from '../../components/echart34.vue';
import echart35 from '../../components/echart35.vue';
import echart36 from '../../components/echart36.vue';
import echart41 from '../../components/echart41.vue';
import echart42 from '../../components/echart42.vue';
import echart43 from '../../components/echart43.vue';
import echart44 from '../../components/echart44.vue';
import echart45 from '../../components/echart45.vue';
import echart46 from '../../components/echart46.vue';
import axios from 'axios';
export default {
  components: {
    mapsdk,
    echart11,
    echart12,
    echart13,
    echart14,
    echart15,
    echart16,
    echart21,
    echart22,
    echart23,
    echart24,
    echart25,
    echart26,
    echart31,
    echart32,
    echart33,
    echart34,
    echart35,
    echart36,
    echart41,
    echart43,
    echart42,
    echart44,
    echart45,
    echart46,
  },
  data() {
    return {
      typeIndex: null,
      leftMenuOpen: false,
      rightMenuOpen: false,
      changeSelectStyle: null,
      changeSelectli: null,
      rightMenu: [],
      rightList: [],
      treeData: [],
      centerFlag: false,
      isActive: false,
      isMenuLayer: true,
      openEcharts: false,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  mounted() {

    this.rightList = right_list[0];
    this.rightMenu = right_menu;
    this.changeSelectli = this.rightList[0].id;
    this.changeSelectStyle = this.rightMenu[0].id;
    this.initMapView();
    this.addImageLayer();
 
   
  },
  created() {

  },
  methods: {
    setTopReturn() {
      this.$router.push('/Synthesis');
      sessionStorage.setItem('changeSelectStyle', 3)
    },
    changeRightList(res) {
      this.changeSelectli = res.id;
      if (res.layer != null) {
        var layer = res.layer;
        this.$refs.tree.setCheckedKeys(layer);
      }
      if (res.index != null) {
        this.openEcharts = true;
        this.typeIndex = res.index;
      } else {
        this.openEcharts = false;
        this.typeIndex = null;
      }
      var vid = res.id;

      if (vid.indexOf('b') != -1) {
        var url = geoserverWFS + '%27' + res.name + '%27';
        axios.get(url).then((res) => {
          if (res.status == 200) {
            var point = res.data.features[0].geometry.coordinates;
            //å®ä½
            Viewer.camera.flyTo({
              //è·³è½¬è§è§
              destination: new Cesium.Cartesian3.fromDegrees(
                point[0],
                point[1],
                8000
              ),
            });
          }
        });
      } else if (vid.indexOf('a') != -1) {
        //å®ä½
        Viewer.camera.flyTo({
          //è·³è½¬è§è§
          destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
        });
      } else if (vid.indexOf('c') != -1) {
        var url = geoserverWFSLine + '%27' + res.name + '%27';
        axios.get(url).then((res) => {

          if (res.status == 200) {
            if (res.data.features.length == 0) return;
            var std = [];
            for (var i in res.data.features) {
              var featurLayer = res.data.features[i];
              var path = featurLayer.geometry.coordinates[0];
              for (var j in path) {
                // std.push(path[j][0], path[j][1], 50);
                std.push(path[j])
              }
            }

            var str = this.removeRepeat1(std);
            var val = [];
            for (var i in str) {
              val.push(str[i][0], str[i][1], 50);
            }
            this.showPathLine(val)
          }
        });
      }
    },
    removeRepeat1(arr) {
      const obj = {};
      return arr.filter(item => {
        if (!obj[item.toString()]) {
          obj[item.toString()] = item.toString();
          return item;
        }
      });
    },

    showPathLine(res) {

      window.sgworld.Creator.getFlyData(res, (data) => {
        data.showPoint = false;
        data.showLine = true;
        data.mode = 1;
        data.height = 2000;

        // å¼¹çªæ°æ®
        window.PathAnimationData = {
          flyData: data,
        };
        window.PathAnimationData.winIndex = layer.open({
          type: 2,
          title: 'è·¯å¾å¨ç»',
          shade: false,
          area: ['352px', '690px'],
          offset: 'r',
          skin: 'other-class',
          content: SmartEarthRootUrl + 'Workers/path/Path.html',
          end: function () {
            PathAnimationData.fly && PathAnimationData.fly.exit();
          },
        });
      });
    },
    showLeftMenu() {
      this.leftMenuOpen = !this.leftMenuOpen;
      var a = 0;
      var layer = setInterval(() => {
        a++;
        this.$bus.$emit('resizeEchart', true);
        if (a == 20) {
          clearInterval(layer);
          this.$bus.$emit('resizeEchart', true);
        }
      }, 100);
    },
    showRightMenu() {
      this.rightMenuOpen = !this.rightMenuOpen;
      var a = 0;
      var layer = setInterval(() => {
        a++;
        this.$bus.$emit('resizeEchart', true);
        if (a == 30) {
          clearInterval(layer);
          this.$bus.$emit('resizeEchart', true);
        }
      }, 100);
    },
    changeRightMenu(res) {
      this.rightList = right_list[parseInt(res.id) - 1];
      this.changeSelectStyle = res.id;
    },
    initMapView() {
      sgworld = new SmartEarth.SGWorld('MapView', {
        licenseServer: window.sceneConfig.licenseServer,
      });

      Viewer = sgworld._Viewer;
      Viewer.imageryLayers._layers[0].show = false;
      //å®ä½
      sgworld.Navigate.jumpTo({
        //è·³è½¬è§è§
        destination: new Cesium.Cartesian3.fromDegrees(
          116.3911,
          39.9115,
          100000
        ),
      });
      for (var i in gaoDeBaseUrl) {
        sgworld.Creator.createUrlTemplateImageryProvider(
          gaoDeBaseUrl[i].label,
          gaoDeBaseUrl[i].url,
          '0',
          undefined,
          true,
          ''
        );
      }

      //æ¾ç¤ºfps
      Viewer.scene.debugShowFramesPerSecond = false;
      //å¯¼èªæ§ä»¶
      sgworld.navControl('nav', false);
      //æ¯ä¾å°º
      sgworld.navControl('scale', false);

      Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: demLayer
      });


    },
    changeMenulayer() {
      this.isActive = !this.isActive;
      this.isMenuLayer = !this.isMenuLayer;
      this.setLayerVisible();
    },
    setLayerVisible() {
      if (this.isActive == true) {
        Viewer.imageryLayers._layers[1].show = true;
        Viewer.imageryLayers._layers[2].show = false;
        Viewer.imageryLayers._layers[3].show = false;
      } else {
        Viewer.imageryLayers._layers[1].show = false;
        Viewer.imageryLayers._layers[2].show = true;
        Viewer.imageryLayers._layers[3].show = true;
      }
    },
    async addImageLayer() {
      const data = await perms_selectLayers();
      // var val_layer = this.treeData[0].children;
      // var std = [];
      // for (var i = 0; i < val_layer.length; i++) {
      //   if (val_layer[i].id != 13 && val_layer[i].id != 14) {
      //     let layerWMS = new Cesium.WebMapServiceImageryProvider({
      //       url: geoServerURl,
      //       layers: val_layer[i].resource,
      //       parameters: {
      //         transparent: true,
      //         format: 'image/png',
      //       },
      //     });
      //     layerWMS.name = val_layer[i].label;
      //     Viewer.imageryLayers.addImageryProvider(layerWMS);
      //     std.push(val_layer[i].id);
      //   }
      // }
      if (data.code != 200) {
        return this.$message.error("å¾å±åè¡¨æ¥è¯¢å¤±è´¥");
      }
      var std = [];
      var layer_list = [];
      var layer_groups = [];
      for (var i in data.result) {
        if (data.result[i].type == 1) {
          layer_groups.push({
            id: data.result[i].id,
            label: data.result[i].cnName,
            type: data.result[i].type,
            isEdit: false,
            children: [],
          })
        } else if (data.result[i].type == 2) {
          if (data.result[i].url != null) {
            var layer_entity = {
              id: data.result[i].id,
              pid: data.result[i].pid,
              label: data.result[i].cnName,
              resource: data.result[i].url,
              type: data.result[i].type,
              isEdit: false,
            }
            layer_list.push(layer_entity)
            if (data.result[i].isShow == 1) {
              std.push(data.result[i].id);
            this.setAddImageLayer(layer_entity);
            }
          }
        }
      }
      for (var i in layer_list) {
        for (var j in layer_groups) {
          if (layer_list[i].pid === layer_groups[j].id) {
            layer_groups[j].children.push(layer_list[i])
          }
        }
      }
      this.treeData = layer_groups;

      this.$refs.tree.setCheckedKeys(std);
    },
    handleCheckChange(data, checked, indeterminate) {
      if (data.children != null) return;
      var std = [];
      for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
        var val_id =
          Viewer.imageryLayers._layers[i].imageryProvider.name;
        if (val_id == data.label) {
          std.push(data.label)
          const img_layer = Viewer.imageryLayers._layers[i];
          img_layer.show = checked;
        }
      }
      if (std.length == 0 && checked == true) {
        this.setAddImageLayer(data);
      }
    },
    setAddImageLayer(res) {
      let layerWMS = new Cesium.WebMapServiceImageryProvider({
        url: geoServerURl,
        layers: res.resource,
        parameters: {
          transparent: true,
          format: 'image/png',
        },
      });
      layerWMS.name = res.label;
      Viewer.imageryLayers.addImageryProvider(layerWMS);
    }
  },
};
</script>

<style lang="less" scoped>
.themaic {
  width: 100%;
  height: 100%;
  background: #303030;
  position: absolute;
  display: flex;
  overflow: hidden;
  .left_menu {
    margin: 0;
    width: 300px;
    height: 100%;
    transition: width 2s;
    background: url("../../assets/img/themic/å·¦æ¡.png") no-repeat center;
    background-size: 100% 100%;

    .tree-container {
      margin: 10px;
      height: 90%;
      overflow-y: auto;
    }
    .changeBaseLayer {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      overflow: hidden;
    }
    .CenDiv {
      height: 40px;
      width: 60px;

      margin-right: 7%;
      border-radius: 5px;
      bottom: 3%;
    }

    // .CenDiv:hover {

    // }
    .active {
      height: 40px;
      width: 60px;
      background: url("../../assets/img/themic/é»è®¤çå½±å.png") no-repeat center;
      position: absolute;
      background-size: 100% 100%;
      border-radius: 5px;
    }
    .menuLayer {
      height: 40px;
      width: 60px;
      background: url("../../assets/img/themic/é»è®¤çåºå¾.png") no-repeat center;
      position: absolute;
      background-size: 100% 100%;
      border-radius: 5px;
    }
  }
  .center_content {
    flex: 1;
    height: 100%;
    .MapView {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      float: left;
      position: relative;
      display: flex;
      justify-content: space-around;
      .TopHeader {
        width: 100%;
        height: 106px;
        margin-top: -21px;
        position: absolute;
        background: url("../../assets/img/themic/bj.png") no-repeat;
        background-size: 100% 100%;
        z-index: 40;
        .TopReturn {
          width: 142px;
          height: 40px;
          top: 37%;
          left: 2.2%;
          background: url("../../assets/img/themic/è¿å.png") no-repeat;
          background-size: 100% 100%;
          position: absolute;
          z-index: 60;
        }
      }
      .leftEchart {
        z-index: 60;
        position: absolute;
        bottom: 2px;
        height: calc(100% - 77px);
        width: 24%;
        left: 10px;
        position: absolute;
        right: 10px;
      }
      .showEcharts {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .rightEchart {
        z-index: 60;
        position: absolute;
        height: calc(100% - 77px);
        width: 24%;
        right: 10px;
        bottom: 2px;
        position: absolute;
        right: 10px;
      }
      .rightEchartShow {
        margin-right: 20px;
      }
      .right_content {
        width: 20px;
        height: 100%;
        z-index: 60;
        right: 10px;
        position: absolute;
        display: flex;
        align-items: center;
      }

      .left_content {
        width: 20px;
        height: 100%;
        z-index: 60;
        left: 10px;
        position: absolute;
        display: flex;
        align-items: center;
      }
      .LeftMenu {
        width: 20px;
        height: 100px;
        background: url("../../assets/img/themic/life.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        float: right;
      }
      .LeftMenu1 {
        width: 20px;
        height: 100px;
        background: url("../../assets/img/themic/left1.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        float: right;
      }
      .RightMenu {
        width: 20px;
        height: 100px;
        background: url("../../assets/img/themic/right.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        float: right;
      }
      .RightMenu1 {
        width: 20px;
        height: 100px;
        background: url("../../assets/img/themic/right1.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        float: right;
      }
    }
  }
  .item_menu {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .left_main_show {
    width: 0;
  }
  .right_menu {
    margin: 0;
    width: 300px;
    height: 100%;
    transition: width 2s;
    background: url("../../assets/img/themic/å³æ¡.png") no-repeat center;
    background-size: 100% 100%;
    .content_right {
      width: calc(100% - 40px);
      height: calc(100% - 60px);
      margin-top: 30px;
      margin-left: 20px;
      .contentLi {
        width: 100%;
        height: 95%;
        overflow-y: auto;
      }
      .contentBottom {
        width: 100%;
        height: 5%;
        margin-top: 5%;
        display: flex;
        justify-content: space-between;
        .right_item {
          align-items: center;
          display: flex;
          height: calc(100% - 2px);
          flex-grow: 1;
          justify-content: center;
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: white;
          background: url("../../assets/img/themic/é»è®¤çæé®èæ¯.png")
            no-repeat center;
          background-size: 100% 100%;
        }
        .changeStyle {
          background: url("../../assets/img/themic/éä¸çæé®èæ¯.png")
            no-repeat center;
          background-size: 100% 100%;
        }
      }
      li {
        padding: 10px 10px;
        color: white;
        background: url("../../assets/img/themic/listBJ.png") no-repeat center;
        background-size: 100% 100%;
      }
      li:hover {
        color: #409eff;
      }
      .changeliStyle {
        color: #409eff;
      }
    }
  }

  .right_main_show {
    width: 0;
  }
  .echart1 {
    width: 100%;
    height: 33%;
    background: url("../../assets/img/themic/xxk.png") no-repeat;
    background-size: 100% 100%;
  }

  /* å»é¤æè½¬å¨ç» */
  .el-tree /deep/ .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* æåèç¹ ä¸æªå±å¼ */
  .el-tree /deep/ .el-icon-caret-right:before {
    background: url("../../assets/img/themic/åè§ç©å½¢ 3 æ·è´ 3.png") no-repeat 0
      3px;
    content: "";
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  /* //æåèç¹ ä¸å·²å±å¼ */
  /deep/
    .el-tree
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url("../../assets/img/themic/åè§ç©å½¢ 3 æ·è´ 4.png") no-repeat 0
      3px;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  /* æ²¡æåèç¹ */
  /deep/ .el-tree .el-tree-node__expand-icon.is-leaf::before {
    background: url("../../assets/img/themic/åè§ç©å½¢ 3 æ·è´ 3.png") no-repeat 0
      3px;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  /deep/ .el-tree {
    padding-top: 15px;
    padding-left: 10px;
    // ä¸å¯å¨éæ ·å¼
    .el-tree-node {
      .is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
      }
      .el-checkbox .el-checkbox__inner {
        display: none;
      }
    }
  }
  /deep/.el-tree .el-tree-node__content:hover {
    background-color: transparent !important;
  }
  /deep/.el-tree {
    color: white !important;
    background: transparent !important;
  }
  /deep/.el-tree-node:focus > .el-tree-node__content {
    background: transparent !important;
  }
}
</style>

 src/views/Tools/LayerTree.vue

@@ -321,7 +321,6 @@
        var node= this.currentNode;
        var data = this.currentData;
        let copyNode = this.currentNode
        debugger
        // copyNode.previousSibling = {...node. }
        // copyNode.nextSibling = {...node.nextSibling}
        // window.sessionStorage.setItem('menuNode',CircularJSON.stringify(copyNode))

 vue.config.js

@@ -1,9 +1,19 @@
const path = require("path")
const resolve = dir => path.join(__dirname, dir)
module.exports = {
  lintOnSave: false,
  publicPath: './',
  publicPath: "./",
  devServer: {
    host: '0.0.0.0', //æå®è¦ä½¿ç¨ç host
    host: "0.0.0.0", //æå®è¦ä½¿ç¨ç host
    port: 12315, //æå®ç«¯å£å·ä»¥ä¾¦å¬
    hotOnly: false, //å¯ç¨çæ¨¡åæ¿æ¢ï¼èæ éé¡µé¢å·æ°ä½ä¸ºæå»ºå¤±è´¥æ¶çåéã
  },
};

  configureWebpack: {
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
  },
}

			@@ -10,6 +10,7 @@
			},
			"dependencies": {
			"@turf/turf": "^6.5.0",
			"animate.css": "^4.1.1",
			"aws-sdk": "^2.963.0",
			"axios": "^0.21.1",
			"cesium": "^1.84.0",

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,461 @@
			ï»¿<!DOCTYPE html>
			<html lang="en">

			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
			<title>å·¥ç¨å·¡æ£</title>
			<link rel="stylesheet" href="../layui/css/layui.css">
			<style>
			html,
			body,
			.layui-prop {
			background-color: rgba(0, 0, 0, 0);
			height: 100%;
			color: #fff;
			overflow-y: auto;
			overflow-x: hidden;
			}

			.layui-prop::-webkit-scrollbar {
			/æ»å¨æ¡æ´ä½æ ·å¼/
			width: 8px;
			/é«å®½åå«å¯¹åºæ¨ªç«æ»å¨æ¡çå°ºå¯¸/
			height: 8px;
			scrollbar-arrow-color: red;
			}

			.layui-prop::-webkit-scrollbar-thumb {
			border-radius: 5px;
			-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
			box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
			background: rgba(218, 218, 218, 0.5);
			scrollbar-arrow-color: red;
			}

			.layui-prop::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
			box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
			border-radius: 0;
			background: rgba(218, 218, 218, 0.1);
			}

			form {
			width: 95%;
			}

			html {
			overflow: hidden;
			}

			.layui-form-item {
			width: 313px !important;
			}

			.layui-input {
			background-color: #fff !important;
			height: 30px;
			margin-top: 5px;
			}

			.layui-form-label {
			width: 96px !important;
			}

			.layui-input-block {
			width: 150px !important;
			margin-left: 150px !important;
			}

			.layui-prop {
			margin-left: 10px;
			}

			.layui-form-item .line {
			display: block;
			}

			.layui-input-block {
			margin-left: 0;
			}

			.layui-form-item {
			border: 1px solid;
			margin-bottom: 0px !important;
			border-bottom: none;
			}

			.layui-input {
			background-color: rgba(0, 0, 0, 0) !important;
			margin-top: 5px;
			color: #fff;
			}

			.layui-form-select dl {
			background-color: rgba(0, 0, 0, 0.5) !important;
			}

			.layui-form-select dl dd:hover {
			background-color: #f2f2f250;
			}

			.bnt-box {
			text-align: center;
			height: 58px;
			}

			.bnt-box button {
			margin-top: 10px;
			}

			.fly {
			display: none;
			}

			#flySpeed {
			padding: 19px 0;
			}
			</style>
			</head>

			<body>
			<div class="layui-prop">
			<div class="bnt-box">
			<button type="button" class="layui-btn layui-btn-normal" id="start">ç»§ç»å·¡æ£</button>
			<button type="button" class="layui-btn layui-btn-normal" id="stop" style="margin-left: 0;">æåå·¡æ£</button>
			<button type="button" class="layui-btn layui-btn-normal" id="exit">éåºå·¡æ£</button>
			</div>
			<form class="layui-form" action="">
			<div class="layui-form-item">
			<label class="layui-form-label">è·¯çº¿åç§°</label>
			<div class="layui-input-block" id="roadName" style="line-height: 38px;">

			</div>
			</div>
			<div class="layui-form-item">
			<label class="layui-form-label">è§è§æ¨¡å¼</label>
			<div class="layui-input-block">
			<select id="sjms" name="sjms" lay-filter="sjms">
			<option value="0">è·éæ¨¡å</option>
			<option value="1">ç¬¬ä¸äººç§°è§è§</option>
			<option value="2">ä¸å¸è§è§</option>
			</select>
			</div>
			</div>
			<div class="layui-form-item norline fly">
			<label class="layui-form-label">é£è¡é«åº¦</label>
			<div class="layui-input-block">
			<input id="cameraHeight" type="text" value="0" name="cameraHeight" lay-filter="cameraHeight"
			class="layui-input" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
			</div>
			</div>
			<div class="layui-form-item norline fly notGod">
			<label class="layui-form-label">é£è¡è·ç¦»</label>
			<div class="layui-input-block">
			<input id="cameraDistance" type="text" value="0" name="cameraDistance" lay-filter="cameraDistance"
			class="layui-input" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
			</div>
			</div>
			<div class="layui-form-item norline fly notGod">
			<label class="layui-form-label">ä¿¯ä»°è§</label>
			<div class="layui-input-block">
			<input id="pitch" type="text" value="0" name="pitch" lay-filter="pitch" class="layui-input"
			onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
			</div>
			</div>
			<div class="layui-form-item norline">
			<label class="layui-form-label">å·¡æ£éåº¦(m/s)</label>
			<div class="layui-input-block">
			<div id="flySpeed" class="flySpeed"></div>
			</div>
			</div>
			<div class="layui-form-item norline">
			<label class="layui-form-label">æ»é¿åº¦</label>
			<div class="layui-input-block" id="totalLen" style="line-height: 38px;">
			</div>
			</div>
			<div class="layui-form-item norline">
			<label class="layui-form-label">å·²å·¡æ£é¿åº¦</label>
			<div class="layui-input-block" id="distanceTraveled" style="line-height: 38px;">
			0
			</div>
			</div>
			<div class="layui-form-item norline">
			<label class="layui-form-label">æ»æ¶é¿</label>
			<div class="layui-input-block" id="totalTime" style="line-height: 38px;">
			</div>
			</div>
			<div class="layui-form-item norline">
			<label class="layui-form-label">å·²å·¡æ£æ¶é´</label>
			<div class="layui-input-block" id="time" style="line-height: 38px;">
			0
			</div>
			</div>
			<div class="layui-form-item norline">
			<label class="layui-form-label">æ¯å¦æ¾ç¤ºæ¨¡å</label>
			<div class="layui-input-block">
			<input id="showModel" type="checkbox" lay-skin="switch" lay-filter="showModel" value="off"
			lay-text="æ¯\|å¦">
			</div>
			</div>
			<div class="layui-form-item norline">
			<label class="layui-form-label">æ¯å¦æ¾ç¤ºè·¯çº¿</label>
			<div class="layui-input-block">
			<input id="showLine" type="checkbox" lay-skin="switch" lay-filter="showLine" value="off"
			lay-text="æ¯\|å¦">
			</div>
			</div>
			<div class="layui-form-item norline">
			<label class="layui-form-label">éåº¦</label>
			<div class="layui-input-block" id="sd" style="line-height: 38px;">
			50m/s
			</div>
			</div>
			<div class="layui-form-item norline">
			<label class="layui-form-label">ç»åº¦</label>
			<div class="layui-input-block" id="jd" style="line-height: 38px;">
			</div>
			</div>

			<div class="layui-form-item norline">
			<label class="layui-form-label">çº¬åº¦</label>
			<div class="layui-input-block" id="wd" style="line-height: 38px;">
			</div>
			</div>

			<div class="layui-form-item norline">
			<label class="layui-form-label">å·¡æ£é«ç¨</label>
			<div class="layui-input-block" id="height" style="line-height: 38px;">
			</div>
			</div>
			<div class="layui-form-item norline">
			<label class="layui-form-label">å°é¢é«ç¨</label>
			<div class="layui-input-block" id="globeHeight" style="line-height: 38px;">
			</div>
			</div>
			<div class="layui-form-item">
			<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="ratio">
			<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
			</div>
			</div>
			</form>
			</div>
			<script src="../jquery-2.0.3.js"></script>
			<script src="../layui/layui.js"></script>

			<script>
			/// <reference path="sjcs.js" />
			var fly = null;
			var sgworld = parent.sgworld;
			var routeData = parent.PathAnimationData.flyData;
			var url = parent.SmartEarthRootUrl + "Workers/Model/xiaoche.glb";
			$('#start').hide();
			$('#stop').show();
			var form, element, slider;
			var ratio = 0;
			layui.use(['form', 'element', 'slider'], function () {
			form = layui.form;
			element = layui.element;
			slider = layui.slider;

			if (routeData.distance) {
			document.getElementById("totalLen").innerText = getDistance(routeData.distance);
			}
			if (routeData.Totaltime) {
			document.getElementById("totalTime").innerText = getTime(routeData.Totaltime);
			}
			if (routeData.range) {
			document.getElementById("cameraDistance").value = routeData.range;
			}
			if (routeData.height) {
			document.getElementById("cameraHeight").value = routeData.height;
			}
			if (routeData.pitch) {
			document.getElementById("pitch").value = routeData.pitch;
			}
			document.getElementById("roadName").innerText = routeData.name;

			fly = sgworld.Creator.createDynamicObject(routeData, url, shuj);
			parent.PathAnimationData.fly = fly

			if (routeData.mode) {
			$('#sjms option[value="' + routeData.mode + '"]').attr('selected', '');
			form.render();
			switch (routeData.mode) {
			case 1:
			$('.fly').show();
			break;
			case 2:
			$('.fly').show();
			$('.notGod').hide();
			break;
			}
			}
			form.on('select(sjms)', function (data) {
			if (data.value === "0") {
			fly && fly.changeFlyMode(0);
			routeData && (routeData.mode = 0);
			$('.fly').hide();
			} else if (data.value === "1") {
			fly && fly.changeFlyMode(1);
			routeData && (routeData.mode = 1);
			$('.fly').show();
			} else if (data.value === "2") {
			fly && fly.changeFlyMode(2);
			routeData && (routeData.mode = 2);
			$('.fly').show();
			$('.notGod').hide();
			}
			});

			slider.render({
			elem: '#flySpeed',
			theme: '#1E9FFF', //ä¸»é¢è²
			min: 1,
			max: 500,
			value: 50,
			change: function (value) {
			let multiplier = value / 50.5;
			fly && fly.setMultiplier(multiplier);
			routeData && (routeData.multiplier = multiplier);
			document.getElementById("sd").innerText = value + 'm/s';
			}
			});

			$('#cameraDistance').on('input propertychange', function (event) {
			var distance = $(this).val().replace(/[^\d\.\-]/g, '');
			fly && fly.setFlyDistance(parseFloat(distance));
			routeData && (routeData.range = parseFloat(distance));
			});
			$('#cameraHeight').on('input propertychange', function (event) {
			var height = $(this).val().replace(/[^\d\.\-]/g, '');
			fly && fly.setFlyHeight(parseFloat(height));
			routeData && (routeData.height = parseFloat(height));
			});
			$('#pitch').on('input propertychange', function (event) {
			var pitch = $(this).val().replace(/[^\d\.\-]/g, '');
			fly && fly.setFlyPitch(parseFloat(pitch));
			routeData && (routeData.pitch = parseFloat(pitch));
			});
			if (routeData.showModel) {
			$('#showModel').next().click();
			$('#showModel').attr('value', 'on');
			}
			form.on('switch(showModel)', function (data) {
			fly && fly.showModel(this.checked);
			routeData && (routeData.showModel = this.checked);
			});
			if (routeData.showLine) {
			$('#showLine').next().click();
			$('#showLine').attr('value', 'on');
			}
			form.on('switch(showLine)', function (data) {
			fly && fly.showLine(this.checked);
			routeData && (routeData.showLine = this.checked);
			});
			//è¿åº¦æ¡
			setInterval(function () {
			element.progress('ratio', ratio + '%');
			}, 500);
			});
			//æé®äºä»¶
			$(".bnt-box button").click(function () {
			var id = this.id;
			switch (id) {
			case 'start':
			fly && fly.isPause(false);
			$('#start').hide();
			$('#stop').show();
			break;
			case 'stop':
			fly && fly.isPause(true);
			$('#start').show();
			$('#stop').hide();
			break;
			case 'exit':
			parent.layer.close(parent.PathAnimationData.winIndex)
			break;
			}
			});

			function shuj(data) {
			if (data.distanceTraveled) {
			//å·²å·¡æ£é¿åº¦
			document.getElementById("distanceTraveled").innerText = getDistance(data.distanceTraveled);
			}
			if (data.time) {
			//å·²å·¡æ£æ¶é´
			document.getElementById("time").innerText = getTime(parseInt(data.time));
			}
			if (data.longitude) {
			//ç»åº¦
			document.getElementById("jd").innerText = data.longitude.toFixed(7) + 'Â°';
			}
			if (data.latitude) {
			//çº¬åº¦
			document.getElementById("wd").innerText = data.latitude.toFixed(7) + 'Â°';
			}
			// if (data.speed) {
			// //éåº¦
			// document.getElementById("sd").innerText = data.speed;
			// }
			if (data.height) {
			//éåº¦
			document.getElementById("height").innerText = getDistance(data.height);
			}
			if (data.globeHeight) {
			//éåº¦
			document.getElementById("globeHeight").innerText = getDistance(data.globeHeight);
			}
			if (data.ratio) {
			ratio = parseInt(data.ratio * 100);
			}
			}

			//èªå¨ç¹å»å³éçªå£ç¹å³éäºä»¶
			function closeLayer() {
			var $title = $(window.parent.document).find('.layui-layer-title');
			if ($title.length > 0) {
			$title.each(function (i, item) {
			if (item.innerHTML === "å·¡æ£è·¯çº¿") {
			var closeButton = $(item).parent().find('.layui-layer-close');
			var event = document.createEvent('MouseEvents');
			event.initEvent("click", false, true);
			closeButton[0].dispatchEvent(event);
			}
			})
			}
			}

			function getTime(data) {
			var time;
			if (data < 60) {
			time = data + "ç§";
			} else if (data >= 60 && data < 3600) {
			time = Math.floor(data / 60) + 'å' + data % 60 + 'ç§';
			} else {
			var h = Math.floor(data / 3600);
			data -= h * 3600;
			var m = Math.floor(data / 60);
			data -= m * 60;
			time = h + 'å°æ¶' + m + 'å' + data + 'ç§';
			}
			return time;
			}

			function getDistance(data) {
			var dis;
			data = parseFloat(data).toFixed(2);
			data = parseFloat(data);
			if (data >= 1000) {
			dis = (data / 1000).toFixed(3) + "åç±³";
			} else {
			dis = data + "ç±³";
			}
			return dis;
			}
			</script>
			</body>

			</html>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,252 @@
			<template>
			<div class="project_tree" :class="{ left_main_show: !leftMenuOpen }">
			<div class="tree-container">
			<el-tree
			:data="treeData"
			show-checkbox
			node-key="id"
			default-expand-all
			:props="defaultProps"
			ref="tree"
			class="el-tree"
			@check-change="handleCheckChange"
			>
			<div
			style="display: flex"
			class="custom-tree-node"
			slot-scope="{ node, data }"
			>
			<div style="margin-left: 0px; padding-left: 15px">
			<i
			v-if="data.children && data.children.length > 0"
			style="color: yellow"
			class="el-icon-folder-opened"
			></i>
			<i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
			</div>

			<div
			class="tree-label"
			:title="node.label \|\| '-'"
			>
			{{ node.label }}
			</div>
			</div>
			</el-tree>
			</div>
			<div class="changeBaseLayer">
			<div @click="changeMenulayer" class="CenDiv">
			<div
			id="cenBg"
			v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
			></div>
			</div>
			</div>
			</div>
			</template>

			<script>
			import { right_menu, right_list, image_layer } from "@/assets/js/index.js"

			import { perms_selectLayers } from "@/api/api.js"

			export default {
			data() {
			return {
			treeData: [],
			defaultProps: {
			children: "children",
			label: "label",
			},
			typeIndex: null,
			leftMenuOpen: false,
			rightMenuOpen: false,
			changeSelectStyle: null,
			changeSelectli: null,
			rightMenu: [],
			rightList: [],
			treeData: [],
			centerFlag: false,
			isActive: false,
			isMenuLayer: true,
			openEcharts: false,
			}
			},

			mounted() {
			this.rightList = right_list[0]
			this.rightMenu = right_menu
			this.changeSelectli = this.rightList[0].id
			this.changeSelectStyle = this.rightMenu[0].id
			this.addImageLayer()
			},
			methods: {
			async addImageLayer() {
			const data = await perms_selectLayers()
			if (data.code != 200) {
			return this.$message.error("å¾å±åè¡¨æ¥è¯¢å¤±è´¥")
			}
			var std = []
			var layer_list = []
			var layer_groups = []
			for (var i in data.result) {
			if (data.result[i].type == 1) {
			layer_groups.push({
			id: data.result[i].id,
			label: data.result[i].cnName,
			type: data.result[i].type,
			isEdit: false,
			children: [],
			})
			} else if (data.result[i].type == 2) {
			if (data.result[i].url != null) {
			var layer_entity = {
			id: data.result[i].id,
			pid: data.result[i].pid,
			label: data.result[i].cnName,
			resource: data.result[i].url,
			type: data.result[i].type,
			isEdit: false,
			}
			layer_list.push(layer_entity)
			if (data.result[i].isShow == 1) {
			std.push(data.result[i].id)
			this.setAddImageLayer(layer_entity)
			}
			}
			}
			}
			for (var i in layer_list) {
			for (var j in layer_groups) {
			if (layer_list[i].pid === layer_groups[j].id) {
			layer_groups[j].children.push(layer_list[i])
			}
			}
			}
			this.treeData = layer_groups

			this.$refs.tree.setCheckedKeys(std)
			},
			handleCheckChange(data, checked, indeterminate) {
			if (data.children != null) return
			var std = []
			for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
			var val_id = Viewer.imageryLayers._layers[i].imageryProvider.name
			if (val_id == data.label) {
			std.push(data.label)
			const img_layer = Viewer.imageryLayers._layers[i]
			img_layer.show = checked
			}
			}
			if (std.length == 0 && checked == true) {
			this.setAddImageLayer(data)
			}
			},
			setAddImageLayer(res) {
			let layerWMS = new Cesium.WebMapServiceImageryProvider({
			url: geoServerURl,
			layers: res.resource,
			parameters: {
			transparent: true,
			format: "image/png",
			},
			})
			layerWMS.name = res.label
			Viewer.imageryLayers.addImageryProvider(layerWMS)
			},
			changeMenulayer() {
			this.isActive = !this.isActive
			this.isMenuLayer = !this.isMenuLayer
			this.setLayerVisible()
			},
			setLayerVisible() {
			if (this.isActive == true) {
			Viewer.imageryLayers._layers[1].show = true
			Viewer.imageryLayers._layers[2].show = false
			Viewer.imageryLayers._layers[3].show = false
			} else {
			Viewer.imageryLayers._layers[1].show = false
			Viewer.imageryLayers._layers[2].show = true
			Viewer.imageryLayers._layers[3].show = true
			}
			},
			},
			}
			</script>

			<style lang="scss" scoped>
			.project_tree {
			margin: 0;
			width: 300px;
			height: 100%;
			transition: width 2s;
			background: url("~@/assets/img/themic/å·¦æ¡.png") no-repeat center;
			background-size: 100% 100%;

			.tree-container {
			margin: 10px;
			height: 90%;
			overflow-y: auto;
			}
			.changeBaseLayer {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			overflow: hidden;
			}
			.CenDiv {
			height: 40px;
			width: 60px;

			margin-right: 7%;
			border-radius: 5px;
			bottom: 3%;
			}

			// .CenDiv:hover {

			// }
			.active {
			height: 40px;
			width: 60px;
			background: url("~@/assets/img/themic/é»è®¤çå½±å.png") no-repeat center;
			position: absolute;
			background-size: 100% 100%;
			border-radius: 5px;
			}
			.menuLayer {
			height: 40px;
			width: 60px;
			background: url("~@/assets/img/themic/é»è®¤çåºå¾.png") no-repeat center;
			position: absolute;
			background-size: 100% 100%;
			border-radius: 5px;
			}
			}
			</style>

			<style lang="scss">
			.leftContainer {
			.project_tree {
			.el-tree-node__content > label.el-checkbox {
			margin-right: -30px;
			}
			.el-tree-node__content > .el-tree-node__expand-icon {
			visibility: hidden;
			}
			.el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
			display: block;
			visibility: visible;
			}
			.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
			display: none;
			// visibility: hidden;
			}
			.tree-label {
			padding-left: 10px;
			font-size: 16px;
			color: #fff;
			}
			}
			}
			</style>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,194 @@
			<template>
			<div class="bottom">
			<div class="bottom1">
			<div class="bottom11"></div>
			<div class="bottom12">
			<div class="bottombtn">
			<el-popover
			popper-class="popover"
			placement="top"
			width="100"
			trigger="click"
			>
			<!-- åå®¹ -->
			<span slot="reference">é¡¹ç®å±ç¤º</span>
			<div class="popover-content">
			<div class="popover-content__header">é¡¹ç®ä¿¡æ¯</div>
			<div class="popover-content__list">
			<div
			class="popover-content__list__item"
			v-for="item in projectInfoList"
			:key="item.id"
			:class="currProject == item.name ? 'active' : ''"
			>
			{{ item.name }}
			</div>
			</div>
			</div>
			</el-popover>
			</div>
			<div class="bottombtn">
			<el-popover placement="top" width="100" trigger="click">
			<!-- åå®¹ -->
			<span slot="reference">å·¥ç¨å±ç¤º</span>
			</el-popover>
			</div>
			<div class="bottombtn">
			<el-popover placement="top" width="100" trigger="click">
			<!-- åå®¹ -->
			<span slot="reference">å·¥ç¨å·¡è§</span>
			</el-popover>
			</div>
			</div>
			<div class="bottom13">
			<img :src="yxImg" @click="ChangeBaseLayer" />
			</div>
			</div>
			<div class="bottom2">
			<img src="../../assets/img/Screen/bottombg.png" />
			</div>
			</div>
			</template>
			<script>
			export default {
			data() {
			return {
			YXState: true,
			yxImg: require("../../assets/img/Screen/yximg.png"),
			currProject: "å¨çç®¡ç½å¾",
			projectInfoList: [
			{
			name: "å¨å½ç®¡ç½å¾",
			id: "qggwt",
			},
			{
			name: "å¨çç®¡ç½å¾",
			id: "qqgwt",
			},
			{
			name: "å¨å½é¡¹ç®",
			id: "qgxm",
			},
			{
			name: "å¨çé¡¹ç®",
			id: "qqxm",
			},
			],
			}
			},
			methods: {
			ChangeBaseLayer() {
			if (this.YXState) {
			this.yxImg = require("../../assets/img/Screen/bdimg.png")
			//å è½½ç¾åº¦å½±å
			Viewer.imageryLayers._layers[1].show = true
			Viewer.imageryLayers._layers[2].show = false
			Viewer.imageryLayers._layers[3].show = false
			} else {
			this.yxImg = require("../../assets/img/Screen/yximg.png")
			Viewer.imageryLayers._layers[1].show = false
			Viewer.imageryLayers._layers[2].show = true
			Viewer.imageryLayers._layers[3].show = true
			}
			this.YXState = !this.YXState
			},
			},
			}
			</script>
			<style lang="scss">
			.bottom {
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;

			.bottom1 {
			height: calc(100% - 36px);
			width: 100%;
			display: flex;
			flex-direction: row;

			.bottom11,
			.bottom13 {
			height: 100%;
			width: 40%;
			}

			.bottom12 {
			height: 100%;
			width: 20%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			}

			.bottom13 {
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			img {
			cursor: pointer;
			margin-right: 30px;
			width: 92px;
			height: 61px;
			}
			}

			.bottombtn {
			height: 36px;
			width: 147px;
			background: url(../../assets/img/Screen/centerbtn.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			font-size: 1rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-weight: 600;
			cursor: pointer;
			}
			}

			.bottom2 {
			height: 36px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			img {
			width: 80%;
			height: 100%;
			}
			}
			}
			.popover {
			background-color: aqua;

			.popover-content {
			&__header {
			&::before,
			&::after {
			content: "";
			display: inline-block;
			background-color: aqua;
			border-radius: 50%;
			width: 10px;
			height: 10px;
			}
			}
			&__list {
			&__item {
			background-color: orange;
			&.active {
			background-color: aqua;
			}
			}
			}
			}
			}
			</style>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,82 @@
			<template>
			<div class="current">
			<div class="leftarrow">
			<img :src="leftImg" @click="ChangeLeft" />
			</div>
			<div class="leftContainer" v-if="!ChartDisplay">
			<div class="current1"></div>
			<div class="current1"></div>
			<div class="current1"></div>
			</div>
			<div class="leftContainer" v-if="ChartDisplay">
			<project-tree></project-tree>
			<!-- <div class="current1"></div>
			<div class="current1"></div>
			<div class="current1"></div> -->
			</div>
			</div>
			</template>
			<script>
			import ProjectTree from './ProjectTree.vue'
			export default {
			components: {
			ProjectTree
			},
			data() {
			return {
			ChartDisplay: true,
			leftImg: require("../../assets/img/Screen/rightArrow.png"),
			}
			},
			mounted() {},
			methods: {
			ChangeLeft() {
			if (this.ChartDisplay) {
			this.leftImg = require("../../assets/img/Screen/leftArrow.png")
			} else {
			this.leftImg = require("../../assets/img/Screen/rightArrow.png")
			}
			this.ChartDisplay = !this.ChartDisplay
			this.$parent.ChangeWidth("left")
			},
			},
			}
			</script>
			<style lang="scss">
			.current {
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.leftarrow {
			width: 36px;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			img {
			width: 30px;
			height: 120px;
			cursor: pointer;
			}
			}
			.leftContainer {
			height: 100%;
			width: calc(100% - 36px);

			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			.current1 {
			height: 30%;
			width: 100%;
			background: url(../../assets/img/Screen/chartbg.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			}
			}
			}
			</style>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,88 @@
			<template>
			<div class="ParentCentermapdiv">
			<div id="Centermapdiv"></div>
			</div>
			</template>

			<script>

			export default {
			name: "",
			components: {},
			data() {
			return{}
			},
			mounted() {
			this.init3DMap()
			},
			methods: {
			init3DMap() {
			//å°å¾åå§å
			window.sgworld = new SmartEarth.SGWorld("Centermapdiv", {
			licenseServer: window.sceneConfig.licenseServer,
			})

			window.Viewer = window.sgworld._Viewer
			Viewer.imageryLayers._layers[0].show = false
			//å®ä½
			Viewer.camera.flyTo({
			destination: Cesium.Cartesian3.fromDegrees(110, 33, 25000000),

			});
			Viewer.imageryLayers.addImageryProvider(
			new Cesium.UrlTemplateImageryProvider({
			url: gaoDeBaseUrl[0].url,
			})
			)

			Viewer.imageryLayers.addImageryProvider(
			new Cesium.UrlTemplateImageryProvider({
			url: gaoDeBaseUrl[1].url,
			})
			)
			Viewer.imageryLayers.addImageryProvider(
			new Cesium.UrlTemplateImageryProvider({
			url: gaoDeBaseUrl[2].url,
			})
			)



			Viewer._enableInfoOrSelection = false
			//æ¾ç¤ºfps
			Viewer.scene.debugShowFramesPerSecond = false
			//å¯¼èªæ§ä»¶
			window.sgworld.navControl("nav", false)
			//æ¯ä¾å°º
			window.sgworld.navControl("scale", false)
			//å¼å¯æ·±åº¦æ£æµ
			sgworld.Analysis.depthTestAgainstTerrain(true)


			Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
			url: demLayer,
			})

			//æ¹åå¤©ç©ºé¢è²ä¸ºé»è²
			Viewer.scene.skyBox.show = false //å³éå¤©ç©ºçï¼å¦åä¼æ¾ç¤ºå¤©ç©ºé¢è²
			//èæ¯éæ
			Viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
			},

			}

			}
			</script>

			<style scoped lang="scss">
			.ParentCentermapdiv{
			display: fixed;
			height: 100%;
			width: 100%;
			}
			#Centermapdiv{
			height: 100%;
			width: 100%;
			}

			</style>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,145 @@
			<template>
			<div class="top">
			<div class="topleft">
			<div
			class="topleft1 topleftC"
			:class="{ topleft1: screen == false, topleftC: screen == true }"
			>
			<img src="../../assets/img/Screen/bigST.png" />
			<span>å¤§å±è§å¾</span>
			</div>
			<div
			class="topleft1 topleftC"
			:class="{ topleft1: tree == false, topleftC: tree == true }"
			>
			<img src="../../assets/img/Screen/ptree.png" />
			<span>å·¥ç¨é¡¹ç®</span>
			</div>
			</div>
			<div class="topCenter">
			<div>ç®¡ç½ä¸å¼ å¾</div>
			</div>
			<div class="topRight">
			<div class="topright1 toprightC" @click="ReturnLast">
			<img src="../../assets/img/Screen/return.png" />
			<span>è¿åä¸çº§</span>
			</div>
			</div>
			</div>
			</template>
			<script>
			export default {
			data() {
			return {
			tree: false,
			screen: false,
			}
			},
			mounted() {},
			methods: {
			ReturnLast() {
			this.$router.push("/Synthesis")
			},
			},
			}
			</script>
			<style lang="scss">
			.top {
			height: 100%;
			width: 100%;
			background-image: url(../../assets/img/Screen/logobg.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: flex;
			flex-direction: row;
			.topleft {
			width: 20%;
			height: 100%;
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			justify-content: space-around;
			cursor: pointer;
			.topleft1 {
			width: 131px;
			height: 40px;
			background-image: url(../../assets/img/Screen/btnc.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			}
			.topleftC {
			width: 131px;
			height: 40px;
			background-image: url(../../assets/img/Screen/btnbg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			}
			img {
			height: 26px;
			width: 32px;
			margin: 0px 8px;
			}
			span {
			color: #b3c8e3;
			font-size: 1rem;
			letter-spacing: 1px;
			}
			}
			.topCenter {
			width: 60%;
			height: 100%;
			font-size: 2rem;
			text-align: center;
			font-weight: 600;
			font-style: italic;
			letter-spacing: 5px;
			color: #e3eafd;
			div {
			margin-top: 5px;
			}
			}
			.topRight {
			width: 20%;
			height: 100%;
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			justify-content: flex-end;
			cursor: pointer;
			.topright1 {
			width: 131px;
			height: 40px;
			background-image: url(../../assets/img/Screen/btnc.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			margin-right: 10%;
			}
			.toprightC {
			width: 131px;
			height: 40px;
			background-image: url(../../assets/img/Screen/btnbg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			margin-right: 10%;
			}
			img {
			height: 26px;
			width: 32px;
			margin: 0px 8px;
			}
			span {
			color: #b3c8e3;
			font-size: 1rem;
			letter-spacing: 1px;
			}
			}
			}
			</style>

			@@ -15,6 +15,7 @@
			import '@/assets/css/content.css'
			import '@/assets/css/configure.css'
			import '@/assets/css/config.css'
			import 'animate.css';
			Vue.prototype.$echarts = echarts;
			import * as echarts from 'echarts';
			Vue.use(ElementUI, { locale });

			@@ -1,977 +1,90 @@
			<template>
			<div class="themaic">
			<div
			class="left_menu"
			:class="{ left_main_show: !leftMenuOpen }"
			>
			<div class="tree-container">
			<el-tree
			:data="treeData"
			show-checkbox
			node-key="id"
			default-expand-all
			:props="defaultProps"
			ref="tree"
			class="el-tree"
			@check-change="handleCheckChange"
			>
			<span
			class="custom-tree-node"
			slot-scope="{ node, data }"
			>
			<svg-icon
			v-if="!data.children"
			icon-class="file"
			class="svgIcon"
			/>
			<svg-icon
			v-else-if="node.expanded"
			icon-class="floder_open"
			class="svgIcon"
			/>
			<svg-icon
			v-else
			icon-class="floder_close"
			class="svgIcon"
			/>
			<span
			class='fontSize14'
			:title='node.label \|\| "-"'
			>{{node.label}}</span>
			</span>
			</el-tree>
			</div>
			<div class="changeBaseLayer">
			<div
			@click="changeMenulayer"
			class="CenDiv"
			>
			<div
			id="cenBg"
			v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
			></div>
			</div>
			</div>

			</div>

			<div class="center_content">

			<div
			id="MapView"
			class="MapView"
			>
			<div class="TopHeader">
			<div
			@click="setTopReturn"
			class="TopReturn"
			></div>
			</div>
			<div class="leftEchart">
			<div class="showEcharts">
			<div
			v-if="typeIndex == '1'"
			class="echart1"
			>
			<echart11></echart11>
			</div>
			<div
			v-if="typeIndex == '1'"
			class="echart1"
			>
			<echart12></echart12>
			</div>
			<div
			v-if="typeIndex == '1'"
			class="echart1"
			>
			<echart13></echart13>
			</div>
			<div
			v-if="typeIndex == '2'"
			class="echart1"
			>
			<echart21></echart21>
			</div>
			<div
			v-if="typeIndex == '2'"
			class="echart1"
			>
			<echart22></echart22>
			</div>
			<div
			v-if="typeIndex == '2'"
			class="echart1"
			>
			<echart23></echart23>
			</div>
			<div
			v-if="typeIndex == '3'"
			class="echart1"
			>
			<echart31></echart31>
			</div>
			<div
			v-if="typeIndex == '3'"
			class="echart1"
			>
			<echart32></echart32>
			</div>
			<div
			v-if="typeIndex == '3'"
			class="echart1"
			>
			<echart33></echart33>
			</div>
			<div
			v-if="typeIndex == '4'"
			class="echart1"
			>
			<echart44></echart44>
			</div>
			<div
			v-if="typeIndex == '4'"
			class="echart1"
			>
			<echart45></echart45>
			</div>
			<div
			v-if="typeIndex == '4'"
			class="echart1"
			>
			<echart46></echart46>
			</div>
			</div>
			</div>
			<div class="rightEchart">
			<div class="showEcharts">
			<div
			v-if="typeIndex == '1'"
			class="echart1"
			>
			<echart14></echart14>
			</div>
			<div
			v-if="typeIndex == '1'"
			class="echart1"
			>
			<echart15></echart15>
			</div>
			<div
			v-if="typeIndex == '1'"
			class="echart1"
			>
			<echart16></echart16>
			</div>

			<div
			v-if="typeIndex == '2'"
			class="echart1"
			>
			<echart24></echart24>
			</div>
			<div
			v-if="typeIndex == '2'"
			class="echart1"
			>
			<echart25></echart25>
			</div>
			<div
			v-if="typeIndex == '2'"
			class="echart1"
			>
			<echart26></echart26>
			</div>
			<div
			v-if="typeIndex == '3'"
			class="echart1"
			>
			<echart34></echart34>
			</div>
			<div
			v-if="typeIndex == '3'"
			class="echart1"
			>
			<echart35></echart35>
			</div>
			<div
			v-if="typeIndex == '3'"
			class="echart1"
			>
			<echart36></echart36>
			</div>
			<div
			v-if="typeIndex == '4'"
			class="echart1"
			>
			<echart41></echart41>
			</div>
			<div
			v-if="typeIndex == '4'"
			class="echart1"
			>
			<echart42></echart42>
			</div>
			<div
			v-if="typeIndex == '4'"
			class="echart1"
			>
			<echart43></echart43>
			</div>
			</div>
			</div>
			<div class="left_content">
			<div
			@click="showLeftMenu"
			v-show=" !leftMenuOpen"
			>
			<div class="LeftMenu"></div>
			</div>
			<div
			@click="showLeftMenu"
			v-show=" leftMenuOpen"
			>
			<div class="LeftMenu1"></div>
			</div>
			</div>

			<div class="right_content">
			<div
			@click="showRightMenu"
			v-show="!rightMenuOpen "
			>
			<div class="RightMenu"></div>
			</div>
			<div
			@click="showRightMenu"
			v-show="rightMenuOpen "
			>
			<div class="RightMenu1"></div>
			</div>
			</div>
			</div>
			</div>
			<div
			class="right_menu"
			:class="{ right_main_show: !rightMenuOpen }"
			>
			<div class="content_right">
			<div class="contentLi">
			<ul>
			<li
			@click="changeRightList(item)"
			v-for="item in rightList"
			:class="item.id == changeSelectli ? 'changeliStyle' : ''"
			>
			{{ item.name }}
			</li>
			</ul>
			</div>
			<div class="contentBottom">
			<div
			v-for="item in rightMenu"
			class="right_item"
			:class="{ changeStyle: changeSelectStyle == item.id }"
			@click="changeRightMenu(item)"
			>
			{{ item.name }}
			</div>
			</div>
			</div>
			</div>
			<mapsdk></mapsdk>
			<top class="title" ref="title"></top>
			<left class="mapleft" :style="{ width: leftWidth }"></left>
			<right class="mapright" :style="{ width: rightWidth }"></right>
			<bottom class="mapbottom"></bottom>
			</div>
			</template>

			<script>
			window.sgworld = null;
			var Viewer = null;
			import mapsdk from "@/components/Screen/mapsdk.vue"
			import top from "../../components/Screen/top.vue"
			import left from "@/components/Screen/left.vue"
			import right from "../../components/Screen/right.vue"
			import bottom from "../../components/Screen/bottom.vue"

			import mapsdk from '../../components/mapsdk.vue';
			import { right_menu, right_list, image_layer } from '../../assets/js/index.js';
			import { perms_selectLayers } from '../../api/api.js';
			import echart11 from '../../components/echart11.vue';
			import echart12 from '../../components/echart12.vue';
			import echart13 from '../../components/echart13.vue';
			import echart14 from '../../components/echart14.vue';
			import echart15 from '../../components/echart15.vue';
			import echart16 from '../../components/echart16.vue';
			import echart21 from '../../components/echart21.vue';
			import echart22 from '../../components/echart22.vue';
			import echart23 from '../../components/echart23.vue';
			import echart24 from '../../components/echart24.vue';
			import echart25 from '../../components/echart25.vue';
			import echart26 from '../../components/echart26.vue';
			import echart31 from '../../components/echart31.vue';
			import echart32 from '../../components/echart32.vue';
			import echart33 from '../../components/echart33.vue';
			import echart34 from '../../components/echart34.vue';
			import echart35 from '../../components/echart35.vue';
			import echart36 from '../../components/echart36.vue';
			import echart41 from '../../components/echart41.vue';
			import echart42 from '../../components/echart42.vue';
			import echart43 from '../../components/echart43.vue';
			import echart44 from '../../components/echart44.vue';
			import echart45 from '../../components/echart45.vue';
			import echart46 from '../../components/echart46.vue';
			import axios from 'axios';
			import axios from "axios"
			export default {
			components: {
			mapsdk,
			echart11,
			echart12,
			echart13,
			echart14,
			echart15,
			echart16,
			echart21,
			echart22,
			echart23,
			echart24,
			echart25,
			echart26,
			echart31,
			echart32,
			echart33,
			echart34,
			echart35,
			echart36,
			echart41,
			echart43,
			echart42,
			echart44,
			echart45,
			echart46,
			},
			components: { mapsdk, top, left, right, bottom },
			data() {
			return {
			typeIndex: null,
			leftMenuOpen: false,
			rightMenuOpen: false,
			changeSelectStyle: null,
			changeSelectli: null,
			rightMenu: [],
			rightList: [],
			treeData: [],
			centerFlag: false,
			isActive: false,
			isMenuLayer: true,
			openEcharts: false,
			defaultProps: {
			children: 'children',
			label: 'label',
			},
			};
			},
			mounted() {

			this.rightList = right_list[0];
			this.rightMenu = right_menu;
			this.changeSelectli = this.rightList[0].id;
			this.changeSelectStyle = this.rightMenu[0].id;
			this.initMapView();
			this.addImageLayer();


			},
			created() {

			},
			methods: {
			setTopReturn() {
			this.$router.push('/Synthesis');
			sessionStorage.setItem('changeSelectStyle', 3)
			},
			changeRightList(res) {
			this.changeSelectli = res.id;
			if (res.layer != null) {
			var layer = res.layer;
			this.$refs.tree.setCheckedKeys(layer);
			}
			if (res.index != null) {
			this.openEcharts = true;
			this.typeIndex = res.index;
			} else {
			this.openEcharts = false;
			this.typeIndex = null;
			}
			var vid = res.id;

			if (vid.indexOf('b') != -1) {
			var url = geoserverWFS + '%27' + res.name + '%27';
			axios.get(url).then((res) => {
			if (res.status == 200) {
			var point = res.data.features[0].geometry.coordinates;
			//å®ä½
			Viewer.camera.flyTo({
			//è·³è½¬è§è§
			destination: new Cesium.Cartesian3.fromDegrees(
			point[0],
			point[1],
			8000
			),
			});
			}
			});
			} else if (vid.indexOf('a') != -1) {
			//å®ä½
			Viewer.camera.flyTo({
			//è·³è½¬è§è§
			destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
			});
			} else if (vid.indexOf('c') != -1) {
			var url = geoserverWFSLine + '%27' + res.name + '%27';
			axios.get(url).then((res) => {

			if (res.status == 200) {
			if (res.data.features.length == 0) return;
			var std = [];
			for (var i in res.data.features) {
			var featurLayer = res.data.features[i];
			var path = featurLayer.geometry.coordinates[0];
			for (var j in path) {
			// std.push(path[j][0], path[j][1], 50);
			std.push(path[j])
			}
			}

			var str = this.removeRepeat1(std);
			var val = [];
			for (var i in str) {
			val.push(str[i][0], str[i][1], 50);
			}
			this.showPathLine(val)
			}
			});
			}
			},
			removeRepeat1(arr) {
			const obj = {};
			return arr.filter(item => {
			if (!obj[item.toString()]) {
			obj[item.toString()] = item.toString();
			return item;
			}
			});
			},

			showPathLine(res) {

			window.sgworld.Creator.getFlyData(res, (data) => {
			data.showPoint = false;
			data.showLine = true;
			data.mode = 1;
			data.height = 2000;

			// å¼¹çªæ°æ®
			window.PathAnimationData = {
			flyData: data,
			};
			window.PathAnimationData.winIndex = layer.open({
			type: 2,
			title: 'è·¯å¾å¨ç»',
			shade: false,
			area: ['352px', '690px'],
			offset: 'r',
			skin: 'other-class',
			content: SmartEarthRootUrl + 'Workers/path/Path.html',
			end: function () {
			PathAnimationData.fly && PathAnimationData.fly.exit();
			},
			});
			});
			},
			showLeftMenu() {
			this.leftMenuOpen = !this.leftMenuOpen;
			var a = 0;
			var layer = setInterval(() => {
			a++;
			this.$bus.$emit('resizeEchart', true);
			if (a == 20) {
			clearInterval(layer);
			this.$bus.$emit('resizeEchart', true);
			}
			}, 100);
			},
			showRightMenu() {
			this.rightMenuOpen = !this.rightMenuOpen;
			var a = 0;
			var layer = setInterval(() => {
			a++;
			this.$bus.$emit('resizeEchart', true);
			if (a == 30) {
			clearInterval(layer);
			this.$bus.$emit('resizeEchart', true);
			}
			}, 100);
			},
			changeRightMenu(res) {
			this.rightList = right_list[parseInt(res.id) - 1];
			this.changeSelectStyle = res.id;
			},
			initMapView() {
			sgworld = new SmartEarth.SGWorld('MapView', {
			licenseServer: window.sceneConfig.licenseServer,
			});

			Viewer = sgworld._Viewer;
			Viewer.imageryLayers._layers[0].show = false;
			//å®ä½
			sgworld.Navigate.jumpTo({
			//è·³è½¬è§è§
			destination: new Cesium.Cartesian3.fromDegrees(
			116.3911,
			39.9115,
			100000
			),
			});
			for (var i in gaoDeBaseUrl) {
			sgworld.Creator.createUrlTemplateImageryProvider(
			gaoDeBaseUrl[i].label,
			gaoDeBaseUrl[i].url,
			'0',
			undefined,
			true,
			''
			);
			}

			//æ¾ç¤ºfps
			Viewer.scene.debugShowFramesPerSecond = false;
			//å¯¼èªæ§ä»¶
			sgworld.navControl('nav', false);
			//æ¯ä¾å°º
			sgworld.navControl('scale', false);

			Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
			url: demLayer
			});


			},
			changeMenulayer() {
			this.isActive = !this.isActive;
			this.isMenuLayer = !this.isMenuLayer;
			this.setLayerVisible();
			},
			setLayerVisible() {
			if (this.isActive == true) {
			Viewer.imageryLayers._layers[1].show = true;
			Viewer.imageryLayers._layers[2].show = false;
			Viewer.imageryLayers._layers[3].show = false;
			} else {
			Viewer.imageryLayers._layers[1].show = false;
			Viewer.imageryLayers._layers[2].show = true;
			Viewer.imageryLayers._layers[3].show = true;
			}
			},
			async addImageLayer() {
			const data = await perms_selectLayers();
			// var val_layer = this.treeData[0].children;
			// var std = [];
			// for (var i = 0; i < val_layer.length; i++) {
			// if (val_layer[i].id != 13 && val_layer[i].id != 14) {
			// let layerWMS = new Cesium.WebMapServiceImageryProvider({
			// url: geoServerURl,
			// layers: val_layer[i].resource,
			// parameters: {
			// transparent: true,
			// format: 'image/png',
			// },
			// });
			// layerWMS.name = val_layer[i].label;
			// Viewer.imageryLayers.addImageryProvider(layerWMS);
			// std.push(val_layer[i].id);
			// }
			// }
			if (data.code != 200) {
			return this.$message.error("å¾å±åè¡¨æ¥è¯¢å¤±è´¥");
			}
			var std = [];
			var layer_list = [];
			var layer_groups = [];
			for (var i in data.result) {
			if (data.result[i].type == 1) {
			layer_groups.push({
			id: data.result[i].id,
			label: data.result[i].cnName,
			type: data.result[i].type,
			isEdit: false,
			children: [],
			})
			} else if (data.result[i].type == 2) {
			if (data.result[i].url != null) {
			var layer_entity = {
			id: data.result[i].id,
			pid: data.result[i].pid,
			label: data.result[i].cnName,
			resource: data.result[i].url,
			type: data.result[i].type,
			isEdit: false,
			}
			layer_list.push(layer_entity)
			if (data.result[i].isShow == 1) {
			std.push(data.result[i].id);
			this.setAddImageLayer(layer_entity);
			}
			}
			}
			}
			for (var i in layer_list) {
			for (var j in layer_groups) {
			if (layer_list[i].pid === layer_groups[j].id) {
			layer_groups[j].children.push(layer_list[i])
			}
			}
			}
			this.treeData = layer_groups;

			this.$refs.tree.setCheckedKeys(std);
			},
			handleCheckChange(data, checked, indeterminate) {
			if (data.children != null) return;
			var std = [];
			for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
			var val_id =
			Viewer.imageryLayers._layers[i].imageryProvider.name;
			if (val_id == data.label) {
			std.push(data.label)
			const img_layer = Viewer.imageryLayers._layers[i];
			img_layer.show = checked;
			}
			}
			if (std.length == 0 && checked == true) {
			this.setAddImageLayer(data);
			}
			},
			setAddImageLayer(res) {
			let layerWMS = new Cesium.WebMapServiceImageryProvider({
			url: geoServerURl,
			layers: res.resource,
			parameters: {
			transparent: true,
			format: 'image/png',
			},
			});
			layerWMS.name = res.label;
			Viewer.imageryLayers.addImageryProvider(layerWMS);
			leftWidth: "20%",
			rightWidth: "20%",
			}
			},
			};
			mounted() {},
			created() {},
			methods: {
			//ä¿®æ¹å·¦ä¾§å®½åº¦
			ChangeWidth(parm) {
			if (parm == "left") {
			if (this.leftWidth == "20%") {
			this.leftWidth = "36px"
			} else {
			this.leftWidth = "20%"
			}
			}
			if (parm == "right") {
			if (this.rightWidth == "20%") {
			this.rightWidth = "36px"
			} else {
			this.rightWidth = "20%"
			}
			}
			},
			},
			}
			</script>

			<style lang="less" scoped>
			.themaic {
			width: 100%;
			height: 100%;
			background: #303030;
			width: 100%;
			position: absolute;
			display: flex;
			overflow: hidden;
			.left_menu {
			margin: 0;
			width: 300px;
			height: 100%;
			transition: width 2s;
			background: url("../../assets/img/themic/å·¦æ¡.png") no-repeat center;
			background-size: 100% 100%;

			.tree-container {
			margin: 10px;
			height: 90%;
			overflow-y: auto;
			}
			.changeBaseLayer {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			overflow: hidden;
			}
			.CenDiv {
			height: 40px;
			width: 60px;

			margin-right: 7%;
			border-radius: 5px;
			bottom: 3%;
			}

			// .CenDiv:hover {

			// }
			.active {
			height: 40px;
			width: 60px;
			background: url("../../assets/img/themic/é»è®¤çå½±å.png") no-repeat center;
			position: absolute;
			background-size: 100% 100%;
			border-radius: 5px;
			}
			.menuLayer {
			height: 40px;
			width: 60px;
			background: url("../../assets/img/themic/é»è®¤çåºå¾.png") no-repeat center;
			position: absolute;
			background-size: 100% 100%;
			border-radius: 5px;
			}
			}
			.center_content {
			flex: 1;
			height: 100%;
			.MapView {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			float: left;
			position: relative;
			display: flex;
			justify-content: space-around;
			.TopHeader {
			width: 100%;
			height: 106px;
			margin-top: -21px;
			position: absolute;
			background: url("../../assets/img/themic/bj.png") no-repeat;
			background-size: 100% 100%;
			z-index: 40;
			.TopReturn {
			width: 142px;
			height: 40px;
			top: 37%;
			left: 2.2%;
			background: url("../../assets/img/themic/è¿å.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			z-index: 60;
			}
			}
			.leftEchart {
			z-index: 60;
			position: absolute;
			bottom: 2px;
			height: calc(100% - 77px);
			width: 24%;
			left: 10px;
			position: absolute;
			right: 10px;
			}
			.showEcharts {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			}
			.rightEchart {
			z-index: 60;
			position: absolute;
			height: calc(100% - 77px);
			width: 24%;
			right: 10px;
			bottom: 2px;
			position: absolute;
			right: 10px;
			}
			.rightEchartShow {
			margin-right: 20px;
			}
			.right_content {
			width: 20px;
			height: 100%;
			z-index: 60;
			right: 10px;
			position: absolute;
			display: flex;
			align-items: center;
			}

			.left_content {
			width: 20px;
			height: 100%;
			z-index: 60;
			left: 10px;
			position: absolute;
			display: flex;
			align-items: center;
			}
			.LeftMenu {
			width: 20px;
			height: 100px;
			background: url("../../assets/img/themic/life.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			float: right;
			}
			.LeftMenu1 {
			width: 20px;
			height: 100px;
			background: url("../../assets/img/themic/left1.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			float: right;
			}
			.RightMenu {
			width: 20px;
			height: 100px;
			background: url("../../assets/img/themic/right.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			float: right;
			}
			.RightMenu1 {
			width: 20px;
			height: 100px;
			background: url("../../assets/img/themic/right1.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			float: right;
			}
			}
			}
			.item_menu {
			height: 100%;
			display: flex;
			align-items: center;
			}
			.left_main_show {
			width: 0;
			}
			.right_menu {
			margin: 0;
			width: 300px;
			height: 100%;
			transition: width 2s;
			background: url("../../assets/img/themic/å³æ¡.png") no-repeat center;
			background-size: 100% 100%;
			.content_right {
			width: calc(100% - 40px);
			height: calc(100% - 60px);
			margin-top: 30px;
			margin-left: 20px;
			.contentLi {
			width: 100%;
			height: 95%;
			overflow-y: auto;
			}
			.contentBottom {
			width: 100%;
			height: 5%;
			margin-top: 5%;
			display: flex;
			justify-content: space-between;
			.right_item {
			align-items: center;
			display: flex;
			height: calc(100% - 2px);
			flex-grow: 1;
			justify-content: center;
			font-size: 14px;
			font-family: Source Han Sans SC;
			font-weight: 400;
			color: white;
			background: url("../../assets/img/themic/é»è®¤çæé®èæ¯.png")
			no-repeat center;
			background-size: 100% 100%;
			}
			.changeStyle {
			background: url("../../assets/img/themic/éä¸çæé®èæ¯.png")
			no-repeat center;
			background-size: 100% 100%;
			}
			}
			li {
			padding: 10px 10px;
			color: white;
			background: url("../../assets/img/themic/listBJ.png") no-repeat center;
			background-size: 100% 100%;
			}
			li:hover {
			color: #409eff;
			}
			.changeliStyle {
			color: #409eff;
			}
			}
			}

			.right_main_show {
			width: 0;
			}
			.echart1 {
			width: 100%;
			height: 33%;
			background: url("../../assets/img/themic/xxk.png") no-repeat;
			background-size: 100% 100%;
			}

			/* å»é¤æè½¬å¨ç» */
			.el-tree /deep/ .el-tree-node__expand-icon.expanded {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
			}

			/* æåèç¹ ä¸æªå±å¼ */
			.el-tree /deep/ .el-icon-caret-right:before {
			background: url("../../assets/img/themic/åè§ç©å½¢ 3 æ·è´ 3.png") no-repeat 0
			3px;
			content: "";
			content: "";
			display: block;
			width: 16px;
			height: 16px;
			font-size: 16px;
			background-size: 16px;
			}

			/* //æåèç¹ ä¸å·²å±å¼ */
			/deep/
			.el-tree
			.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
			background: url("../../assets/img/themic/åè§ç©å½¢ 3 æ·è´ 4.png") no-repeat 0
			3px;
			content: "";
			display: block;
			width: 16px;
			height: 16px;
			font-size: 16px;
			background-size: 16px;
			}

			/* æ²¡æåèç¹ */
			/deep/ .el-tree .el-tree-node__expand-icon.is-leaf::before {
			background: url("../../assets/img/themic/åè§ç©å½¢ 3 æ·è´ 3.png") no-repeat 0
			3px;
			content: "";
			display: block;
			width: 16px;
			height: 16px;
			font-size: 16px;
			background-size: 16px;
			}

			/deep/ .el-tree {
			padding-top: 15px;
			padding-left: 10px;
			// ä¸å¯å¨éæ ·å¼
			.el-tree-node {
			.is-leaf + .el-checkbox .el-checkbox__inner {
			display: inline-block;
			}
			.el-checkbox .el-checkbox__inner {
			display: none;
			}
			}
			}
			/deep/.el-tree .el-tree-node__content:hover {
			background-color: transparent !important;
			}
			/deep/.el-tree {
			color: white !important;
			background: transparent !important;
			}
			/deep/.el-tree-node:focus > .el-tree-node__content {
			background: transparent !important;
			}
			}
			.title {
			position: absolute;
			top: 0;
			left: 0;
			height: 86px;
			width: 100%;
			z-index: 999;
			}
			.mapleft {
			position: absolute;
			top: 90px;
			left: 0px;
			// width: 20%;
			height: calc(100% - 180px);
			z-index: 999;
			}
			.mapright {
			position: absolute;
			top: 90px;
			right: 0px;
			// width: 20%;
			height: calc(100% - 180px);
			z-index: 999;
			}
			.mapbottom {
			position: absolute;
			left: 0;
			bottom: 0;
			height: 90px;
			width: 100%;
			z-index: 999;
			}
			</style>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,977 @@
			<template>
			<div class="themaic">
			<div
			class="left_menu"
			:class="{ left_main_show: !leftMenuOpen }"
			>
			<div class="tree-container">
			<el-tree
			:data="treeData"
			show-checkbox
			node-key="id"
			default-expand-all
			:props="defaultProps"
			ref="tree"
			class="el-tree"
			@check-change="handleCheckChange"
			>
			<span
			class="custom-tree-node"
			slot-scope="{ node, data }"
			>
			<svg-icon
			v-if="!data.children"
			icon-class="file"
			class="svgIcon"
			/>
			<svg-icon
			v-else-if="node.expanded"
			icon-class="floder_open"
			class="svgIcon"
			/>
			<svg-icon
			v-else
			icon-class="floder_close"
			class="svgIcon"
			/>
			<span
			class='fontSize14'
			:title='node.label \|\| "-"'
			>{{node.label}}</span>
			</span>
			</el-tree>
			</div>
			<div class="changeBaseLayer">
			<div
			@click="changeMenulayer"
			class="CenDiv"
			>
			<div
			id="cenBg"
			v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
			></div>
			</div>
			</div>

			</div>

			<div class="center_content">

			<div
			id="MapView"
			class="MapView"
			>
			<div class="TopHeader">
			<div
			@click="setTopReturn"
			class="TopReturn"
			></div>
			</div>
			<div class="leftEchart">
			<div class="showEcharts">
			<div
			v-if="typeIndex == '1'"
			class="echart1"
			>
			<echart11></echart11>
			</div>
			<div
			v-if="typeIndex == '1'"
			class="echart1"
			>
			<echart12></echart12>
			</div>
			<div
			v-if="typeIndex == '1'"
			class="echart1"
			>
			<echart13></echart13>
			</div>
			<div
			v-if="typeIndex == '2'"
			class="echart1"
			>
			<echart21></echart21>
			</div>
			<div
			v-if="typeIndex == '2'"
			class="echart1"
			>
			<echart22></echart22>
			</div>
			<div
			v-if="typeIndex == '2'"
			class="echart1"
			>
			<echart23></echart23>
			</div>
			<div
			v-if="typeIndex == '3'"
			class="echart1"
			>
			<echart31></echart31>
			</div>
			<div
			v-if="typeIndex == '3'"
			class="echart1"
			>
			<echart32></echart32>
			</div>
			<div
			v-if="typeIndex == '3'"
			class="echart1"
			>
			<echart33></echart33>
			</div>
			<div
			v-if="typeIndex == '4'"
			class="echart1"
			>
			<echart44></echart44>
			</div>
			<div
			v-if="typeIndex == '4'"
			class="echart1"
			>
			<echart45></echart45>
			</div>
			<div
			v-if="typeIndex == '4'"
			class="echart1"
			>
			<echart46></echart46>
			</div>
			</div>
			</div>
			<div class="rightEchart">
			<div class="showEcharts">
			<div
			v-if="typeIndex == '1'"
			class="echart1"
			>
			<echart14></echart14>
			</div>
			<div
			v-if="typeIndex == '1'"
			class="echart1"
			>
			<echart15></echart15>
			</div>
			<div
			v-if="typeIndex == '1'"
			class="echart1"
			>
			<echart16></echart16>
			</div>

			<div
			v-if="typeIndex == '2'"
			class="echart1"
			>
			<echart24></echart24>
			</div>
			<div
			v-if="typeIndex == '2'"
			class="echart1"
			>
			<echart25></echart25>
			</div>
			<div
			v-if="typeIndex == '2'"
			class="echart1"
			>
			<echart26></echart26>
			</div>
			<div
			v-if="typeIndex == '3'"
			class="echart1"
			>
			<echart34></echart34>
			</div>
			<div
			v-if="typeIndex == '3'"
			class="echart1"
			>
			<echart35></echart35>
			</div>
			<div
			v-if="typeIndex == '3'"
			class="echart1"
			>
			<echart36></echart36>
			</div>
			<div
			v-if="typeIndex == '4'"
			class="echart1"
			>
			<echart41></echart41>
			</div>
			<div
			v-if="typeIndex == '4'"
			class="echart1"
			>
			<echart42></echart42>
			</div>
			<div
			v-if="typeIndex == '4'"
			class="echart1"
			>
			<echart43></echart43>
			</div>
			</div>
			</div>
			<div class="left_content">
			<div
			@click="showLeftMenu"
			v-show=" !leftMenuOpen"
			>
			<div class="LeftMenu"></div>
			</div>
			<div
			@click="showLeftMenu"
			v-show=" leftMenuOpen"
			>
			<div class="LeftMenu1"></div>
			</div>
			</div>

			<div class="right_content">
			<div
			@click="showRightMenu"
			v-show="!rightMenuOpen "
			>
			<div class="RightMenu"></div>
			</div>
			<div
			@click="showRightMenu"
			v-show="rightMenuOpen "
			>
			<div class="RightMenu1"></div>
			</div>
			</div>
			</div>
			</div>
			<div
			class="right_menu"
			:class="{ right_main_show: !rightMenuOpen }"
			>
			<div class="content_right">
			<div class="contentLi">
			<ul>
			<li
			@click="changeRightList(item)"
			v-for="item in rightList"
			:class="item.id == changeSelectli ? 'changeliStyle' : ''"
			>
			{{ item.name }}
			</li>
			</ul>
			</div>
			<div class="contentBottom">
			<div
			v-for="item in rightMenu"
			class="right_item"
			:class="{ changeStyle: changeSelectStyle == item.id }"
			@click="changeRightMenu(item)"
			>
			{{ item.name }}
			</div>
			</div>
			</div>
			</div>
			</div>
			</template>

			<script>
			window.sgworld = null;
			var Viewer = null;

			import mapsdk from '../../components/mapsdk.vue';
			import { right_menu, right_list, image_layer } from '../../assets/js/index.js';
			import { perms_selectLayers } from '../../api/api.js';
			import echart11 from '../../components/echart11.vue';
			import echart12 from '../../components/echart12.vue';
			import echart13 from '../../components/echart13.vue';
			import echart14 from '../../components/echart14.vue';
			import echart15 from '../../components/echart15.vue';
			import echart16 from '../../components/echart16.vue';
			import echart21 from '../../components/echart21.vue';
			import echart22 from '../../components/echart22.vue';
			import echart23 from '../../components/echart23.vue';
			import echart24 from '../../components/echart24.vue';
			import echart25 from '../../components/echart25.vue';
			import echart26 from '../../components/echart26.vue';
			import echart31 from '../../components/echart31.vue';
			import echart32 from '../../components/echart32.vue';
			import echart33 from '../../components/echart33.vue';
			import echart34 from '../../components/echart34.vue';
			import echart35 from '../../components/echart35.vue';
			import echart36 from '../../components/echart36.vue';
			import echart41 from '../../components/echart41.vue';
			import echart42 from '../../components/echart42.vue';
			import echart43 from '../../components/echart43.vue';
			import echart44 from '../../components/echart44.vue';
			import echart45 from '../../components/echart45.vue';
			import echart46 from '../../components/echart46.vue';
			import axios from 'axios';
			export default {
			components: {
			mapsdk,
			echart11,
			echart12,
			echart13,
			echart14,
			echart15,
			echart16,
			echart21,
			echart22,
			echart23,
			echart24,
			echart25,
			echart26,
			echart31,
			echart32,
			echart33,
			echart34,
			echart35,
			echart36,
			echart41,
			echart43,
			echart42,
			echart44,
			echart45,
			echart46,
			},
			data() {
			return {
			typeIndex: null,
			leftMenuOpen: false,
			rightMenuOpen: false,
			changeSelectStyle: null,
			changeSelectli: null,
			rightMenu: [],
			rightList: [],
			treeData: [],
			centerFlag: false,
			isActive: false,
			isMenuLayer: true,
			openEcharts: false,
			defaultProps: {
			children: 'children',
			label: 'label',
			},
			};
			},
			mounted() {

			this.rightList = right_list[0];
			this.rightMenu = right_menu;
			this.changeSelectli = this.rightList[0].id;
			this.changeSelectStyle = this.rightMenu[0].id;
			this.initMapView();
			this.addImageLayer();


			},
			created() {

			},
			methods: {
			setTopReturn() {
			this.$router.push('/Synthesis');
			sessionStorage.setItem('changeSelectStyle', 3)
			},
			changeRightList(res) {
			this.changeSelectli = res.id;
			if (res.layer != null) {
			var layer = res.layer;
			this.$refs.tree.setCheckedKeys(layer);
			}
			if (res.index != null) {
			this.openEcharts = true;
			this.typeIndex = res.index;
			} else {
			this.openEcharts = false;
			this.typeIndex = null;
			}
			var vid = res.id;

			if (vid.indexOf('b') != -1) {
			var url = geoserverWFS + '%27' + res.name + '%27';
			axios.get(url).then((res) => {
			if (res.status == 200) {
			var point = res.data.features[0].geometry.coordinates;
			//å®ä½
			Viewer.camera.flyTo({
			//è·³è½¬è§è§
			destination: new Cesium.Cartesian3.fromDegrees(
			point[0],
			point[1],
			8000
			),
			});
			}
			});
			} else if (vid.indexOf('a') != -1) {
			//å®ä½
			Viewer.camera.flyTo({
			//è·³è½¬è§è§
			destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
			});
			} else if (vid.indexOf('c') != -1) {
			var url = geoserverWFSLine + '%27' + res.name + '%27';
			axios.get(url).then((res) => {

			if (res.status == 200) {
			if (res.data.features.length == 0) return;
			var std = [];
			for (var i in res.data.features) {
			var featurLayer = res.data.features[i];
			var path = featurLayer.geometry.coordinates[0];
			for (var j in path) {
			// std.push(path[j][0], path[j][1], 50);
			std.push(path[j])
			}
			}

			var str = this.removeRepeat1(std);
			var val = [];
			for (var i in str) {
			val.push(str[i][0], str[i][1], 50);
			}
			this.showPathLine(val)
			}
			});
			}
			},
			removeRepeat1(arr) {
			const obj = {};
			return arr.filter(item => {
			if (!obj[item.toString()]) {
			obj[item.toString()] = item.toString();
			return item;
			}
			});
			},

			showPathLine(res) {

			window.sgworld.Creator.getFlyData(res, (data) => {
			data.showPoint = false;
			data.showLine = true;
			data.mode = 1;
			data.height = 2000;

			// å¼¹çªæ°æ®
			window.PathAnimationData = {
			flyData: data,
			};
			window.PathAnimationData.winIndex = layer.open({
			type: 2,
			title: 'è·¯å¾å¨ç»',
			shade: false,
			area: ['352px', '690px'],
			offset: 'r',
			skin: 'other-class',
			content: SmartEarthRootUrl + 'Workers/path/Path.html',
			end: function () {
			PathAnimationData.fly && PathAnimationData.fly.exit();
			},
			});
			});
			},
			showLeftMenu() {
			this.leftMenuOpen = !this.leftMenuOpen;
			var a = 0;
			var layer = setInterval(() => {
			a++;
			this.$bus.$emit('resizeEchart', true);
			if (a == 20) {
			clearInterval(layer);
			this.$bus.$emit('resizeEchart', true);
			}
			}, 100);
			},
			showRightMenu() {
			this.rightMenuOpen = !this.rightMenuOpen;
			var a = 0;
			var layer = setInterval(() => {
			a++;
			this.$bus.$emit('resizeEchart', true);
			if (a == 30) {
			clearInterval(layer);
			this.$bus.$emit('resizeEchart', true);
			}
			}, 100);
			},
			changeRightMenu(res) {
			this.rightList = right_list[parseInt(res.id) - 1];
			this.changeSelectStyle = res.id;
			},
			initMapView() {
			sgworld = new SmartEarth.SGWorld('MapView', {
			licenseServer: window.sceneConfig.licenseServer,
			});

			Viewer = sgworld._Viewer;
			Viewer.imageryLayers._layers[0].show = false;
			//å®ä½
			sgworld.Navigate.jumpTo({
			//è·³è½¬è§è§
			destination: new Cesium.Cartesian3.fromDegrees(
			116.3911,
			39.9115,
			100000
			),
			});
			for (var i in gaoDeBaseUrl) {
			sgworld.Creator.createUrlTemplateImageryProvider(
			gaoDeBaseUrl[i].label,
			gaoDeBaseUrl[i].url,
			'0',
			undefined,
			true,
			''
			);
			}

			//æ¾ç¤ºfps
			Viewer.scene.debugShowFramesPerSecond = false;
			//å¯¼èªæ§ä»¶
			sgworld.navControl('nav', false);
			//æ¯ä¾å°º
			sgworld.navControl('scale', false);

			Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
			url: demLayer
			});


			},
			changeMenulayer() {
			this.isActive = !this.isActive;
			this.isMenuLayer = !this.isMenuLayer;
			this.setLayerVisible();
			},
			setLayerVisible() {
			if (this.isActive == true) {
			Viewer.imageryLayers._layers[1].show = true;
			Viewer.imageryLayers._layers[2].show = false;
			Viewer.imageryLayers._layers[3].show = false;
			} else {
			Viewer.imageryLayers._layers[1].show = false;
			Viewer.imageryLayers._layers[2].show = true;
			Viewer.imageryLayers._layers[3].show = true;
			}
			},
			async addImageLayer() {
			const data = await perms_selectLayers();
			// var val_layer = this.treeData[0].children;
			// var std = [];
			// for (var i = 0; i < val_layer.length; i++) {
			// if (val_layer[i].id != 13 && val_layer[i].id != 14) {
			// let layerWMS = new Cesium.WebMapServiceImageryProvider({
			// url: geoServerURl,
			// layers: val_layer[i].resource,
			// parameters: {
			// transparent: true,
			// format: 'image/png',
			// },
			// });
			// layerWMS.name = val_layer[i].label;
			// Viewer.imageryLayers.addImageryProvider(layerWMS);
			// std.push(val_layer[i].id);
			// }
			// }
			if (data.code != 200) {
			return this.$message.error("å¾å±åè¡¨æ¥è¯¢å¤±è´¥");
			}
			var std = [];
			var layer_list = [];
			var layer_groups = [];
			for (var i in data.result) {
			if (data.result[i].type == 1) {
			layer_groups.push({
			id: data.result[i].id,
			label: data.result[i].cnName,
			type: data.result[i].type,
			isEdit: false,
			children: [],
			})
			} else if (data.result[i].type == 2) {
			if (data.result[i].url != null) {
			var layer_entity = {
			id: data.result[i].id,
			pid: data.result[i].pid,
			label: data.result[i].cnName,
			resource: data.result[i].url,
			type: data.result[i].type,
			isEdit: false,
			}
			layer_list.push(layer_entity)
			if (data.result[i].isShow == 1) {
			std.push(data.result[i].id);
			this.setAddImageLayer(layer_entity);
			}
			}
			}
			}
			for (var i in layer_list) {
			for (var j in layer_groups) {
			if (layer_list[i].pid === layer_groups[j].id) {
			layer_groups[j].children.push(layer_list[i])
			}
			}
			}
			this.treeData = layer_groups;

			this.$refs.tree.setCheckedKeys(std);
			},
			handleCheckChange(data, checked, indeterminate) {
			if (data.children != null) return;
			var std = [];
			for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
			var val_id =
			Viewer.imageryLayers._layers[i].imageryProvider.name;
			if (val_id == data.label) {
			std.push(data.label)
			const img_layer = Viewer.imageryLayers._layers[i];
			img_layer.show = checked;
			}
			}
			if (std.length == 0 && checked == true) {
			this.setAddImageLayer(data);
			}
			},
			setAddImageLayer(res) {
			let layerWMS = new Cesium.WebMapServiceImageryProvider({
			url: geoServerURl,
			layers: res.resource,
			parameters: {
			transparent: true,
			format: 'image/png',
			},
			});
			layerWMS.name = res.label;
			Viewer.imageryLayers.addImageryProvider(layerWMS);
			}
			},
			};
			</script>

			<style lang="less" scoped>
			.themaic {
			width: 100%;
			height: 100%;
			background: #303030;
			position: absolute;
			display: flex;
			overflow: hidden;
			.left_menu {
			margin: 0;
			width: 300px;
			height: 100%;
			transition: width 2s;
			background: url("../../assets/img/themic/å·¦æ¡.png") no-repeat center;
			background-size: 100% 100%;

			.tree-container {
			margin: 10px;
			height: 90%;
			overflow-y: auto;
			}
			.changeBaseLayer {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			overflow: hidden;
			}
			.CenDiv {
			height: 40px;
			width: 60px;

			margin-right: 7%;
			border-radius: 5px;
			bottom: 3%;
			}

			// .CenDiv:hover {

			// }
			.active {
			height: 40px;
			width: 60px;
			background: url("../../assets/img/themic/é»è®¤çå½±å.png") no-repeat center;
			position: absolute;
			background-size: 100% 100%;
			border-radius: 5px;
			}
			.menuLayer {
			height: 40px;
			width: 60px;
			background: url("../../assets/img/themic/é»è®¤çåºå¾.png") no-repeat center;
			position: absolute;
			background-size: 100% 100%;
			border-radius: 5px;
			}
			}
			.center_content {
			flex: 1;
			height: 100%;
			.MapView {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			float: left;
			position: relative;
			display: flex;
			justify-content: space-around;
			.TopHeader {
			width: 100%;
			height: 106px;
			margin-top: -21px;
			position: absolute;
			background: url("../../assets/img/themic/bj.png") no-repeat;
			background-size: 100% 100%;
			z-index: 40;
			.TopReturn {
			width: 142px;
			height: 40px;
			top: 37%;
			left: 2.2%;
			background: url("../../assets/img/themic/è¿å.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			z-index: 60;
			}
			}
			.leftEchart {
			z-index: 60;
			position: absolute;
			bottom: 2px;
			height: calc(100% - 77px);
			width: 24%;
			left: 10px;
			position: absolute;
			right: 10px;
			}
			.showEcharts {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			}
			.rightEchart {
			z-index: 60;
			position: absolute;
			height: calc(100% - 77px);
			width: 24%;
			right: 10px;
			bottom: 2px;
			position: absolute;
			right: 10px;
			}
			.rightEchartShow {
			margin-right: 20px;
			}
			.right_content {
			width: 20px;
			height: 100%;
			z-index: 60;
			right: 10px;
			position: absolute;
			display: flex;
			align-items: center;
			}

			.left_content {
			width: 20px;
			height: 100%;
			z-index: 60;
			left: 10px;
			position: absolute;
			display: flex;
			align-items: center;
			}
			.LeftMenu {
			width: 20px;
			height: 100px;
			background: url("../../assets/img/themic/life.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			float: right;
			}
			.LeftMenu1 {
			width: 20px;
			height: 100px;
			background: url("../../assets/img/themic/left1.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			float: right;
			}
			.RightMenu {
			width: 20px;
			height: 100px;
			background: url("../../assets/img/themic/right.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			float: right;
			}
			.RightMenu1 {
			width: 20px;
			height: 100px;
			background: url("../../assets/img/themic/right1.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			float: right;
			}
			}
			}
			.item_menu {
			height: 100%;
			display: flex;
			align-items: center;
			}
			.left_main_show {
			width: 0;
			}
			.right_menu {
			margin: 0;
			width: 300px;
			height: 100%;
			transition: width 2s;
			background: url("../../assets/img/themic/å³æ¡.png") no-repeat center;
			background-size: 100% 100%;
			.content_right {
			width: calc(100% - 40px);
			height: calc(100% - 60px);
			margin-top: 30px;
			margin-left: 20px;
			.contentLi {
			width: 100%;
			height: 95%;
			overflow-y: auto;
			}
			.contentBottom {
			width: 100%;
			height: 5%;
			margin-top: 5%;
			display: flex;
			justify-content: space-between;
			.right_item {
			align-items: center;
			display: flex;
			height: calc(100% - 2px);
			flex-grow: 1;
			justify-content: center;
			font-size: 14px;
			font-family: Source Han Sans SC;
			font-weight: 400;
			color: white;
			background: url("../../assets/img/themic/é»è®¤çæé®èæ¯.png")
			no-repeat center;
			background-size: 100% 100%;
			}
			.changeStyle {
			background: url("../../assets/img/themic/éä¸çæé®èæ¯.png")
			no-repeat center;
			background-size: 100% 100%;
			}
			}
			li {
			padding: 10px 10px;
			color: white;
			background: url("../../assets/img/themic/listBJ.png") no-repeat center;
			background-size: 100% 100%;
			}
			li:hover {
			color: #409eff;
			}
			.changeliStyle {
			color: #409eff;
			}
			}
			}

			.right_main_show {
			width: 0;
			}
			.echart1 {
			width: 100%;
			height: 33%;
			background: url("../../assets/img/themic/xxk.png") no-repeat;
			background-size: 100% 100%;
			}

			/* å»é¤æè½¬å¨ç» */
			.el-tree /deep/ .el-tree-node__expand-icon.expanded {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
			}

			/* æåèç¹ ä¸æªå±å¼ */
			.el-tree /deep/ .el-icon-caret-right:before {
			background: url("../../assets/img/themic/åè§ç©å½¢ 3 æ·è´ 3.png") no-repeat 0
			3px;
			content: "";
			content: "";
			display: block;
			width: 16px;
			height: 16px;
			font-size: 16px;
			background-size: 16px;
			}

			/* //æåèç¹ ä¸å·²å±å¼ */
			/deep/
			.el-tree
			.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
			background: url("../../assets/img/themic/åè§ç©å½¢ 3 æ·è´ 4.png") no-repeat 0
			3px;
			content: "";
			display: block;
			width: 16px;
			height: 16px;
			font-size: 16px;
			background-size: 16px;
			}

			/* æ²¡æåèç¹ */
			/deep/ .el-tree .el-tree-node__expand-icon.is-leaf::before {
			background: url("../../assets/img/themic/åè§ç©å½¢ 3 æ·è´ 3.png") no-repeat 0
			3px;
			content: "";
			display: block;
			width: 16px;
			height: 16px;
			font-size: 16px;
			background-size: 16px;
			}

			/deep/ .el-tree {
			padding-top: 15px;
			padding-left: 10px;
			// ä¸å¯å¨éæ ·å¼
			.el-tree-node {
			.is-leaf + .el-checkbox .el-checkbox__inner {
			display: inline-block;
			}
			.el-checkbox .el-checkbox__inner {
			display: none;
			}
			}
			}
			/deep/.el-tree .el-tree-node__content:hover {
			background-color: transparent !important;
			}
			/deep/.el-tree {
			color: white !important;
			background: transparent !important;
			}
			/deep/.el-tree-node:focus > .el-tree-node__content {
			background: transparent !important;
			}
			}
			</style>

			@@ -321,7 +321,6 @@
			var node= this.currentNode;
			var data = this.currentData;
			let copyNode = this.currentNode
			debugger
			// copyNode.previousSibling = {...node. }
			// copyNode.nextSibling = {...node.nextSibling}
			// window.sessionStorage.setItem('menuNode',CircularJSON.stringify(copyNode))

			@@ -1,9 +1,19 @@
			const path = require("path")
			const resolve = dir => path.join(__dirname, dir)
			module.exports = {
			lintOnSave: false,
			publicPath: './',
			publicPath: "./",
			devServer: {
			host: '0.0.0.0', //æå®è¦ä½¿ç¨ç host
			host: "0.0.0.0", //æå®è¦ä½¿ç¨ç host
			port: 12315, //æå®ç«¯å£å·ä»¥ä¾¦å¬
			hotOnly: false, //å¯ç¨çæ¨¡åæ¿æ¢ï¼èæ éé¡µé¢å·æ°ä½ä¸ºæå»ºå¤±è´¥æ¶çåéã
			},
			};

			configureWebpack: {
			resolve: {
			alias: {
			"@": resolve("src"),
			},
			},
			},
			}