增加二维

ZhAkps

2024-02-06 a6c2f0e8d84799f88b98c2736ed3108d32ef9327

增加二维

 src/assets/GLOBAL2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,8 @@
<script>
const layers = [];
const alpha = 1;
export default {
  layers, //收集器
  alpha,
};
</script>

 src/components/leftMenu/bottom2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,181 @@
<template>
  <div class="bottom" id="bottom">
    <div class="mapTools" v-show="show">
      <div class="mapTool" v-show="test.fwval">
        <el-button class="tool-rotate" @click="flyBack" title="复位">
          <img src="../../../static/img/image/ddrf.png" />
        </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.bottom {
  position: absolute;
  bottom: 0.4rem;
  height: 0.76rem;
  left: 0.1rem;
}
.mapModeControl {
  position: absolute;
  right: 0.05rem;
  background: rgba(90, 90, 90, 0.5);
  bottom: 0.05rem;
  height: 0.76rem;
  width: 1.03rem;
  transition: all 1s;
}
.bottom .mapModeControl:hover {
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  width: 3.2rem;
}
.mapMode {
  display: inline-block;
}
.mapMode dl {
  width: 0.88rem;
  height: 0.6rem;
  border: 1px solid #494949;
  cursor: pointer;
  margin: 0.08rem;
}

.mapMode dl:hover {
  border-color: #0553b4;
}

.mapMode dl {
  position: relative;
}
#history {
  background: url(../../../static/img/1.png) no-repeat;
}
#mode-3d {
  background: url(../../../static/img/2.png) no-repeat;
}
#mode-2d {
  background: url(../../../static/img/4.png) no-repeat;
}
.mapMode dt {
  width: 100%;
  height: 0.2rem;
  line-height: 0.2rem;
  position: absolute;
  left: 0;
  bottom: 0px;
  font-size: 0.12rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  background: rgba(0, 0, 0, 0.5);
}
.mapModeActive {
  background: rgba(1, 37, 80, 0.5) !important;
}

.mapTools {
  position: absolute;
  /* bottom: 2rem; */
  bottom: 0.2rem;
  /* right: 0.1rem; */
}
.mapTool {
  margin: 0.1rem 0;
}
.mapTool .el-button {
  padding: 0 !important;
  font-size: 0.24rem;
  border: unset;
  float: unset;
  display: block;
  background: rgba(18, 126, 255, 1);
}

/* .button-group-vertical {
  text-align: center;
  position: relative;
} */
.fgx {
  position: absolute;
  width: 80%;
  height: 1px;
  height: 1px;
  border: 1px solid #dcdfe6;
  z-index: 999;
  margin: 0 10%;
}
/* .button-group-vertical .el-button-group > .el-button:first-child {
  border-top-right-radius: 0.04rem !important;
  border-bottom-left-radius: 0px !important;
}
.button-group-vertical .el-button-group > .el-button:last-child {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.04rem !important;
} */
.mapTool img {
  width: 30px;
  /* height: 0.4rem; */
}
</style>
    
<script>
import Bus from "../../js/bus.js";
export default {
  props: ["test"],
  data() {
    return {
      show: true,
      parentdata: {
        fwval: false,
        zbzval: false,
        qpval: false,
        zymlval: false,
        kjcxval: false,
        dxmsval: false,
        snmsval: false,
        ssval: false,
      },
      clickIndex: 0,
      // isShowHistory: false,
      camera: {
        position: [116.52217697339846, 39.75979421847914, 17045.47005612415],
        orientation: {
          heading: 0,
          pitch: -90,
          roll: 0,
        },
      },
      modes: [
        {
          id: "mode-3d",
          name: "3D",
          mode: 3,
        },
        {
          id: "mode-2d",
          name: "2D",
          mode: 2,
        },
      ],
    };
  },
  mounted() {
    Bus.$on("myMsg", (myMsg) => {
      this.show = myMsg;
    });
  },
  methods: {
    flyBack() {
      map.getView().animate({
        // åªè®¾ç½®éœ€è¦çš„属性即可
        center: [116.52217697339846, 39.75979421847914], // ä¸­å¿ƒç‚¹
        zoom: 12, // ç¼©æ”¾çº§åˆ«
        rotation: undefined, // ç¼©æ”¾å®Œæˆview视图旋转弧度
        duration: 1000, // ç¼©æ”¾æŒç»­æ—¶é—´ï¼Œé»˜è®¤ä¸éœ€è¦è®¾ç½®
      });
    },
  },
};
</script>

 src/components/leftMenu/sousuo2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,835 @@
<template>
  <div id="sousuo" class="sousuo">
    <!-- æœç´¢æ¡† -->
    <div class="ssk" v-show="ssk.show">
      <span
        @click="ssjmxs"
        style="float: left; height: 100%; width: 80%; overflow: hidden"
        ><i class="el-icon-search" style="padding: 0px 15px 0px 20px"></i
        >{{ syssval }}</span
      >
      <span
        v-show="syssval !== '请输入关键词搜索地图'"
        @click="clearval"
        style="float: right; height: 100%; width: 20%"
        ><i class="el-icon-circle-close"></i
      ></span>
      <span
        v-show="syssval !== '请输入关键词搜索地图'"
        style="
          float: right;
          height: 100%;
          width: 10%;
          position: absolute;
          top: -1px;
          right: -3px;
        "
      >
        <img
          src="@/assets/img/navigation/addf.png"
          style="width: 20px"
          @click.stop="AddFavorite"
        />
      </span>
      <span
        v-show="syssval == '请输入关键词搜索地图'"
        style="float: right; height: 100%; width: 10%"
      >
        <img
          src="@/assets/img/navigation/addf.png"
          style="width: 20px"
          @click.stop="showAddFavorite"
        />
      </span>
    </div>
    <!-- æœç´¢ç•Œé¢ -->
    <div class="ssjm" v-show="ssjm">
      <!-- æœç´¢ç•Œé¢é¡¶éƒ¨ -->
      <div class="menutop">
        <div class="menutitle">搜索</div>
        <div class="menuback" @click="cancless">关闭</div>
      </div>
      <!-- æœç´¢æ¡† -->
      <div style="margin: 0.1rem 0">
        <el-input
          placeholder="输入关键字搜索地图"
          autofocus
          v-model="poi_text"
          @input="changeInput"
          clearable
        >
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
        </el-input>
      </div>
      <!-- ç»“果显示 -->
      <div v-if="total != 0">
        <div class="ssjg" v-show="ssjgxs">
          <div
            class="everyinfo"
            v-for="(item, index) in poiList"
            :key="index"
            @click="flyTo(item)"
          >
            <div style="margin: 0.05rem 0">
              <i class="el-icon-map-location"></i>{{ item.name }}
            </div>
            <div style="font-size: 0.12rem; color: black">
              <!-- <span>地址:{{ item.address ? item.address : "暂无详细地址" }}</span><br />
              <span>电话:{{ item.telphone ? item.telphone : "暂无联系方式" }}</span> -->
              <!-- <span>区域:{{ item.area ? item.area : "暂无区域信息" }}</span> -->
              <!-- <br /> -->
              <span
                >地址:{{ item.address ? item.address : "暂无详细地址" }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="ssjg" v-show="ssjgxs">未搜索到结果</div>
      </div>
    </div>
  </div>
</template>
<style scoped>
/* æœç´¢æŒ‰é’®çš„样式 */
.iszd {
  position: absolute;
  left: 0.2rem;
  top: 0.3rem;
}

/* æœç´¢æ¡†çš„样式 */
.ssk {
  position: absolute;
  /* text-align: center; */
  left: 2.5%;
  bottom: 0.2rem;
  width: 95%;
  border: 1px solid white;
  height: 0.4rem;
  line-height: 0.4rem;
  background: #fff;
  border-radius: 0.2rem;
  color: black;
  font-size: 0.14rem;
}

/* æœç´¢ç•Œé¢çš„样式 */
.ssjm {
  /* padding: 0 0.1rem; */
  /* padding-top: 0.3rem; */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: #f3f3f3;
  z-index: 99999;
}
.el-select {
  width: 80px;
}

/* æ¯æ¡æœç´¢ç»“æžœ */
.everyinfo {
  color: #409eff;
  padding: 0.05rem;
  font-size: 0.16rem;
  border-bottom: 1px solid lightgray;
}

.ssjg {
  overflow-x: hidden;
  overflow-y: scroll;
  /* max-height: 4rem; */
  max-height: 80vh;
  background: white;
  padding: 0.2rem;
  border-radius: 0.05rem;
}

.ssjg::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
  scrollbar-arrow-color: red;
}

.ssjg::-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;
}

.ssjg::-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);
}
</style>


<script>
let timers = null;
import axios from "axios";
import store from "@/utils/store2.js";
import common from "@/components/common";

window.flyPoint = null;
window.flyLine = null;
let Allresults = [];

export default {
  data() {
    return {
      syssval: "请输入关键词搜索地图",
      ssjgxs: false,
      ssk: store.searchPanel,
      ssjm: false,
      poi_text: "",
      showList: false,
      total: 0,
      poiList: [],
      select: "POI",
      options: [
        {
          label: "全部",
          value: "全部",
        },
        {
          label: "POI",
          value: "POI",
        },
        {
          label: "地块",
          value: "地块",
        },
      ],
    };
  },
  methods: {
    clearval() {
      this.syssval = "请输入关键词搜索地图";
      window.flyPoint && Viewer.entities.remove(window.flyPoint);
      window.flyPoint = undefined;
      window.flyLine && sgworld.Creator.DeleteObject(window.flyLine);
      window.flyLine = undefined;
      this.poi_text = "";
      this.ssjgxs = false;
    },
    changeInput() {
      if (this.poi_text === "") {
        this.ssjgxs = false;
        window.flyPoint && Viewer.entities.remove(window.flyPoint);
        window.flyPoint = undefined;
        window.flyLine && sgworld.Creator.DeleteObject(window.flyLine);
        window.flyLine = undefined;
      } else {
        clearTimeout(timers);
        timers = setTimeout(() => {
          this.search(); //需要防抖的函数
        }, 500);
      }
    },
    // æ˜¾ç¤ºæœç´¢ç•Œé¢
    ssjmxs() {
      this.ssjm = true;
    },
    // é€€å‡ºæœç´¢ç•Œé¢
    cancless() {
      this.ssjm = false;
    },
    getArea() {
      let height = Viewer.container.offsetHeight;
      let widht = Viewer.container.offsetWidth;
      let l_t = sgworld.Navigate.getMouseDegrees({ x: 0, y: 0 });
      let r_b = sgworld.Navigate.getMouseDegrees({ x: widht, y: height });
      let rectangle = {
        minx: (l_t && l_t.lon) || 118.022502789,
        miny: (r_b && r_b.lat) || 27.045434061,
        maxx: (r_b && r_b.lon) || 123.156157488,
        maxy: (l_t && l_t.lat) || 31.182515322,
      };
      if (rectangle.minx > rectangle.maxx) {
        let x = rectangle.minx;
        rectangle.minx = rectangle.maxx;
        rectangle.maxx = x;
      }
      if (rectangle.miny > rectangle.maxy) {
        let y = rectangle.miny;
        rectangle.miny = rectangle.maxy;
        rectangle.maxy = y;
      }
      rectangle.minx < 118.022502789 && (rectangle.minx = 118.022502789);
      rectangle.miny < 27.045434061 && (rectangle.miny = 27.045434061);
      rectangle.maxx > 123.156157488 && (rectangle.maxx = 123.156157488);
      rectangle.maxy > 31.182515322 && (rectangle.maxy = 31.182515322);
      return `RECT(${rectangle.minx} ${rectangle.miny},${rectangle.maxx} ${rectangle.maxy})`;
    },
    getPoi() {
      axios
        .get(common.poiserve, {
          params: {
            request: "GdPoi",
            keywords: this.poi_text,
            output: "json",
            coord: "cgcs2000",
            offset: 20,
            page: 1,
          },
        })
        .then((res) => {
          // é«˜å¾·
          console.log("poiserve");
          if (res.data.status == "1") {
            res.data.pois &&
              res.data.pois
                // .filter((item) => {
                //   var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
                //   return (
                //     item.pname.includes("北京") &&
                //     item.name.includes(this.poi_text) &&
                //     !reg.test(item.typecode)
                //   );
                // })
                .forEach((val) => {
                  let poiarr = val.location.split(",");
                  let poi = {
                    lon: parseFloat(poiarr[0]),
                    lat: parseFloat(poiarr[1]),
                  };
                  let obj = {
                    adcode: val.adcode,
                    address: val.address,
                    adname: val.area,
                    citycode: val.citycode,
                    cityname: val.cityname,
                    id: val.uid,
                    lat: poi.lat,
                    lng: poi.lon,
                    name: val.name,
                    pcode: val.pcode,
                    pname: val.province,
                    type: val.type,
                    typecode: val.typecode,
                  };
                  Allresults.push(obj);
                });
          }
          this.total = Allresults.length;
          this.poiList = Allresults;
          this.showList = true;
        });
    },
    getData() {
      axios
        .post(common.poiserve2, {
          adcode: "110115",
          address: {
            name: "",
            type: "",
          },
          adname: "大兴区",
          cityname: "北京市",
          name: {
            name: this.poi_text,
            type: "",
          },
          page: 1,
          perPageCount: 20,
          pcode: "110000",
          pname: "",
          resType: "",
        })
        .then((res) => {
          if (res.status == 200) {
            res.data.data.res &&
              res.data.data.res
                .filter((item) => {
                  // åˆ¤æ–­åœ°å—是否有汉字
                  var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
                  return (
                    item.name.includes(this.poi_text) && reg.test(item.typecode)
                  );
                })
                .forEach((val) => {
                  Allresults.push(val);
                });
          }
          this.total = Allresults.length;
          this.poiList = Allresults;
          this.showList = true;
        });
    },
    search() {
      if (this.poi_text === "") {
        this.poiList = [];
        Allresults = [];
      } else {
        this.ssjgxs = true;
        Allresults = [];
        this.poiList = [];
        switch (this.select) {
          case "全部":
            this.getPoi();
            this.getData();
            // axios
            //   .all([
            //     // 115接口（可查地块名）
            //     axios.post(common.poiserve2, {
            //       adcode: "110115",
            //       address: {
            //         name: "",
            //         type: "",
            //       },
            //       adname: "大兴区",
            //       cityname: "北京市",
            //       name: {
            //         name: this.poi_text,
            //         type: "",
            //       },
            //       page: 1,
            //       perPageCount: 20,
            //       pcode: "110000",
            //       pname: "",
            //       resType: "",
            //     }),
            //     // // å¸‚级平台（百度：会查到外地）
            //     // axios.get(common.poiserve, {
            //     //   params: {
            //     //     request: "bdPoi",
            //     //     query: this.poi_text,
            //     //     output: "json",
            //     //     coord: "cgcs2000",
            //     //     page_num: 0,
            //     //     page_size: 20,
            //     //   },
            //     // }),
            //     //  å¸‚级平台（高德）
            //     axios.get(common.poiserve, {
            //       params: {
            //         request: "GdPoi",
            //         keywords: this.poi_text,
            //         output: "json",
            //         coord: "cgcs2000",
            //         offset: 20,
            //         page: 1,
            //       },
            //     }),
            //   ])
            //   .then(
            //     (data) => {
            //       // this.total = data.data.pois.length;
            //       // this.poiList =
            //       //   data.data && data.data.pois;
            //       //115接口
            //       if (data[0].status == 200) {
            //         data[0].data.data.res &&
            //           data[0].data.data.res
            //             .filter((item) => {
            //               return item.name.includes(this.poi_text);
            //             })
            //             .forEach((val) => {
            //               Allresults.push(val);
            //             });
            //       }
            //       // å¸‚级平台
            //       // // ç™¾åº¦
            //       // if (data[1].data.status == 0) {
            //       //   data[1].data.results.forEach((val) => {
            //       //     let obj = {
            //       //       address: val.address,
            //       //       adname: val.area,
            //       //       cityname: val.city,
            //       //       id: val.uid,
            //       //       lat: val.location.lat,
            //       //       lng: val.location.lng,
            //       //       name: val.name,
            //       //       pname: val.province,
            //       //     };
            //       //     Allresults.push(obj);
            //       //   });
            //       // }
            //       // é«˜å¾·

            //       console.log(data, "数据");
            //       if (data[0].data.status == 1) {
            //         data[0].data.pois &&
            //           data[0].data.pois
            //             .filter((item) => {
            //               return (
            //                 item.pname.includes("北京") &&
            //                 item.name.includes(this.poi_text)
            //               );
            //             })
            //             .forEach((val) => {
            //               let poiarr = val.location.split(",");
            //               let poi = {
            //                 lon: parseFloat(poiarr[0]),
            //                 lat: parseFloat(poiarr[1]),
            //               };
            //               let obj = {
            //                 adcode: val.adcode,
            //                 address: val.address,
            //                 adname: val.area,
            //                 citycode: val.citycode,
            //                 cityname: val.cityname,
            //                 id: val.uid,
            //                 lat: poi.lat,
            //                 lng: poi.lon,
            //                 name: val.name,
            //                 pcode: val.pcode,
            //                 pname: val.province,
            //                 type: val.type,
            //                 typecode: val.typecode,
            //               };
            //               Allresults.push(obj);
            //             });
            //       }
            //       this.total = Allresults.length;
            //       this.poiList = Allresults;
            //       this.showList = true;
            //       console.log(Allresults);
            //     },
            //     (response) => {
            //       console.log("error");
            //     }
            //   );
            break;
          case "POI":
            this.getPoi();
            break;
          case "地块":
            this.getData();
            break;
        }
      }
    },
    getPosition(geo) {
      let p = geo && geo.replace("POINT(", "").replace(")", "");
      return p.split(" ");
    },
    flyTo(item) {
      this.ssjm = false;
      this.syssval = item.name;
      let that = this;
      // let degrees = item.location.split(',');
      // let degrees = [item.location.lng, item.location.lat];
      let degrees = [item.lng, item.lat];
      window.flyPoint && Viewer.entities.remove(window.flyPoint);
      window.flyLine && sgworld.Creator.DeleteObject(window.flyLine);
      sgworld.Navigate.flyToPointsInterest({
        destination: Cesium.Cartesian3.fromDegrees(
          degrees[0],
          degrees[1],
          1000
        ),
      });
      // æ·»åŠ ç‚¹ä½
      window.flyPoint = Viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(degrees[0], degrees[1]),
        billboard: {
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          scale: 1,
          image: window.SmartEarthRootUrl + "/Workers/image/mark1.png",
          heightReference: 1,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
        properties: item,
      });
      // å¦‚果是地块，添加范围线
      if (item.type == "大兴用地") {
        axios
          .get(
            window.gisBaseUrl +
              "yzxncsApi/geowinmap_xncs/ds?r=0.9158559377752831&serviceproviderid=map.vectorserviceprovider&serviceid=queryfeature&featcls=225%25E8%258C%2583%25E5%259B%25B4%25E5%2588%2586%25E5%258C%25BA%25E8%25A7%2584%25E5%2588%2592.geojson&lng=" +
              degrees[0] +
              "&lat=" +
              degrees[1] +
              "&geom=true&requesttype=json"
          )
          .then((response) => {
            let center = { lon: 0, lat: 0 };
            let polygon = that.read(response.data.geometry);
            if (polygon.length > 0) {
              var geometry = [];
              let points = polygon[0].split(",");
              for (let i = 0; i < points.length; i++) {
                let point = points[i].replace(/^\s+|\s+$/g, "").split(" ");
                center.lon += parseFloat(point[0]) / points.length;
                center.lat += parseFloat(point[1]) / points.length;
                geometry.push({
                  x: parseFloat(point[0]),
                  y: parseFloat(point[1]),
                  z: 0,
                });
              }
              window.flyLine = sgworld.Creator.createPolyline(
                geometry,
                "#ff0000",
                1,
                0,
                "线"
              );
            }
          });
      }
    },
    AddFavorite() {
      let posi = sgworld.Viewer.camera.position;
      let pointsInterest = {
        destination: posi,
        orientation: {
          heading: Viewer.camera.heading,
          pitch: Viewer.camera.pitch,
          roll: Viewer.camera.roll,
        },
      };
      let temObj = {};
      temObj.name = this.syssval;
      // å¯¹è±¡å…‹éš†
      temObj.position = JSON.parse(JSON.stringify(pointsInterest));
      // this.dataSc.push(temObj);
      if (window.locations == "" || window.locations == undefined) {
        window.locations = [];
      }
      // æŠŠä½ç½®ä¿¡æ¯æ·»åŠ åˆ°ç¼“存中
      window.setLocations([...window.locations, temObj]);
      this.$message({
        message: "已收藏，请到菜单>位置>收藏中查看",
        duration: 1500,
        type: "success",
      });
      this.clearval();
    },
    showAddFavorite() {
      if (store.addFavorite.show) {
        store.setAddFavoriteShow(false);
      } else {
        store.setAddFavoriteShow(true);
        store.setLayerPanelShow(false);
        store.setRoamPanelShow(false);
        store.setStatisticsPanelShow(false);
        store.setLocationCollectionShow(false);
        store.setSettingPanelShow(false);
      }
    },
    read(wkt) {
      var regExes = {
        typeStr: /^\s*(\w+)\s*\(\s*(.*)\s*\)\s*$/,
        emptyTypeStr: /^\s*(\w+)\s*EMPTY\s*$/,
        spaces: /\s+/,
        parenComma: /\)\s*,\s*\(/,
        doubleParenComma: /\)\s*\)\s*,\s*\(\s*\(/, // can't use {2} here
        trimParens: /^\s*\(?(.*?)\)?\s*$/,
      };
      /**
       * Object with properties corresponding to the geometry types. Property values
       * are functions that do the actual parsing.
       * @private
       */
      var parse$1 = {
        /**
         * Return point geometry given a point WKT fragment.
         *
         * @param {String} str A WKT fragment representing the point.
         * @return {Point} A point geometry.
         * @private
         */
        point: function point(str) {
          if (str === undefined) {
            return [];
          }

          var coords = str.trim().split(regExes.spaces);
          return [Number.parseFloat(coords[0]), Number.parseFloat(coords[1])];
        },

        /**
         * Return a multipoint geometry given a multipoint WKT fragment.
         *
         * @param {String} str A WKT fragment representing the multipoint.
         * @return {Point} A multipoint feature.
         * @private
         */
        multipoint: function multipoint(str) {
          var this$1 = this;

          if (str === undefined) {
            return [];
          }

          var point;
          var points = str.trim().split(",");
          var components = [];
          for (var i = 0, len = points.length; i < len; ++i) {
            point = points[i].replace(regExes.trimParens, "$1");
            components.push(parse$1.point(point));
          }
          return components;
        },

        /**
         * Return a linestring geometry given a linestring WKT fragment.
         *
         * @param {String} str A WKT fragment representing the linestring.
         * @return {LineString} A linestring geometry.
         * @private
         */
        linestring: function linestring(str) {
          if (str === undefined) {
            return [];
          }

          var points = str.trim().split(",");
          var components = [];
          var coords;
          for (var i = 0, len = points.length; i < len; ++i) {
            coords = points[i].trim().split(regExes.spaces);
            components.push([
              Number.parseFloat(coords[0]),
              Number.parseFloat(coords[1]),
            ]);
          }
          return components;
        },

        /**
         * Return a linearring geometry given a linearring WKT fragment.
         *
         * @param {String} str A WKT fragment representing the linearring.
         * @return {LinearRing} A linearring geometry.
         * @private
         */
        linearring: function linearring(str) {
          if (str === undefined) {
            return [];
          }

          var points = str.trim().split(",");
          var components = [];
          var coords;
          for (var i = 0, len = points.length; i < len; ++i) {
            coords = points[i].trim().split(regExes.spaces);
            components.push([
              Number.parseFloat(coords[0]),
              Number.parseFloat(coords[1]),
            ]);
          }
          return components;
        },

        /**
         * Return a multilinestring geometry given a multilinestring WKT fragment.
         *
         * @param {String} str A WKT fragment representing the multilinestring.
         * @return {MultiLineString} A multilinestring geometry.
         * @private
         */
        multilinestring: function multilinestring(str) {
          var this$1 = this;

          if (str === undefined) {
            return [];
          }

          var line;
          var lines = str.trim().split(regExes.parenComma);
          var components = [];
          for (var i = 0, len = lines.length; i < len; ++i) {
            line = lines[i].replace(regExes.trimParens, "$1");
            components.push(parse$1.linestring(line));
          }
          return components;
        },

        /**
         * Return a polygon geometry given a polygon WKT fragment.
         *
         * @param {String} str A WKT fragment representing the polygon.
         * @return {Polygon} A polygon geometry.
         * @private
         */
        polygon: function polygon(str) {
          var this$1 = this;

          if (str === undefined) {
            return [];
          }

          var ring, linestring, linearring;
          var rings = str.trim().split(regExes.parenComma);
          var shell;
          var holes = [];
          //for (var i = 0, len = rings.length; i < len; ++i) {
          ring = rings[0].replace(regExes.trimParens, "$1");
          linestring = ring;
          //}
          return linestring;
        },

        /**
         * Return a multipolygon geometry given a multipolygon WKT fragment.
         *
         * @param {String} str A WKT fragment representing the multipolygon.
         * @return {MultiPolygon} A multipolygon geometry.
         * @private
         */
        multipolygon: function multipolygon(str) {
          var this$1 = this;

          if (str === undefined) {
            return [];
          }

          var polygon;
          var polygons = str.trim().split(regExes.doubleParenComma);
          var components = [];
          for (var i = 0, len = polygons.length; i < len; ++i) {
            polygon = polygons[i].replace(regExes.trimParens, "$1");
            components.push(parse$1.polygon(polygon));
          }
          return components;
        },
      };

      var geometry, type, str;
      wkt = wkt.replace(/[\n\r]/g, " ");
      var matches = regExes.typeStr.exec(wkt);
      if (wkt.search("EMPTY") !== -1) {
        matches = regExes.emptyTypeStr.exec(wkt);
        matches[2] = undefined;
      }
      if (matches) {
        type = matches[1].toLowerCase();
        str = matches[2];
        if (parse$1[type]) {
          geometry = parse$1[type].apply(this, [str]);
        }
      }

      if (geometry === undefined) {
        throw new Error("Could not parse WKT " + wkt);
      }

      return geometry;
    },
  },
};
</script>

 src/components/rightMenu/bottom2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,202 @@
<template>
  <div class="bottom" id="bottom">
    <div class="mapTools" v-show="show">
      <div class="mapTool" v-show="test.fwval">
        <el-button class="tool-rotate" @click="zoomIn" title="放大">
          <img src="../../../static/img/image/zoomIn.png" />
        </el-button>
      </div>
      <div class="mapTool" v-show="test.fwval">
        <el-button class="tool-rotate" @click="zoomOut" title="缩小">
          <img src="../../../static/img/image/zoomOut.png" />
        </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.bottom {
  position: absolute;
  bottom: 0.4rem;
  height: 0.76rem;
  right: 0.4rem;
}
.mapModeControl {
  position: absolute;
  right: 0.05rem;
  background: rgba(90, 90, 90, 0.5);
  bottom: 0.05rem;
  height: 0.76rem;
  width: 1.03rem;
  transition: all 1s;
}
.bottom .mapModeControl:hover {
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  width: 3.2rem;
}
.mapMode {
  display: inline-block;
}
.mapMode dl {
  width: 0.88rem;
  height: 0.6rem;
  border: 1px solid #494949;
  cursor: pointer;
  margin: 0.08rem;
}

.mapMode dl:hover {
  border-color: #0553b4;
}

.mapMode dl {
  position: relative;
}
#history {
  background: url(../../../static/img/1.png) no-repeat;
}
#mode-3d {
  background: url(../../../static/img/2.png) no-repeat;
}
#mode-2d {
  background: url(../../../static/img/4.png) no-repeat;
}
.mapMode dt {
  width: 100%;
  height: 0.2rem;
  line-height: 0.2rem;
  position: absolute;
  left: 0;
  bottom: 0px;
  font-size: 0.12rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  background: rgba(0, 0, 0, 0.5);
}
.mapModeActive {
  background: rgba(1, 37, 80, 0.5) !important;
}

.mapTools {
  position: absolute;
  /* bottom: 2rem; */
  bottom: 0.2rem;
  /* right: 0.1rem; */
}
.mapTool {
  margin: 0.1rem 0;
}
.mapTool .el-button {
  padding: 0 !important;
  font-size: 0.24rem;
  border: unset;
  float: unset;
  display: block;
  background: rgba(18, 126, 255, 1);
}

/* .button-group-vertical {
  text-align: center;
  position: relative;
} */
.fgx {
  position: absolute;
  width: 80%;
  height: 1px;
  height: 1px;
  border: 1px solid #dcdfe6;
  z-index: 999;
  margin: 0 10%;
}
/* .button-group-vertical .el-button-group > .el-button:first-child {
  border-top-right-radius: 0.04rem !important;
  border-bottom-left-radius: 0px !important;
}
.button-group-vertical .el-button-group > .el-button:last-child {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.04rem !important;
} */
.mapTool img {
  width: 24px;
  margin: 3px;
  /* height: 0.4rem; */
}
</style>
    
<script>
import Bus from "../../js/bus.js";
export default {
  props: ["test"],
  data() {
    return {
      show: true,
      parentdata: {
        fwval: false,
        zbzval: false,
        qpval: false,
        zymlval: false,
        kjcxval: false,
        dxmsval: false,
        snmsval: false,
        ssval: false,
      },
      clickIndex: 0,
      // isShowHistory: false,
      camera: {
        position: [116.52217697339846, 39.75979421847914, 17045.47005612415],
        orientation: {
          heading: 0,
          pitch: -90,
          roll: 0,
        },
      },
      modes: [
        {
          id: "mode-3d",
          name: "3D",
          mode: 3,
        },
        {
          id: "mode-2d",
          name: "2D",
          mode: 2,
        },
      ],
    };
  },
  mounted() {
    Bus.$on("myMsg", (myMsg) => {
      this.show = myMsg;
    });
  },
  methods: {
    zoomIn() {
      const view = window.map.getView();
      const zoom = view.getZoom();

      map.getView().animate({
        // åªè®¾ç½®éœ€è¦çš„属性即可
        center: window.map.getView().getCenter(), // ä¸­å¿ƒç‚¹
        zoom: zoom + 1, // ç¼©æ”¾çº§åˆ«
        rotation: undefined, // ç¼©æ”¾å®Œæˆview视图旋转弧度
        duration: 1000, // ç¼©æ”¾æŒç»­æ—¶é—´ï¼Œé»˜è®¤ä¸éœ€è¦è®¾ç½®
      });
    },
    zoomOut() {
      const view = window.map.getView();
      const zoom = view.getZoom();

      map.getView().animate({
        // åªè®¾ç½®éœ€è¦çš„属性即可
        center: window.map.getView().getCenter(), // ä¸­å¿ƒç‚¹
        zoom: zoom - 1, // ç¼©æ”¾çº§åˆ«
        rotation: undefined, // ç¼©æ”¾å®Œæˆview视图旋转弧度
        duration: 1000, // ç¼©æ”¾æŒç»­æ—¶é—´ï¼Œé»˜è®¤ä¸éœ€è¦è®¾ç½®
      });
    },
  },
};
</script>

 src/components/rightMenu/layerTree2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,2115 @@
<template>
  <div>
    <div class="zymljm">
      <!-- rightshowzy.zymlval è®¾ç½®é¡µä¼ é€’过来的参数，判断资源目录按钮是否显示 -->
      <div v-show="rightshowzy.zymlval">
        <!-- ç‚¹å‡»æŽ§åˆ¶èµ„源目录按钮图片的切换 -->
        <el-button
          @click="zymlisopen"
          style="padding: 0; border: none; background-color: transparent"
        >
          <img
            style="width: 0.4rem; height: 0.4rem"
            src="../../../static/img/image/zyml1.png"
          />
        </el-button>
      </div>
      <!-- æ ¹æ®æŒ‰é’®æ˜¾ç¤º/隐藏状态->资源目录树的显示/隐藏 -->
    </div>
    <div v-show="rightshowzy.zymlmenu" class="layerTree" ref="abc">
      <!-- ç‚¹å‡»è¿”回 -->
      <div class="menutop">
        <div class="menuback" @click="menuclick">
          <i class="el-icon-caret-left"></i>返回
        </div>
        <div class="menutitle">资源目录</div>
      </div>
      <!-- :default-checked-keys=arr当前json文件中已经选中的数据 -->
      <el-card
        class="box-card"
        style="margin-top: 0.1rem; height: 94%; overflow: auto"
      >
        <el-tree
          @check="check"
          :data="treeData"
          node-key="id"
          :default-checked-keys="arr"
          :render-after-expand="false"
          :render-content="renderContent"
          show-checkbox
          ref="tree"
        >
        </el-tree>
      </el-card>
    </div>
  </div>
</template>
<style scoped>
.funButton {
  position: absolute;
  top: 1.2rem;
  right: 0.1rem;
}
.zymljm {
  position: absolute;
  top: 0.3rem;
  right: 0.1rem;
}
.layerTree {
  padding: 0.3rem 0.1rem;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2021;
  /* overflow-y: auto;
  overflow-x: hidden; */
  background-color: white;
}

.layerTree::-webkit-scrollbar,
.box-card::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
  scrollbar-arrow-color: red;
}

.layerTree::-webkit-scrollbar-thumb,
.box-card::-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;
}

.layerTree::-webkit-scrollbar-track,
.box-card::-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);
}
</style>
  
<script>
import axios from "axios";
import common from "@/components/common";

let colorTool;
let projectTreeData = [];

//添加工程树数据
function addTreeData(data, layer) {
  var d = {};
  for (var key in data) {
    d[key] = data[key];
  }
  d.item = layer;
  projectTreeData.push(d);
}

//通过id获取指定元素
function _getTreeData(id) {
  for (var i = 0; i < projectTreeData.length; i++) {
    if (
      projectTreeData[i].id === id ||
      (projectTreeData[i].datatype === "entity" &&
        projectTreeData[i].item &&
        projectTreeData[i].item.entity &&
        projectTreeData[i].item.entity.id === id) ||
      (projectTreeData[i].datatype === "editEntity" &&
        projectTreeData[i].item &&
        projectTreeData[i].item[projectTreeData[i].type] &&
        projectTreeData[i].item[projectTreeData[i].type].id === id)
    ) {
      return projectTreeData[i];
    }
  }
}

//获取sg样式配置
async function getSGStyle(type, json, name) {
  let de;
  !colorTool && (colorTool = sgworld.Core.gradientColor());
  function getSGColor(color) {
    let _color = parseInt(color).toString(16);
    if (_color.length === 2) {
      _color = "0000" + _color;
    } else if (_color.length === 4) {
      _color = "00" + _color;
    }
    _color = "#" + _color.slice(4) + _color.slice(2, 4) + _color.slice(0, 2);
    return _color;
  }
  await axios
    .get(json)
    .then(
      (response) => {
        let _data = response.data;
        if (_data && typeof _data === "string") {
          _data = JSON.parse(_data);
        }
        let style = _data.filter((item) => {
          return item.LayerName === name;
        });
        if (type === "point") {
          let data = style[0];
          style = data.Point;
          style.Line_Color = getSGColor(style.Line_Color);
          style.Image_Color = getSGColor(style.Image_Color);
          style.Text_Color = getSGColor(style.Text_Color);
          style.Background_Color = getSGColor(style.Background_Color);

          let color = colorTool.colorRgb(
            defaultValue(style.Text_Color, "#ffffff")
          );
          let bgColor = colorTool.colorRgb(
            defaultValue(style.Background_Color, "#010101")
          );
          de = {
            label: {
              text: {
                defaultValue: defaultValue(
                  style.Text.match(/<Value>(\S*)<\/Value>/)[1],
                  style.Text.match(/<DefaultValue>(\S*)<\/DefaultValue>/)[1]
                ),
              },
              scaleMPP: { defaultValue: style.Scale },
              fillColor: {
                defaultValue: {
                  red: color[0] / 255,
                  green: color[1] / 255,
                  blue: color[2] / 255,
                  alpha: 1,
                },
              },
              scaleByDistance: {
                near: 0,
                nearValue: 1,
                far: 800000000,
                farValue: 1,
              },
              minViewingHeight: { defaultValue: "0" },
              font: { defaultValue: style.Text_Size },
              family: { defaultValue: defaultValue(style.Font, "Arial") },
              backgroundColor: {
                defaultValue: {
                  red: bgColor[0] / 255,
                  green: bgColor[1] / 255,
                  blue: bgColor[2] / 255,
                  alpha: 1,
                },
              },
              scale: defaultValue(style.TextScale, 1.5),
              backgroundOpacity: { defaultValue: style.Background_Opacity },
              italic: { defaultValue: style.Italic },
              bold: { defaultValue: style.Bold },
              limitGrowth: { defaultValue: "1" },
              textRelativeToImage: { defaultValue: "0" },
              showText: { defaultValue: "0" },
              textAlignment: { defaultValue: "17" },
              pixelOffset: new Cesium.Cartesian2(
                defaultValue(style.offsetX, 0),
                defaultValue(style.offsetY, style.Image_file ? -10 : 0)
              ),
              outlineColor: Cesium.Color.fromCssColorString(
                defaultValue(style.Line_Color, "#ffffff")
              ),
              outlineWidth: defaultValue(style.outlineWidth, 2),
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            },
            lineToGround: { defaultValue: style.Line_to_Ground },
            lineToGroundLength: { defaultValue: style.Line_Length },
            lineToGroundColor: {
              defaultValue: { red: 1, green: 1, blue: 1, alpha: 1 },
            },
            altitudeMethod: 0,
            altitudeOffset: { defaultValue: "0" },
            clampToGround: defaultValue(style.clampToGround, true),
            pointHeight: defaultValue(style.pointHeight, undefined),
            minimumLevel: defaultValue(style.level_min, 0),
            maximumLevel: defaultValue(style.level_max, 22),
            position_x: data.position_x,
            position_y: data.position_y,
            position_z: data.position_z == 0 ? 10000 : data.position_z,
            urls: data.Server,
            layer: data.ServerName,
          };
          if (style.Line_Color) {
            de.label && (de.label.style = Cesium.LabelStyle.FILL_AND_OUTLINE);
          }
          if (style.Image_file) {
            de.billboard = {
              image: style.Image_file,
              scale: defaultValue(style.ImageScale, 1),
              scaleMPP: { defaultValue: style.Scale },
              scaleByDistance: {
                near: 0,
                nearValue: 1,
                far: 800000000,
                farValue: 1,
              },
              minViewingHeight: { defaultValue: "0" },
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            };
          }
        } else if (type === "polyline") {
          console.log(data);
          let data = style[0];
          style = data.Line;
          style.Line_Color = getSGColor(style.Line_Color);
          if (style.Line_Width) {
            if (style.Line_Width.length === 2) {
              style.Line_Width /= 10;
            } else if (style.Line_Width.length === 3) {
              style.Line_Width /= 100;
            }
          }
          let color = colorTool.colorRgb(
            defaultValue(style.Line_Color, "#ff0000")
          );
          de = {
            polyline: {
              material: {
                red: color[0] / 255,
                green: color[1] / 255,
                blue: color[2] / 255,
                alpha: 1,
              },
              lineOpacity: parseInt(defaultValue(style.Line_Opacity, 1)),
              width: parseInt(defaultValue(style.Line_Width, 4)),
              near: style.Near,
              far: style.Far,
              clampToGround: defaultValue(style.clampToGround, true),
            },
            minimumLevel: defaultValue(style.level_min, 0),
            maximumLevel: defaultValue(style.level_max, 22),
            position_x: data.position_x,
            position_y: data.position_y,
            position_z: data.position_z == 0 ? 10000 : data.position_z,
            urls: data.Server,
            layer: data.ServerName,
          };
        } else if (type === "polygon") {
          let data = style[0];
          style = data.data;

          style.fill = Cesium.Color.fromCssColorString(style.fill);
          style.outlineColor = Cesium.Color.fromCssColorString(
            style.outlineColor
          );
          de = {
            polygon: {
              outlineColor: {
                defaultValue: style.outlineColor,
              },
              outlineWidth: style.outlineWidth,
              fill: { defaultValue: style.fill.alpha },
              extrudedHeight: style.extrudedHeight || 0,
              height: style.height,
              outline: style.outline,
              material: {
                defaultValue: style.fill,
              },
              clampToGround: !style.extrudedHeight ? true : false,
              fromKml: true,
            },
            altitudeMethod: 2,
            altitudeOffset: { defaultValue: "0" },
            minimumLevel: defaultValue(style.level_min, 0),
            maximumLevel: defaultValue(style.level_max, 22),
            position_x: data.position_x,
            position_y: data.position_y,
            position_z: data.position_z == 0 ? 10000 : data.position_z,
            urls: data.Server,
            layer: data.ServerName,
          };
        }
      },
      (response) => {
        console.log("获取样式配置失败！");
      }
    )
    .catch(function (error) {
      console.log(error);
    });
  return de;
}

function defaultValue(a, b) {
  return a !== undefined ? a : b;
}

export default {
  props: ["rightshowzy"],
  data() {
    return {
      wholeNode: [],
      alldisabled: [],
      arr: [], //用来保存资源目录中默认选中的节点id
      x: 0,
      y: 0,
      l: 0,
      t: 0,
      nx: 0,
      ny: 0,
      nl: 0,
      nt: 0,
      zymlimg: false,
      iniselect: [],
      SmartEarthToken: undefined,
      treeData: [],
      defaultSceneData: [
        {
          id: "image",
          name: "影像",
          checked: true,
          icon: "./static/img/yx.png",
        },
        {
          id: "terrain",
          name: "地形",
          checked: true,
          icon: "./static/img/dx.png",
        },
        {
          id: "jx_model",
          name: "精细模型",
          checked: false,
          icon: "./static/img/jxmx.png",
        },
        {
          id: "qx_model",
          name: "倾斜模型",
          checked: false,
          icon: "./static/img/qxmx.png",
        },
        {
          id: "dy_model",
          name: "点云模型",
          checked: false,
          icon: "./static/img/dymx.png",
        },
        {
          id: "bm",
          name: "白膜",
          checked: false,
          icon: "./static/img/bm.png",
        },
        {
          id: "bim",
          name: "BIM模型",
          checked: false,
          icon: "./static/img/bim.png",
        },
        {
          id: "swzj",
          name: "三维注记",
          checked: false,
          icon: "./static/img/swzj.png",
        },
        {
          id: "xzq",
          name: "行政区界限",
          checked: false,
          icon: "./static/img/xzq.png",
        },
      ],
    };
  },
  mounted() {
    window.ProjectTree = this.$refs.tree;
    //获取token并请求加载图层数据
    common.getToken((token) => {
      this.SmartEarthToken = token;
    });

    this.$nextTick(() => {
      axios.get("./static/layers.json").then(
        (response) => {
          // å¾—到默认选中的数据的id
          this.parseJson(response.data.children);
          // åˆ é™¤æ•°ç»„中第一个
          this.alldisabled.shift();
          // èŽ·å¾—子节点全部被禁用的children
          this.tem(this.alldisabled);
          // éåŽ†å­èŠ‚点全部禁用的数组，遍历整个树，给子节点全部被禁用的父节点添加disabled属性
          for (var i = 0; i < this.wholeNode.length; i++) {
            var a = this.getItem(response.data.children, this.wholeNode[i]);
            a.disabled = true;
          }
          //场景配置
          this.treeData = response.data && response.data.children;
        },
        (response) => {
          console.log("获取场景配置失败！");
        }
      );
    });
  },
  methods: {
    menuclick() {
      this.rightshowzy.zymlmenu = false;
    },
    zymlisopen() {
      this.rightshowzy.zymlmenu = true;
    },
    // é€’归遍历json，得到checked:true的数据的id，添加到arr中
    parseJson(jsonObj) {
      // å£°æ˜Žå˜é‡count，记录disabled存在的节点的全部数据
      var count = 0;
      for (var v in jsonObj) {
        var element = jsonObj[v];
        if (element.children == undefined || element.children.length == 0) {
          if (element._children == undefined || element._children.length == 0) {
            if (element.checked) {
              this.arr.push(element.id);
            }
            if (element.urls == undefined || element.urls == "") {
              element.disabled = true;
              count++;
            }
          } else {
            this.parseJson(element._children);
          }
        } else {
          this.parseJson(element.children);
        }
      }
      if (count !== 0) {
        // æ·»åŠ å«æœ‰disabled属性的节点数组，
        this.alldisabled.push(jsonObj);
      }
    },

    tem(data) {
      for (var i = 0; i < data.length; i++) {
        var temdata = data[i];
        var count = 0;
        for (var j = 0; j < temdata.length; j++) {
          if (temdata[j].disabled) {
            count++;
          }
        }
        if (temdata.length == count) {
          this.wholeNode.push(data[i]);
        }
      }
    },

    // éåŽ†æ ‘，得到和children属性相同的节点
    getItem(tree, children) {
      var Deep, T, F;
      for (F = tree.length; F; ) {
        T = tree[--F];
        if (children == T.children) return T;
        if (T.children) {
          Deep = this.getItem(T.children, children);
          if (Deep) return Deep;
        }
      }
    },
    //
    check(treeNode, data) {
      let isCheck = data.checkedKeys.indexOf(treeNode.id) > -1;
      this.setVisiable(treeNode, isCheck);
    },

    getLayerData(token) {
      axios({
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token,
        },
        method: "get",
        url: common.serverUrl + "/system/user/getfrontdata",
      }).then(
        (response) => {
          console.log(response.data);
          //获取场景配置
          this.getSceneConfig(response.data);
        },
        (response) => {
          console.log("error");
        }
      );
    },
    getSceneConfig(data) {
      //获取场景配置
      if (data && data.length) {
        let sceneConfig = this.defaultSceneData;
        let configIndex = {};
        let config;
        sceneConfig.forEach((item, index) => {
          configIndex[item.name] = index;
        });
        data.forEach((item) => {
          let _index = configIndex[item.alias];
          if (
            item.datatype === "地形" &&
            item.datasource === "SmartearthServer"
          ) {
            let url, split;
            if (item.serverurl.indexOf("Elevation/") > -1) {
              url = item.serverurl.split("Elevation/");
              split = "Elevation";
            } else if (item.serverurl.indexOf("MptElevation.ashx/") > -1) {
              url = item.serverurl.split("MptElevation.ashx/");
              split = "MptElevation.ashx";
            }
            config = this.getConfigTemplate("sgs-terrain", {
              name: item.name,
              url: url[0] + split,
              layer: url[1],
            });
          } else if (
            item.datatype === "影像" &&
            item.datasource === "SmartearthServer"
          ) {
            let url = item.serverurl.split("Imagery/");
            config = this.getConfigTemplate("wms", {
              name: item.name,
              url: url[0] + "Imagery",
              layer: url[1],
            });
          } else if (item.datatype === "模型") {
            config = this.getConfigTemplate("3dtiles", {
              checked: false,
              name: item.name,
              url: item.serverurl,
            });
          } else if (
            item.datatype === "矢量" &&
            item.datasource === "SmartearthServer"
          ) {
            let url;
            if (item.serverurl.indexOf("streamer.ashx/") > -1) {
              url = item.serverurl.split("streamer.ashx/");
            } else {
              url = item.serverurl.split("Streamer.ashx/");
            }
            if (item.alias === "三维注记") {
              config = this.getConfigTemplate("wfs", {
                class: "pointLayer",
                checked: false,
                name: item.name,
                url: url[0] + "streamer.ashx",
                layer: url[1],
              });
            } else if (item.alias === "行政区界限") {
              config = this.getConfigTemplate("wfs", {
                class: "polylineLayer",
                checked: false,
                name: item.name,
                url: url[0] + "streamer.ashx",
                layer: url[1],
              });
            }
          }
          if (item.name === item.alias) {
            sceneConfig[_index] = Object.assign(config, sceneConfig[_index]);
          } else {
            !sceneConfig[_index].children &&
              (sceneConfig[_index].children = []);
            config.id =
              sceneConfig[_index].id +
              (sceneConfig[_index].children.length + 1);
            sceneConfig[_index].children.push(config);
          }
        });
        this.treeData = sceneConfig;
      }
    },

    getConfigTemplate(type, option) {
      let data = {};
      !option && (option = {});
      if (type === "wms") {
        data = {
          id: option.id,
          class: "imageLayer",
          name: option.name,
          sourceType: "wms",
          checked: defaultValue(option.checked, true),
          urls: option.url,
          layer: option.layer,
          lon: option.lon,
          lat: option.lat,
          height: option.height,
          icon: "./static/img/yx.png",
        };
      } else if (type === "sgs-terrain") {
        data = {
          id: option.id,
          class: "terrainLayer",
          name: option.name,
          sourceType: "sgsterrain",
          checked: defaultValue(option.checked, true),
          urls: option.url,
          layer: option.layer,
        };
      } else if (type === "terrain") {
        data = {
          id: option.id,
          class: "terrainLayer",
          name: option.name,
          sourceType: "terrain",
          checked: defaultValue(option.checked, true),
          urls: option.url,
        };
      } else if (type === "3dtiles") {
        data = {
          id: option.id,
          class: "modelLayer",
          name: option.name,
          sourceType: "b3dm",
          maximumScreenSpaceError: 100,
          checked: defaultValue(option.checked, false),
          urls: option.url,
        };
      } else if (type === "wfs") {
        data = {
          id: option.id,
          class: option.class,
          name: option.name,
          sourceType: "wfs",
          checked: defaultValue(option.checked, false),
          urls: option.url,
          layer: option.layer,
          sgStyleJSON: "./static/shpstyle.json",
          minimumLevel: option.minimumLevel,
          maximumLevel: option.maximumLevel,
        };
      }
      return data;
    },

    setVisiable(treeNode, checked) {
      if (checked !== undefined) {
        treeNode.checked = checked;
      } else {
        treeNode.checked = !treeNode.checked;
      }
      if (treeNode.children) {
        treeNode.children.forEach((item) => {
          this.setVisiable(item, treeNode.checked);
        });
        return;
      } else if (treeNode._children) {
        if (treeNode.thisView === "ewzj") {
          treeNode._children[0].checked = treeNode.checked;
          if (treeNode._children[0].children) {
            treeNode._children[0].children.forEach((item) => {
              item.checked = treeNode.checked;
              this.addTreeData(item);
            });
          } else {
            this.addTreeData(treeNode._children[0]);
          }
        } else if (treeNode.thisView === "swzj") {
          for (let i = 1; i < treeNode._children.length; i++) {
            treeNode._children[i].checked = treeNode.checked;
          }
          treeNode._children.forEach((item, index) => {
            index !== 0 && this.addTreeData(item);
          });
        } else if (!treeNode.thisView) {
          treeNode._children.forEach((item, index) => {
            item.checked = treeNode.checked;
            if (item.children) {
              item.children.forEach((_item) => {
                _item.checked = item.checked;
                this.addTreeData(_item);
              });
            } else {
              this.addTreeData(item);
            }
          });
        }
        return;
      }

      if (!treeNode.isAdd) {
        this.addTreeData(treeNode);
        return;
      }

      let data = _getTreeData(treeNode.id);
      if (data) {
        data.item &&
          data.item.setVisibility &&
          data.item.setVisibility(treeNode.checked);
        data.item &&
          data.item.setVisible &&
          data.item.setVisible(treeNode.checked);
        data.item &&
          data.item.show !== undefined &&
          (data.item.show = treeNode.checked);
        if (data.datatype === "particle") {
          data.item.forEach((item) => {
            item.show = treeNode.checked;
          });
        }
      } else {
        if (
          treeNode.id &&
          treeNode.id.indexOf &&
          treeNode.id.indexOf("---") > -1
        ) {
          var ids = id.split("---");
          ids.forEach((item) => {
            sgworld.ProjectTree.setVisibility(item, treeNode.checked);
          });
        } else {
          sgworld.ProjectTree.setVisibility(treeNode.id, treeNode.checked);
        }
      }
    },
    props(data) {
      if (data.class === "imageLayer") {
        window.treeObj = {
          rightClickData: data,
        };
        layerOpen("影像", {
          width: 320,
          height: 310,
          url: "./static/html/layerProp.html",
          fn: {
            end: function () {},
          },
        });
      } else if (data._children) {
        if (data.thisView === "ewzj") {
          data.thisView = "swzj";
          data.name = "三维注记";
          data._children[0].checked = false;
          for (let i = 1; i < data._children.length; i++) {
            data._children[i].checked = data.checked;
          }
          data._children.forEach((item) => {
            if (item.children) {
              item.children.forEach((_item) => {
                _item.checked = item.checked;
                this.addTreeData(_item);
              });
            } else {
              this.addTreeData(item);
            }
          });
        } else if (data.thisView === "swzj") {
          data.thisView = "ewzj";
          data.name = "二维注记";
          data._children[0].checked = data.checked;
          for (let i = 1; i < data._children.length; i++) {
            data._children[i].checked = false;
          }
          data._children.forEach((item) => {
            if (item.children) {
              item.children.forEach((_item) => {
                _item.checked = item.checked;
                this.addTreeData(_item);
              });
            } else {
              this.addTreeData(item);
            }
          });
        }
      }
    },
    flyTo(treeNode) {
      //
      if (treeNode.children) return;
      if (treeNode._children && treeNode._children[0]) {
        this.flyTo(treeNode._children[0]);
        return;
      }
      this.rightshowzy.zymlmenu = false;
      if (treeNode && treeNode.flyTo) {
        if (treeNode && treeNode.flyTo.length === 3) {
          sgworld.Navigate.flyToPosition(
            treeNode.flyTo[0],
            treeNode.flyTo[1],
            treeNode.flyTo[2]
          );
        } else if (treeNode && treeNode.flyTo.length === 4) {
          sgworld.Navigate.flyToPointsInterest({
            destination: Cesium.Rectangle.fromDegrees(
              treeNode.flyTo[0],
              treeNode.flyTo[1],
              treeNode.flyTo[2],
              treeNode.flyTo[3]
            ),
          });
        } else {
          sgworld.Navigate.flyToPointsInterest({
            destination: Cesium.Cartesian3.fromDegrees(
              treeNode.flyTo[0],
              treeNode.flyTo[1],
              treeNode.flyTo[2]
            ),
            orientation: {
              heading: treeNode.flyTo[3],
              pitch: treeNode.flyTo[4],
              roll: treeNode.flyTo[5],
            },
          });
        }
        return;
      }
      let data = sgworld.ProjectTree.getObject(treeNode.id);
      data && data.item
        ? sgworld.Navigate.flyToObj(data.item)
        : sgworld.Navigate.flyToObj(data);
      if (data && data.datatype === "editEntity") {
        data && data.item && sgworld.Navigate.flyToObj(data.item[data.type]);
      }
    },
    renderContent(h, { node, data, store }) {
      if (!data.children && data.checked && !data.isAdd) {
        if (data._children) {
          if (data.thisView) {
            this.addTreeData(data._children[0]);
          } else {
            data._children.forEach((item) => {
              this.addTreeData(item);
            });
          }
        } else {
          this.addTreeData(data);
        }
      }
      if (data.checked) {
        data.eyeIcon = "./static/img/yj.png";
      } else {
        data.eyeIcon = "./static/img/yj-y.png";
      }
      if (data.icon) {
        return (
          // <span class="custom-tree-node" on-dblclick={() => this.flyTo(data)}>
          //   <span class="typeIcon">
          //     <img src={data.icon} />
          //   </span>
          //   <span class="treeName">{data.name}</span>
          //   <span class="customButton">
          //     <el-button size="mini" on-click={() => this.setVisiable(data)}>
          //       <img src={data.eyeIcon} />
          //     </el-button>
          //     <el-button size="mini" on-click={() => this.props(data)}>
          //       <img src="./static/img/006_07.png" />
          //     </el-button>
          //   </span>
          // </span>
          <span class="custom-tree-node" on-dblclick={() => this.flyTo(data)}>
            <span class="typeIcon">
              <img style="width:0.14rem;height:0.14rem" src={data.icon} />
            </span>
            <span class="treeName">{data.name}</span>
          </span>
        );
      } else {
        return (
          // <span class="custom-tree-node" on-dblclick={() => this.flyTo(data)}>
          //   <span class="typeNullIcon"></span>
          //   <span class="treeName">{data.name}</span>
          //   <span class="customButton">
          //     <el-button size="mini" on-click={() => this.setVisiable(data)}>
          //       <img src={data.eyeIcon} />
          //     </el-button>
          //     <el-button size="mini" on-click={() => this.heightLing(node, data)}>
          //       <img src="./static/img/006_07.png" />
          //     </el-button>
          //   </span>
          // </span>
          <span class="custom-tree-node" on-dblclick={() => this.flyTo(data)}>
            <span class="treeName">{data.name}</span>
          </span>
        );
      }
    },
    async addTreeData(treeNode) {
      let _data = sgworld.ProjectTree.getObject(treeNode.id);
      let pID = 0;

      if (_data) {
        sgworld.ProjectTree.setVisibility(treeNode.id, treeNode.checked);
        return;
      } else {
        _data = _getTreeData(treeNode.id);
        if (_data) {
          _data.item &&
            _data.item.setVisibility &&
            _data.item.setVisibility(treeNode.checked);
          _data.item &&
            _data.item.setVisible &&
            _data.item.setVisible(treeNode.checked);
          _data.item &&
            _data.item.show !== undefined &&
            (_data.item.show = treeNode.checked);
          if (_data.datatype === "particle") {
            _data.item.forEach((item) => {
              item.show = treeNode.checked;
            });
          }
          return;
        }
      }
      if (!treeNode.urls || treeNode.isAdd) return;
      treeNode.isAdd = true;

      let layer;
      treeNode.token &&
        treeNode.token === "SmartEarthToken" &&
        (treeNode.token = this.SmartEarthToken);
      switch (treeNode.sourceType) {
        case "local-map":
          //添加本地json地图
          layer = sgworld.Creator.createUrlTemplateImageryProvider(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls + "/{z}/{x}/{y}.png",
              enablePickFeatures: false,
              level: treeNode.Level,
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          break;
        case "kml":
          //添加kml
          layer = sgworld.Creator.addKmlLayer(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
            },
            treeNode.checked
          );
          break;
        case "google":
          //添加谷歌地图
          layer = sgworld.Creator.createUrlTemplateImageryProvider(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              enablePickFeatures: false,
              level: treeNode.Level,
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "arcgis":
          layer = sgworld.Creator.createArcGisImageryLayer(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              enablePickFeatures: false,
              level: treeNode.Level,
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "mapbox":
          Cesium.MapboxApi.defaultAccessToken =
            "pk.eyJ1IjoibWFyc2dpcyIsImEiOiJja2Fod2xlanIwNjJzMnhvMXBkMnNqcjVpIn0.WnxikCaN2KV_zn9tLZO77A";
          layer = sgworld.Creator.createImageryProvider(
            treeNode.name,
            "MapBox",
            {
              id: treeNode.id,
              name: treeNode.name,
              level: treeNode.Level,
              enablePickFeatures: false,
              mapId: treeNode.mapId,
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "tdmap":
          layer = sgworld.Creator.createWebMapTileServerImageLayer(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              level: treeNode.Level,
              style: treeNode.style,
              layer: treeNode.layer,
              format: treeNode.format,
              enablePickFeatures: false,
              tileMatrixSetID: "tiff",
              show: true,
              subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "txmap":
          layer = sgworld.Creator.createUrlTemplateImageryProvider(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              level: treeNode.Level,
              enablePickFeatures: false,
              customTags: {
                sx: function (imageryProvider, x, y, level) {
                  return x >> 4;
                },
                sy: function (imageryProvider, x, y, level) {
                  return ((1 << level) - y) >> 4;
                },
              },
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "gdmap":
          layer = sgworld.Creator.createUrlTemplateImageryProvider(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              enablePickFeatures: false,
              level: treeNode.Level,
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "bdmap":
          layer = sgworld.Creator.createImageryProvider(
            treeNode.name,
            "BaiduMap",
            {
              id: treeNode.id,
              level: treeNode.Level,
              enablePickFeatures: false,
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "cesiumblack":
          layer = sgworld.Creator.createImageryProvider(
            treeNode.name,
            "cesiumBlack",
            {
              id: treeNode.id,
              url: treeNode.urls,
              credit: "Black Marble imagery courtesy NASA Earth Observatory",
              flipXY: true,
              enablePickFeatures: false,
              level: treeNode.Level,
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "osm":
          layer = sgworld.Creator.createImageryProvider(
            treeNode.name,
            "OpenStreetMap",
            {
              id: treeNode.id,
              url: treeNode.urls,
              enablePickFeatures: false,
              level: treeNode.Level,
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "wmts":
          layer = sgworld.Creator.createWebMapTileServerImageLayer(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              level: treeNode.Level,
              style: treeNode.style,
              layer: treeNode.layer,
              enablePickFeatures: false,
              format: treeNode.format,
              show: true,
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "gis_wmts":
          layer = sgworld.Creator.createUrlTemplateImageryProvider(
            treeNode.name,
            {
              id: treeNode.id,
              url: Cesium.buildModuleUrl(
                treeNode.urls + "/{z}/{x}/{reverseY}.png"
              ),
              enablePickFeatures: false,
              level: treeNode.Level,
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "wmts_zj":
          //行列号差两倍
          var geotil = new Cesium.GeographicTilingScheme({
            rectangle: Cesium.Rectangle.MAX_VALUE,
          });
          if (treeNode.addLevel && treeNode.addLevel === 2) {
            geotil.positionToTileXY = function (position, level, result) {
              level > 0 && level++;
              var rectangle = this._rectangle;
              if (!Cesium.Rectangle.contains(rectangle, position)) {
                // outside the bounds of the tiling scheme
                return undefined;
              }

              var xTiles = this.getNumberOfXTilesAtLevel(level);
              var yTiles = this.getNumberOfYTilesAtLevel(level);

              var xTileWidth = rectangle.width / xTiles;
              var yTileHeight = rectangle.height / yTiles;

              var longitude = position.longitude;
              if (rectangle.east < rectangle.west) {
                longitude += Cesium.Math.TWO_PI;
              }

              var xTileCoordinate =
                ((longitude - rectangle.west) / xTileWidth) | 0;
              if (xTileCoordinate >= xTiles) {
                xTileCoordinate = xTiles - 1;
              }

              var yTileCoordinate =
                ((rectangle.north - position.latitude) / yTileHeight) | 0;
              if (yTileCoordinate >= yTiles) {
                yTileCoordinate = yTiles - 1;
              }

              if (!Cesium.defined(result)) {
                return new Cesium.Cartesian2(xTileCoordinate, yTileCoordinate);
              }

              result.x = xTileCoordinate;
              result.y = yTileCoordinate;
              return result;
            };
            geotil.tileXYToRectangle = function (x, y, level, result) {
              level > 0 && level++;
              var rectangle = this._rectangle;

              var xTiles = this.getNumberOfXTilesAtLevel(level);
              var yTiles = this.getNumberOfYTilesAtLevel(level);

              var xTileWidth = rectangle.width / xTiles;
              var west = x * xTileWidth + rectangle.west;
              var east = (x + 1) * xTileWidth + rectangle.west;

              var yTileHeight = rectangle.height / yTiles;
              var north = rectangle.north - y * yTileHeight;
              var south = rectangle.north - (y + 1) * yTileHeight;

              if (!Cesium.defined(result)) {
                result = new Cesium.Rectangle(west, south, east, north);
              }

              result.west = west;
              result.south = south;
              result.east = east;
              result.north = north;
              return result;
            };
          }

          layer = sgworld.Creator.createWebMapTileServerImageLayer(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              layer: treeNode.layer,
              level: treeNode.Level,
              style: "default",
              tileMatrixSetID: "esritilematirx",
              format: "image/png",
              tilingScheme: geotil,
              addLevel: treeNode.addLevel || 1, //层级加一
              enablePickFeatures: false,
              show: true,
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "wms":
          var parameters = {
            service: "WMS",
            format: "image/png",
            transparent: true,
          };
          if (treeNode.removeNullValue) {
            if (treeNode.nullvalue) {
              treeNode.nullvalue = treeNode.nullvalue.replace("rgb(", "");
              treeNode.nullvalue = treeNode.nullvalue.replace(")", "");
            }
            parameters.nullvalue = defaultValue(treeNode.nullvalue, "0,0,0");
            parameters.nulltolerance = defaultValue(treeNode.nulltolerance, 0);
          }
          treeNode.token && (treeNode.urls += "?token=" + treeNode.token);
          layer = sgworld.Creator.createImageryProvider(
            treeNode.name,
            "wms",
            {
              id: treeNode.id,
              url: treeNode.urls,
              layers: treeNode.layer,
              level: treeNode.Level,
              enablePickFeatures: false,
              parameters: parameters,
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          layer.item.alpha = defaultValue(treeNode.alpha, 1);
          treeNode.id = layer.treeobj.id;

          break;
        case "wmsc":
          var parameters = {
            service: "WMS",
            format: "image/png",
            transparent: true,
          };
          if (treeNode.removeNullValue) {
            if (treeNode.nullvalue) {
              treeNode.nullvalue = treeNode.nullvalue.replace("rgb(", "");
              treeNode.nullvalue = treeNode.nullvalue.replace(")", "");
            }
            parameters.nullvalue = defaultValue(treeNode.nullvalue, "0,0,0");
            parameters.nulltolerance = defaultValue(treeNode.nulltolerance, 0);
          }
          treeNode.token && (treeNode.urls += "?token=" + treeNode.token);
          layer = sgworld.Creator.createCacheImageryProvider(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              layers: treeNode.layer,
              level: treeNode.Level,
              enablePickFeatures: false,
              cacheUrl: treeNode.cacheUrl,
              cacheMaxLevel: 16,
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          layer.item.alpha = defaultValue(treeNode.alpha, 1);
          treeNode.id = layer.treeobj.id;
          break;
        case "wfs":
          var de = {};
          var color;
          if (treeNode.class === "pointLayer") {
            if (!treeNode.sgStyleJSON) {
              color = colorTool.colorRgb(
                defaultValue(treeNode.color, "#ffffff")
              );
              var bgColor = colorTool.colorRgb(
                defaultValue(treeNode.bgColor, "#010101")
              );
              if (treeNode.text) {
                de = {
                  label: {
                    text: {
                      defaultValue: defaultValue(treeNode.text, "标签"),
                    },
                    scaleMPP: {
                      defaultValue: "15000",
                    },
                    fillColor: {
                      defaultValue: {
                        red: color[0] / 255,
                        green: color[1] / 255,
                        blue: color[2] / 255,
                        alpha: 1,
                      },
                    },
                    scaleByDistance: {
                      near: 150,
                      nearValue: 1,
                      far: 800000,
                      farValue: 0.5,
                    },
                    minViewingHeight: {
                      defaultValue: "0",
                    },
                    font: {
                      defaultValue: "12",
                    },
                    family: {
                      defaultValue: defaultValue(treeNode.font, "Arial"),
                    },
                    backgroundColor: {
                      defaultValue: {
                        red: bgColor[0] / 255,
                        green: bgColor[1] / 255,
                        blue: bgColor[2] / 255,
                        alpha: 1,
                      },
                    },
                    scale: defaultValue(treeNode.scale, 2),
                    backgroundOpacity: {
                      defaultValue: treeNode.bgColor ? "0.5" : "0",
                    },
                    italic: {
                      defaultValue: treeNode.italic ? "1" : "0",
                    },
                    bold: {
                      defaultValue: treeNode.bold ? "1" : "0",
                    },
                    limitGrowth: {
                      defaultValue: "1",
                    },
                    textRelativeToImage: {
                      defaultValue: "0",
                    },
                    showText: {
                      defaultValue: "0",
                    },
                    textAlignment: {
                      defaultValue: "17",
                    },
                    pixelOffset: new Cesium.Cartesian2(
                      defaultValue(treeNode.offsetX, 0),
                      defaultValue(treeNode.offsetY, treeNode.image ? -10 : 0)
                    ),
                    outlineColor: Cesium.Color.fromCssColorString(
                      defaultValue(treeNode.outlineColor, "#ffffff")
                    ),
                    outlineWidth: defaultValue(treeNode.outlineWidth, 2),
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                  },
                  lineToGround: {
                    defaultValue: "0",
                  },
                  lineToGroundLength: {
                    defaultValue: "0",
                  },
                  lineToGroundColor: {
                    defaultValue: {
                      red: 1,
                      green: 1,
                      blue: 1,
                      alpha: 1,
                    },
                  },
                  altitudeMethod: 0,
                  altitudeOffset: {
                    defaultValue: "0",
                  },
                  clampToGround: defaultValue(treeNode.clampToGround, false),
                  //"pointHeight": 100
                };
              }
              if (treeNode.outlineColor) {
                de.label &&
                  (de.label.style = Cesium.LabelStyle.FILL_AND_OUTLINE);
              }
              if (treeNode.image) {
                de.billboard = {
                  image: treeNode.image,
                  scale: defaultValue(treeNode.imageScale, 1),
                  link: treeNode.link,
                };
              }
            } else {
              de = await getSGStyle(
                "point",
                treeNode.sgStyleJSON,
                treeNode.name
              );
            }
          } else if (treeNode.class === "polylineLayer") {
            if (!treeNode.sgStyleJSON) {
              color = colorTool.colorRgb(
                defaultValue(treeNode.color, "#ffff00")
              );
              de = {
                polyline: {
                  material: {
                    red: color[0] / 255,
                    green: color[1] / 255,
                    blue: color[2] / 255,
                    alpha: 1,
                  },
                  lineOpacity: defaultValue(treeNode.alpha, 1),
                  width: defaultValue(treeNode.width, 4),
                  clampToGround: defaultValue(treeNode.clampToGround, true),
                },
              };
            } else {
              de = await getSGStyle(
                "polyline",
                treeNode.sgStyleJSON,
                treeNode.name
              );
            }
          } else if (treeNode.class === "polygonLayer") {
            if (!treeNode.sgStyleJSON) {
              color = colorTool.colorRgb(
                defaultValue(treeNode.color, "#6bbeef")
              );
              de = {
                polygon: {
                  outlineColor: {
                    defaultValue: {
                      red: 1,
                      green: 1,
                      blue: 0,
                      alpha: 1,
                    },
                  },
                  outlineWidth: 1,
                  fill: {
                    defaultValue: defaultValue(treeNode.alpha, 1),
                  },
                  extrudedHeight: treeNode.extrudedHeight || 0,
                  clampToGround: !treeNode.extrudedHeight ? true : false,
                  outline: true,
                  material: {
                    defaultValue: {
                      red: color[0] / 255,
                      green: color[1] / 255,
                      blue: color[2] / 255,
                      alpha: defaultValue(treeNode.alpha, 1),
                    },
                  },
                  fromKml: true,
                },
                altitudeMethod: 2,
                altitudeOffset: {
                  defaultValue: "0",
                },
              };
            } else {
              de = await getSGStyle(
                "polygon",
                treeNode.sgStyleJSON,
                treeNode.name
              );
            }
          }
          if (!de && treeNode.sgStyleJSON) {
            console.log(treeNode.name + "获取样式失败！");
            return;
          }
          if (de.position_x) {
            treeNode.lon = de.position_x;
            treeNode.lat = de.position_y;
            treeNode.height = de.position_z;
          }
          layer = sgworld.CreateWfs(
            Viewer,
            defaultValue(treeNode.urls, de.urls),
            defaultValue(treeNode.layer, de.layer),
            {
              min: defaultValue(treeNode.minimumLevel, de.minimumLevel || 0),
              max: defaultValue(treeNode.maximumLevel, de.maximumLevel || 22),
            },
            de,
            defaultValue(treeNode.layer, de.layer),
            pID,
            treeNode.checked,
            undefined
          );
          break;
        case "gis_mvt":
          var geoOptions = {
            id: treeNode.id,
            url: treeNode.urls,
            layer: treeNode.layer,
            upperLevelLimit: treeNode.maximumLevel,
            lowerLevelLimit: treeNode.minimumLevel,
            minx: treeNode.minx,
            miny: treeNode.miny,
            maxx: treeNode.maxx,
            maxy: treeNode.maxy,
          };
          var data;
          if (treeNode.class === "pointLayer") {
            data = {
              level_min: defaultValue(treeNode.minimumLevel, 0),
              level_max: defaultValue(treeNode.maximumLevel, 22),
            };
            if (treeNode.text) {
              data.lable = {
                text: treeNode.text,
                font: " 20px sans-serif",
                pixelOffset: new Cesium.Cartesian2(
                  defaultValue(treeNode.offsetX, 40),
                  defaultValue(treeNode.offsetY, -20)
                ),
                fillColor: defaultValue(treeNode.color, "#ffff00"),
                scale: defaultValue(treeNode.scale, 1),
                near: defaultValue(treeNode.near, 0),
                far: defaultValue(treeNode.far, 99999999999999),
              };
            }
            if (treeNode.image) {
              data.billboard = {
                image: treeNode.image,
                scale: defaultValue(treeNode.scale, 1),
                near: defaultValue(treeNode.near, 0),
                far: defaultValue(treeNode.far, 99999999999999),
              };
            }
            layer = sgworld.Creator.PointVectorGeoJsonFeatureLayerGis(
              treeNode.name,
              geoOptions,
              data,
              pID,
              treeNode.checked,
              function () {}
            );
          } else if (treeNode.class === "polylineLayer") {
            data = {
              level_min: defaultValue(treeNode.minimumLevel, 0),
              level_max: defaultValue(treeNode.maximumLevel, 22),
              near: defaultValue(treeNode.near, 0),
              far: defaultValue(treeNode.far, 99999999999999),
              material: defaultValue(treeNode.color, "#ff0000"),
              width: defaultValue(treeNode.width, 2),
              classificationType: -1,
            };
            layer = sgworld.Creator.PolylineVectorGeoJsonFeatureLayerGis(
              treeNode.name,
              geoOptions,
              data,
              pID,
              treeNode.checked,
              function () {}
            );
          } else if (treeNode.class === "polygonLayer") {
            data = {
              effect: 0,
              extrudedHeightReference: 1,
              far: 9999999999999,
              fill: "rgba(255, 0, 0, 1)",
              ground: 1,
              height: 1,
              extrudedHeight: treeNode.extrudedHeight,
              layertype: "polygonbase",
              level_min: defaultValue(treeNode.minimumLevel, 0),
              level_max: defaultValue(treeNode.maximumLevel, 22),
              material: defaultValue(treeNode.color, "#ff0000"),
              near: 0,
              outline: false,
              outlineColor: "rgba(68,66,66,0.5)",
              outlineWidth: 1,
            };
            layer = sgworld.Creator.createGeoJsonFeatureLayerProviderGisOptimization(
              treeNode.name,
              geoOptions,
              data,
              pID,
              treeNode.checked,
              function () {}
            );
          }
          treeNode.id = layer.treeobj.id;
          break;
        case "geojson":
          var de = {};
          if (treeNode.class === "polylineVolume") {
            de = {
              id: treeNode.id,
              material: defaultValue(treeNode.color, "#ff0000"),
              slttype: "0",
              number: "4",
              exradius: "1",
              inradius: "1",
              orth_width: "2",
              orth_height: "2",
              radius: defaultValue(treeNode.radius, 5),
              cornerType: "0",
              heightReference: "0",
              height: defaultValue(treeNode.lineHeight, 0),
              near: "0",
              far: "99999999999",
              radiusScale: treeNode.radiusScale,
              connect: true,
            };
            layer = sgworld.Creator.createpolylineVolumeGeojsonPrimitiveLayer(
              treeNode.name,
              treeNode.urls,
              de,
              pID,
              treeNode.checked,
              function (data) {}
            );
          } else if (treeNode.class === "model") {
            de = {
              id: treeNode.id,
              collect: 0,
              uri: defaultValue(treeNode.model, ""),
              file: "",
              color: defaultValue(treeNode.color, "#ffffff"),
              scale: defaultValue(treeNode.scale, 1),
              heightReference: 0,
              height: defaultValue(treeNode.height, 0),
              near: "0",
              far: "99999999999",
            };
            layer = sgworld.Creator.createModelPointGeoJsonFeatureLayer(
              treeNode.name,
              treeNode.urls,
              de,
              pID,
              treeNode.checked,
              function (data) {}
            );
          } else if (treeNode.class === "polygon") {
            de = {
              id: treeNode.id,
              collect: 0,
              material: defaultValue(treeNode.color, "#ff0000"),
              heightReference: 1,
              height: defaultValue(treeNode.height, undefined),
              classificationType: "0",
              outline: defaultValue(treeNode.outline, false),
              outlineColor: defaultValue(treeNode.outlineColor, "#ffff00"),
              near: defaultValue(treeNode.near, 0),
              far: defaultValue(treeNode.far, 999999),
            };
            layer = sgworld.Creator.createPolygonGeoJsonFeatureLayer(
              treeNode.name,
              treeNode.urls,
              de,
              pID,
              treeNode.checked,
              function (data) {}
            );
          }
          layer && (treeNode.id = layer.treeobj.id);
          break;
        case "vector":
          var de = {};
          let urls = {
            url: treeNode.urls,
            layer: treeNode.layer,
            minx: treeNode.minx,
            miny: treeNode.miny,
            maxx: treeNode.maxx,
            maxy: treeNode.maxy,
            srs: treeNode.srs,
          };
          if (treeNode.class === "label" || treeNode.class === "image") {
            treeNode.disableDepthTestDistance === "Infinity" &&
              (treeNode.disableDepthTestDistance = Number.POSITIVE_INFINITY);
            de = {
              id: treeNode.id,
              level_min: defaultValue(treeNode.minimumLevel, 10),
              level_max: defaultValue(treeNode.maximumLevel, 22),
              fillColor: defaultValue(treeNode.color, "#ffffff"),
              color: defaultValue(treeNode.imageColor, undefined),
              outlineColor: defaultValue(treeNode.outlineColor, "#ffffff"),
              backgroundColor: defaultValue(
                treeNode.backgroundColor,
                "#ffffff"
              ),
              heightReference: defaultValue(treeNode.heightReference, 0),
              pointHeight: defaultValue(treeNode.pointHeight, undefined),
              near: defaultValue(treeNode.near, 0),
              far: defaultValue(treeNode.far, 1000000),
              showBackground: treeNode.showBackground,
              outlineWidth: defaultValue(treeNode.outlineWidth, 1),
              text: treeNode.text,
              image: treeNode.image,
              font_size: treeNode.size,
              font_family: defaultValue(treeNode.font_family, "微软雅黑"),
              disableDepthTestDistance: defaultValue(
                treeNode.disableDepthTestDistance,
                undefined
              ),
              labelData: treeNode.labelData,
              imageData: treeNode.imageData,
            };
            if (
              treeNode.text &&
              treeNode.image &&
              !treeNode.labelData &&
              !treeNode.imageData
            ) {
              de.labelData = {
                horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                pixelOffset: new Cesium.Cartesian2(20, 0),
              };
              de.imageData = {
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                pixelOffset: new Cesium.Cartesian2(0, 0),
              };
            }
            urls.upperLevelLimit = de.level_max;
            urls.lowerLevelLimit = de.level_min;
            layer = sgworld.Creator.createLabelImageGeoJsonFeatureLayerProvider(
              treeNode.name,
              urls,
              de,
              pID,
              treeNode.checked,
              function () {}
            );
          } else if (treeNode.class === "polylineVolume") {
            de = {
              id: treeNode.id,
              level_min: defaultValue(treeNode.minimumLevel, 10),
              level_max: defaultValue(treeNode.maximumLevel, 22),
              material: defaultValue(treeNode.color, "#ff0000"),
              slttype: "0",
              number: "4",
              exradius: "1",
              inradius: "1",
              orth_width: "2",
              orth_height: "2",
              radius: defaultValue(treeNode.radius, 0.5),
              cornerType: "0",
              heightReference: "0",
              height: defaultValue(treeNode.lineHeight, 0),
              near: "0",
              far: "99999999999",
              radiusScale: treeNode.radiusScale,
            };
            urls.upperLevelLimit = de.level_max;
            urls.lowerLevelLimit = de.level_min;
            layer = sgworld.Creator.createVolumeGeoJsonFeatureLayerProvider(
              treeNode.name,
              urls,
              de,
              pID,
              treeNode.checked,
              function () {}
            );
          } else if (treeNode.class === "polyline") {
            de = {
              id: treeNode.id,
              layertype: "polylinelayer",
              level_min: defaultValue(treeNode.minimumLevel, 10),
              level_max: defaultValue(treeNode.maximumLevel, 22),
              material: defaultValue(treeNode.color, "#ffffff"),
              height: defaultValue(treeNode.height, undefined),
              width: defaultValue(treeNode.width, 2),
              clampToGround: defaultValue(treeNode.clampToGround, true),
              near: defaultValue(treeNode.near, 0),
              far: defaultValue(treeNode.far, 1000000),
            };
            urls.upperLevelLimit = de.level_max;
            urls.lowerLevelLimit = de.level_min;

            layer = sgworld.Creator.createPrimitivePolylineVectorGeoJsonFeatureLayerProvider(
              treeNode.name,
              urls,
              de,
              pID,
              treeNode.checked,
              function () {}
            );
          } else if (treeNode.class === "polygon") {
            de = {
              id: treeNode.id,
              layertype: "polygonlayer",
              classificationType: 0,
              level_min: defaultValue(treeNode.minimumLevel, 10),
              level_max: defaultValue(treeNode.maximumLevel, 22),
              material: defaultValue(treeNode.color, "#ff0000"),
              fill: defaultValue(treeNode.color, "#ff0000"),
              heightReference: "1",
              height: defaultValue(treeNode.height, 0),
              extrudedHeight: defaultValue(treeNode.extrudedHeight, 0),
              extrudedHeightReference: "1",
              clampToGround: defaultValue(treeNode.clampToGround, false),
              near: "0",
              far: "99999999999",
            };
            urls.upperLevelLimit = de.level_max;
            urls.lowerLevelLimit = de.level_min;
            if (treeNode.extrudedHeight) {
              layer = sgworld.Creator.createGeoJsonFeatureLayerProviderOptimization(
                treeNode.name,
                urls,
                de,
                pID,
                treeNode.checked,
                function () {}
              );
            } else {
              layer = sgworld.Creator.VolumeVectorGeoJsonFeatureLayerOptimizationGroundtest(
                treeNode.name,
                urls,
                de,
                pID,
                treeNode.checked,
                function () {}
              );
            }
          } else if (treeNode.class === "model") {
            de = {
              id: treeNode.id,
              level_min: defaultValue(treeNode.minimumLevel, 10),
              level_max: defaultValue(treeNode.maximumLevel, 22),
              collect: 0,
              uri: defaultValue(treeNode.model, ""),
              file: "",
              color: defaultValue(treeNode.color, "#ffffff"),
              scale: defaultValue(treeNode.scale, 1),
              heightReference: 0,
              height: defaultValue(treeNode.height, 0),
              near: "0",
              far: "99999999999",
            };
            //模型点
            urls.upperLevelLimit = de.level_max;
            urls.lowerLevelLimit = de.level_min;
            layer = sgworld.Creator.createModelGeoJsonFeatureLayerProvider(
              treeNode.name,
              urls,
              de,
              pID,
              treeNode.checked,
              function () {}
            );
          }
          layer && (treeNode.id = layer.treeobj.id);
          break;
        case "terrain":
          layer = sgworld.Creator.createTerrain(
            treeNode.name,
            {
              id: treeNode.id,
              requestVertexNormals: true,
              url: treeNode.urls,
            },
            pID,
            true,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "sgsterrain":
          layer = sgworld.Creator.sfsterrainprovider(
            treeNode.name,
            {
              id: treeNode.id,
              layerName: treeNode.layer,
              requestVertexNormals: true,
              url: treeNode.urls,
              token: treeNode.token,
            },
            pID,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "arcgisterrain":
          layer = sgworld.Creator.createArcGISTerrain(
            treeNode.name,
            {
              id: treeNode.id,
              requestVertexNormals: true,
              url: treeNode.urls,
            },
            pID,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "b3dm":
          layer = sgworld.Creator.create3DTilesets(
            treeNode.name,
            treeNode.urls,
            {
              id: treeNode.id,
              Level: treeNode.Level,
              maximumScreenSpaceError: treeNode.maximumScreenSpaceError || 50,
              // preloadWhenHidden: true,
              cullRequestsWhileMoving: false,
              preferLeaves: true,
              skipLevels: 2,
            },
            {
              groundCenter: treeNode.Center,
              groundheight: treeNode.modelHeight,
              colors: treeNode.alpha
                ? "rgba(255,255,255," + treeNode.alpha + ")"
                : treeNode.color || undefined,
            },
            pID,
            treeNode.checked,
            function (data) {}
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "b3dm_copy":
          var positions = [];
          var index = 0;

          function addCopy_b3dm() {
            var data = {
              id: treeNode.id + index,
              class: "modelLayer",
              name: treeNode.name.replace("-1", "-" + (index + 2)),
              sourceType: "b3dm",
              Level: treeNode.Level,
              Center: positions[index],
              checked: false,
              urls: treeNode.urls,
              icon: treeNode.icon,
            };
            zTreeObj1.addNodes(treeNode.getParentNode(), data);
            if (++index < treeNode.copy_num) {
              addCopy_b3dm();
            }
          }
          layer = sgworld.Creator.create3DTilesets(
            treeNode.name,
            treeNode.urls,
            {
              id: treeNode.id,
              Level: treeNode.Level,
            },
            {},
            pID,
            treeNode.checked,
            function (data) {
              var cartographic = Cesium.Cartographic.fromCartesian(
                layer.item.boundingSphere.center
              );
              var degrees = {
                lon: Cesium.Math.toDegrees(cartographic.longitude),
                lat: Cesium.Math.toDegrees(cartographic.latitude),
                height: cartographic.height,
              };
              var position, num;
              var row = (col = parseInt(Math.sqrt(treeNode.copy_num)));
              num = treeNode.copy_num - row * col;
              for (var i = 0; i < row; i++) {
                for (var j = 0; j < col; j++) {
                  if (!i && !j) {
                    continue;
                  }
                  position = [
                    degrees.lon + j * treeNode.offset,
                    degrees.lat + i * treeNode.offset,
                    degrees.height,
                  ];
                  positions.push(position);
                }
              }
              //treeNode.flyTo = [degrees.lon, degrees.lat, position[0], position[1]];
              for (var i = 0; i < num; i++) {
                positions.push([
                  position[0] + treeNode.offset,
                  position[1] - i * treeNode.offset,
                  position[2],
                ]);
              }

              treeNode.name += "-1";
              treeNode.id = layer.treeobj.id;
              addCopy_b3dm();
            }
          );
          break;
        case "gltf":
          var position = [treeNode.lon, treeNode.lat, treeNode.height];
          layer = sgworld.Creator.createModel(
            position,
            treeNode.urls,
            {
              id: treeNode.id,
              scale: treeNode.scale || 1,
            },
            pID,
            treeNode.name,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
      }
      if (treeNode.sourceType !== "gltf" && (treeNode.lon || treeNode.lat)) {
        treeNode.flyTo = [
          treeNode.lon,
          treeNode.lat,
          defaultValue(treeNode.height, 10000),
        ];
      }
      if (treeNode.minx && treeNode.miny && treeNode.maxx && treeNode.maxy) {
        treeNode.flyTo = [
          treeNode.minx,
          treeNode.miny,
          treeNode.maxx,
          treeNode.maxy,
        ];
      }
      if (treeNode.sourceType === "wfs") {
        addTreeData(treeNode, layer);
      }
    },
  },
};
</script>

 src/components/rightNavigation/NavigationBar2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,273 @@
<template>
  <div class="navigationBar">
    <div class="menuBtn">
      <el-button class="right-menuBtn" @click="handleMenuListShow">
        <img src="@/assets/img/navigation/menuicon.png" />
      </el-button>
    </div>
    <div class="menuList" v-show="showMenuList.show">
      <ul>
        <li
          v-for="(value, key) in menuList"
          :key="value.id"
          @click="handleMenuClick(value.attr)"
          @tap="handleMenuClick(key)"
        >
          <div class="menuItem">
            <img
              :src="showState[value.attr].show ? value.imgActive : value.img"
              :class="showState[value.attr].show ? 'Active' : 'noActive'"
            />
            <span>{{ value.name }}</span>
          </div>
        </li>
        
      </ul>
    </div>
  </div>
</template>

<script>
import store from "@/utils/store2.js";
export default {
  name: "NavigationBar",
  data() {
    return {
      showMenuList: store.MenuList,
      resetShowState: store.resetLink,
      favoriteShowState: store.favorite,
      menuList: [
        {
          id: "0001tc",
          name: "图层",
          attr: "layer",
          img: require("@/assets/img/navigation/tuc.png"),
          imgActive: require("@/assets/img/navigation/tucA.png"),
        },
        // {
        //   id: "0002my",
        //   name: "漫游",
        //   attr: "roam",
        //   img: require("@/assets/img/navigation/my.png"),
        //   imgActive: require("@/assets/img/navigation/myA.png"),
        // },
        // {
        //     id: '0003tj',
        //     name: '统计',
        //     attr: 'statistics',
        //     img: require("@/assets/img/navigation/tj.png"),
        //     imgActive: require("@/assets/img/navigation/tjA.png"),
        // },
        {
          id: "0004sc",
          name: "位置",
          attr: "location",
          img: require("@/assets/img/navigation/sc.png"),
          imgActive: require("@/assets/img/navigation/scA.png"),
        },
        // {
        //     id: '0005sz',
        //     name: '设置',
        //     attr: 'setting',
        //     img: require("@/assets/img/navigation/setting.png"),
        //     imgActive: require("@/assets/img/navigation/settingA.png")
        // },
        // {
        //     id: '0006fw',
        //     name: '复位',
        //     img: require("@/assets/img/navigation/u53.png")
        // },
        // {
        //     id: '0006fw',
        //     name: '收藏',
        //     img: require("@/assets/img/navigation/u53.png")
        // },
      ],
      showState: {
        layer: store.layerPanel,
        roam: store.roamPanel,
        statistics: store.statisticsPanel,
        location: store.locationCollection,
        setting: store.settingPanel,
      },
    };
  },
  methods: {
    // ç‚¹å‡»å³ä¸Šè§’菜单按钮
    handleMenuListShow() {
      // æ¸…除定点绕飞
      // if (window.pointerFly) {
      //   window.pointerFly.end && window.pointerFly.end();
      //   window.pointerFly = null;
      // }
      //清除搜索点
      flyPoint && Viewer.entities.remove(flyPoint);
      flyPoint = undefined;
      this.showMenuList.show = !this.showMenuList.show;
      store.setMenuListShow(this.showMenuList.show);
    },

    // ç‚¹å‡»å³ä¸Šè§’菜单项
    handleMenuClick(attr) {
      debugger;
      console.log('点击右上角菜单项');
      //清除搜索点
      flyPoint && Viewer.entities.remove(flyPoint);
      flyPoint = undefined;
      switch (attr) {
        case "layer":
          if (store.layerPanel.show) {
            store.setLayerPanelShow(false);
          } else {
            store.setLayerPanelShow(true);
            //关闭漫游
            store.setRoamPanelShow(false);
            store.setStatisticsPanelShow(false);
            store.setLocationCollectionShow(false);
            store.setSettingPanelShow(false);
            store.setAddFavoriteShow(false);
          }
          break;
        case "roam":
          if (store.roamPanel.show) {
            store.setRoamPanelShow(false);
          } else {
            store.setRoamPanelShow(true);
            store.setLayerPanelShow(false);
            store.setStatisticsPanelShow(false);
            store.setLocationCollectionShow(false);
            store.setSettingPanelShow(false);
            store.setAddFavoriteShow(false);
          }
          break;
        case "statistics":
          if (store.statisticsPanel.show) {
            store.setStatisticsPanelShow(false);
          } else {
            store.setStatisticsPanelShow(true);
            store.setLayerPanelShow(false);
            store.setRoamPanelShow(false);
            store.setLocationCollectionShow(false);
            store.setSettingPanelShow(false);
            store.setAddFavoriteShow(false);
          }
          break;
        case "location":
          if (store.locationCollection.show) {
            store.setLocationCollectionShow(false);
          } else {
            store.setLocationCollectionShow(true);
            store.setLayerPanelShow(false);
            store.setRoamPanelShow(false);
            store.setStatisticsPanelShow(false);
            store.setSettingPanelShow(false);
            store.setAddFavoriteShow(false);
          }

          break;
        case "setting":
          if (store.settingPanel.show) {
            store.setSettingPanelShow(false);
          } else {
            store.setSettingPanelShow(true);
            store.setLayerPanelShow(false);
            store.setRoamPanelShow(false);
            store.setStatisticsPanelShow(false);
            store.setLocationCollectionShow(false);
            store.setAddFavoriteShow(false);
          }
          break;
        case 5:
          sgworld.Navigate.jumpTo({
            //跳转视角
            destination: new Cesium.Cartesian3.fromDegrees(
              116.508368,
              39.79346,
              769687
            ),
          });
          break;
        case 6:
          if (store.addFavorite.show) {
            store.setAddFavoriteShow(false);
          } else {
            store.setAddFavoriteShow(true);
            store.setLayerPanelShow(false);
            store.setRoamPanelShow(false);
            store.setStatisticsPanelShow(false);
            store.setLocationCollectionShow(false);
            store.setSettingPanelShow(false);
          }
          break;
      }
    },
  },
};
</script>

<style scoped>
.navigationBar {
  position: absolute;
  top: 0.55rem;
  right: 0.15rem;
  /* width: 64px; */
}
.menuBtn .el-button {
  padding: 0 !important;
  font-size: 0.24rem;
  border: unset;
  float: unset;
  display: block;
  background: rgba(18, 126, 255, 1);
}
.menuBtn img {
  width: 24px;
  margin: 3px;
}
/* .menuBtn {
  margin-left: 25px;
  width: 22px;
  height: 20px;
  background-image: url("~@/assets/img/navigation/menuicon.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
} */

.menuList {
  position: absolute;
  width: 40px;
  margin-top: 0.1rem;
  right: -0.05rem;
  background-color: white;
  border-radius: 10px;
}

.menuItem {
  width: 32px;
  color: black;
  margin: 0px auto;
  margin-top: 10px;
  margin-bottom: 7px;
  /* padding-bottom: 7px; */
  border-bottom: 1px solid #e8e8e9;
  text-align: center;
  cursor: pointer;
  /* border-bottom: 1px solid #e8e8e9; */
  /* pointer-events:none */
}

li:last-child .menuItem {
  border: none;
}

img {
  width: 24px;
  /* height: 24px; */
  text-align: center;
}

.menuItem span {
  display: block;
  text-align: center;
}
</style>

 src/components/sideMenu/layerMenu/layerPanel2.vue

@@ -33,30 +33,6 @@
        </div>
      </div>
    </div>
    <!-- <div class="areaType" style="margin-top: 10px">
      <div class="title">
        ä¸“题图层
        <span class="more" @click.stop="showLayerTree"
          >更多图层<i class="el-icon-arrow-right"></i
        ></span>
      </div>
      <div class="container">
        <div
          class="layerItem"
          :key="value1.id"
          v-for="(value1, index1) in areaTypeList"
          @click.stop="handleAreaClick(value1, index1)"
        >
          <img
            :src="value1.src"
            :class="{ active: curAreaTypeIndex == index1 }"
          />
          <span :class="{ spanActive: curAreaTypeIndex == index1 }">{{
            value1.name
          }}</span>
        </div>
      </div>
    </div> -->
    <div class="areaType" style="margin-top: 10px">
      <div class="title">
        ä¸“题应用
@@ -129,10 +105,16 @@
  clearLayerByTypeId,
  clearLayerByTypeIdArr,
} from "@/utils/map.js";
import _GLOBAL from "@/assets/GLOBAL";
import store from "@/utils/store.js";
import ZTTitem from "@/utils/ztt.js";
import _GLOBAL from "@/assets/GLOBAL2";
import store from "@/utils/store2.js";
import ZTTitem from "@/utils/ztt2.js";
import { layers } from "../../../../static/json/layer.js";

import Tile from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { get as getProjection, getTransform } from "ol/proj";
import { createXYZ } from "ol/tilegrid";

export default {
  name: "LayerPanel",
  data() {
@@ -153,22 +135,7 @@
          src: require("@/assets/img/layer/yxdt.png"),
        },
      ],
      sMapModelList: [
        // {
        //   id: "3Dcs",
        //   name: "3D城市",
        //   active: false,
        //   type: "san",
        //   src: require("@/assets/img/layer/3Dcs.png"),
        // },
        // {
        //   id: "swmx",
        //   name: "三维模型",
        //   active: false,
        //   type: "san",
        //   src: require("@/assets/img/layer/swmx.png"),
        // },
      ],
      sMapModelList: [],
      areaTypeList: [
        {
          id: "规划范围",
@@ -225,7 +192,7 @@
      ],
      zhuantiList: ZTTitem,
      //curMapModelIndex: 1,
      curEMapModelIndex: 0,
      curEMapModelIndex: 1,
      curSMapModelIndex: -1,
      curAreaTypeIndex: -1,
      curYjIndex: -1,
@@ -286,31 +253,13 @@
    },
    // äºŒç»´åº•å›¾é€‰æ‹©
    handleEMapClick(result, index) {
      let p = sgworld.Navigate.getCameraInfo();
      let pitch;
      if (pitch !== -90) {
        pitch = -90;
        sgworld.Navigate.flyToPointsInterest({
          destination: new Cesium.Cartesian3.fromDegrees(
            p.location.lon,
            p.location.lat,
            p.location.height
          ),
          orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(pitch),
            roll: Cesium.Math.toRadians(0),
          },
        });
      }

      // è®¾ç½®ç›¸æœº
      if (result.name == "二维地图") {
        window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
        this.changeLayerView(25000, false);
        window.map.getLayerByName("二维地图").setVisible(true);
        window.map.getLayerByName("影像地图").setVisible(false);
      } else if (result.name == "影像地图") {
        window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
        this.changeLayerView(50000, false);
        window.map.getLayerByName("影像地图").setVisible(true);
        window.map.getLayerByName("二维地图").setVisible(false);
      }
      // åˆ‡æ¢å›¾å±‚
      const val = layers.filter((res) => {
@@ -435,6 +384,7 @@
    },
    // ç¬¬äºŒè¡Œ ä¸“题图 ç‚¹å‡»
    handleZTlick(result, index) {
      console.log(result, index);
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
@@ -443,38 +393,11 @@
      const children = val[0].children;
      if (this.curZTIndex == index) {
        this.curZTIndex = -1;
        //   let _data = sgworld.ProjectTree.getObject(children[0].id);
        //   if (_data) {
        //     sgworld.ProjectTree.setVisibility(children[0].id, false);
        //   }

        store.setThematicLayerItemId("");
      } else {
        this.curZTIndex = index;
        store.setThematicLayerItemId(children);

        //   //清除
        //   // let arr = [
        //   //   "GuiHuaFanWeiShiYiTu",
        //   //   "XingZhengQuHuaTu",
        //   //   "GuiHuaDanYuanHuaFenTu",
        //   //   "ZhuYaoGongNengQuGuiHuaShiYiTu",
        //   // ];
        //   // arr.forEach((item) => {
        //   //   sgworld.ProjectTree.getObject(item) &&
        //   //     sgworld.ProjectTree.setVisibility(item, false);
        //   // });
        //   let dataObj = sgworld.ProjectTree.getObject(result.id);
        //   if (dataObj) {
        //     sgworld.ProjectTree.setVisibility(result.id, true);
        //   } else {
        //     _GLOBAL.layers[result.id] = [];
        //     children.forEach((item) => {
        //       let itemLayer = loadLayer(item);
        //       _GLOBAL.layers[result.id].push(itemLayer);
        //       console.log(_GLOBAL.layers[result.id]);
        //     });
        //   }
        //   // store.setThematicLayerItemId(result.id);
      }
    },
    // ç¬¬ä¸‰è¡Œ ä¸“题功能 ç‚¹å‡»
@@ -505,29 +428,79 @@
        switch (index) {
          case 0:
            store.setSliderShow(true);
            window.tdglLayer = sgworld.Creator.createImageryProvider(
              layers[8].name,
              "tms",
              {
                id: layers[8].children[0].id,
                url: layers[8].children[0].urls,
                fileExtension: layers[8].children[0].img || "png",
                enablePickFeatures: false,
                level: layers[8].children[0].Level,
                minimumLevel: layers[8].children[0].minimumLevel,
                maximumLevel: layers[8].children[0].maximumLevel,
                tilingScheme:
                  layers[8].children[0].tileType === "Geo"
                    ? new Cesium.GeographicTilingScheme()
                    : new Cesium.WebMercatorTilingScheme(),
                // alpha: layers[8].children[0].alpha,
                alpha: this.alpha,
              },
              "0",
              layers[8].children[0].zIndex,
              true,
              ""
            // window.tdglLayer = sgworld.Creator.createImageryProvider(
            //   layers[8].name,
            //   "tms",
            //   {
            //     id: layers[8].children[0].id,
            //     url: layers[8].children[0].urls,
            //     fileExtension: layers[8].children[0].img || "png",
            //     enablePickFeatures: false,
            //     level: layers[8].children[0].Level,
            //     minimumLevel: layers[8].children[0].minimumLevel,
            //     maximumLevel: layers[8].children[0].maximumLevel,
            //     tilingScheme:
            //       layers[8].children[0].tileType === "Geo"
            //         ? new Cesium.GeographicTilingScheme()
            //         : new Cesium.WebMercatorTilingScheme(),
            //     // alpha: layers[8].children[0].alpha,
            //     alpha: this.alpha,
            //   },
            //   "0",
            //   layers[8].children[0].zIndex,
            //   true,
            //   ""
            // );

            // console.log("gisserver-tms");
            // var url = layers[8].children[0].urls;
            // var projection = getProjection("EPSG:4326");
            // var tileGrid = createXYZ({
            //   extent: projection.getExtent(),
            // });
            // var source = new XYZ({
            //   projection: projection,
            //   tileGrid: tileGrid,
            //   tileUrlFunction: function (tileCoord, pixelRatio, proj) {
            //     return (
            //       url +
            //       (tileCoord[0] - 1) +
            //       "/" +
            //       tileCoord[1] +
            //       "/" +
            //       (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) +
            //       ".jpeg"
            //     );
            //   },
            // });
            // window.tdglLayer = new Tile({
            //   source: source,
            // });
            // window.map.addLayer(window.tdglLayer);

            var url =
              "https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/";
            var projection = getProjection("EPSG:4326");
            var tmslayer = new Tile({
              source: new XYZ({
                projection: projection,
                tileGrid: createXYZ({
                  extent: projection.getExtent(),
                }),
                tileUrlFunction: function (tileCoord, pixelRatio, proj) {
                  return (
                    url +
                    (tileCoord[0] - 1) +
                    "/" +
                    tileCoord[1] +
                    "/" +
                    (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) +
                    ".jpeg"
            );
                },
              }),
            });
            window.map.addLayer(tmslayer);
            //显示滑动条
            store.setTdglFlag(true);
            break;

 src/components/sideMenu/layerMenu/main2.vue

@@ -5,7 +5,7 @@
</template>

<script>
import store from "@/utils/store.js";
import store from "@/utils/store2.js";
import layerPanel from "./layerPanel2.vue";
export default {
  components: {

 src/components/sideMenu/layerTreePanel/layerTreePanel.vue

@@ -410,6 +410,7 @@
      }
    },
    async addTreeData(treeNode) {
      console.log('treeNode start',treeNode);
      // if (treeNode.disabled) return;
      let _data = sgworld.ProjectTree.getObject(treeNode.id);
      let pID = 0;
@@ -1863,6 +1864,7 @@
      if (treeNode.baseLayer) {
        layer.item.baseLayer = true;
      }
      console.log('treeNode end',treeNode);
    },

    initCluster(treeNode) {

 src/components/sideMenu/layerTreePanel/layerTreePanel2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,2683 @@
<template>
  <div class="layerTreePanel">
    <div class="menutop">
      <div class="menuback" @click="back">
        <i class="el-icon-arrow-left"></i><span>返回</span>
      </div>
      <div class="menutitle">更多图层</div>
    </div>
    <div class="layerTreeContainer">
      <div class="title">专题图层列表</div>
      <div class="treeContainer">
        <el-tree
          :data="treeData"
          node-key="id"
          ref="tree"
          :default-checked-keys="arr"
          show-checkbox
          :render-content="renderContent"
          :default-expanded-keys="defaultExpanded"
          :props="defaultProps"
          :default-expand-all="true"
          @check="check"
        >
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script>
let projectTreeData = [];
let clusterItemList = [];
//添加工程树数据
function addTreeData(data, layer) {
  var d = {};
  for (var key in data) {
    d[key] = data[key];
  }
  d.item = layer;
  projectTreeData.push(d);
}
//通过id获取指定元素
function _getTreeData(id) {
  for (var i = 0; i < projectTreeData.length; i++) {
    if (
      projectTreeData[i].id === id ||
      (projectTreeData[i].datatype === "entity" &&
        projectTreeData[i].item &&
        projectTreeData[i].item.entity &&
        projectTreeData[i].item.entity.id === id) ||
      (projectTreeData[i].datatype === "editEntity" &&
        projectTreeData[i].item &&
        projectTreeData[i].item[projectTreeData[i].type] &&
        projectTreeData[i].item[projectTreeData[i].type].id === id)
    ) {
      return projectTreeData[i];
    }
  }
}
function generatePosition(num) {
  let list = [];
  for (let i = 0; i < num; i++) {
    let lon = 116.52217697339846 + Math.random() * 0.4;
    let lat = 39.75979421847914 + Math.random() * 0.3;
    list.push(new SmartEarth.Degrees(lon, lat));
  }
  return list;
}

import store from "@/utils/store2.js";
import axios from "axios";
import Vector from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import Cluster from "ol/source/Cluster";
import Style from "ol/style/Style";
import Circle from "ol/style/Circle";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
import Text from "ol/style/Text";
import Icon from "ol/style/Icon";
import VectorLayer from "ol/layer/Vector";

import ImageWMS from "ol/source/ImageWMS";
import Image from "ol/layer/Image";

export default {
  name: "LayerTreePanel",
  data() {
    return {
      alldisabled: [],
      arr: [],
      treeData: [],
      defaultExpanded: [],
      defaultCheck: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      state: store.thematicLayer,
    };
  },
  mounted() {
    axios.get("./static/json/layers.json").then(
      (res) => {
        console.log("layers.json", res);
        //获取默认选中数据的id
        this.parseJson(res.data.children);

        //场景配置
        this.treeData = res.data && res.data.children;
        this.setDefaultCheck(res.data);
        setTimeout(() => {
          let selectedLayers = this.$refs.tree.getCheckedNodes();

          let filterSelectLayers = selectedLayers;
          let filist = filterSelectLayers.filter((p) => {
            return !p.children;
          });
          let legendlist = [];
          for (var i = 0; i < filist.length; i++) {
            var getkeyList = keys[filist[i].id];
            if (getkeyList && getkeyList.list && getkeyList.list.length > 0) {
              for (var j = 0; j < getkeyList.list.length; j++) {
                legendlist.push(getkeyList.list[j]);
              }
            }
          }
          //store.setPoplayerListAction(legendlist);
        }, 1000);
      },
      (error) => {
        console.log("获取场景配置失败！" + error);
      }
    );
  },
  methods: {
    // é€’归遍历json，得到checked:true的数据的id，添加到arr中
    parseJson(jsonObj) {
      // å£°æ˜Žå˜é‡count，记录disabled存在的节点的全部数据
      var count = 0;
      for (var v in jsonObj) {
        var element = jsonObj[v];
        if (element.expanded) {
          this.defaultExpanded.push(element.id);
        }
        if (element.children == undefined || element.children.length == 0) {
          if (element._children == undefined || element._children.length == 0) {
            if (element.checked) {
              this.arr.push(element.id);
            }
            if (element.urls == undefined || element.urls == "") {
              element.disabled = true;
              count++;
            }
          } else {
            this.parseJson(element._children);
          }
        } else {
          this.parseJson(element.children);
        }
      }
      if (count !== 0) {
        // æ·»åŠ å«æœ‰disabled属性的节点数组，
        this.alldisabled.push(jsonObj);
      }
    },

    async setDefaultCheck(node) {
      this.ergodicNode(node);
      this.$refs.tree.setCheckedKeys(this.defaultCheck);
      // setTimeout(()=>{
      //   this.$refs.tree.setCheckedKeys(['tc3857']);
      // },1000)
    },

    ergodicNode(node) {
      if (node.expanded) {
        this.defaultExpanded.push(node.id);
      }
      if (node.checked && !node.children) {
        this.defaultCheck.push(node.id);
        if (!node.isAdd) {
          if (node._children) {
            if (node.thisView) {
              if (node._children[0].children) {
                node._children[0].children.forEach((item) => {
                  this.addTreeData(item);
                });
              } else {
                this.addTreeData(node._children[0]);
              }
            } else {
              node._children.forEach((item) => {
                this.addTreeData(item);
              });
            }
          } else {
            this.addTreeData(node);
          }
        }
      }
      if (node.children && node.children.length) {
        node.children.forEach((item) => {
          this.ergodicNode(item);
        });
      }
    },

    check(treeNode, data) {
      let idsOnlyArr = [
        "GuiHuaFanWeiShiYiTu",
        "XingZhengQuHuaTu",
        "GuiHuaDanYuanHuaFenTu",
        "ZhuYaoGongNengQuGuiHuaShiYiTu",
      ];
      if (idsOnlyArr.includes(treeNode.id)) {
        // èŽ·å–之前选中的node
        let otherItem = idsOnlyArr
          .filter((item) => {
            return item != treeNode.id;
          })
          .filter((item) => data.checkedKeys.includes(item));
        if (otherItem.length > 0) {
          let item = this.$refs.tree.getNode(otherItem[0]).data;
          // ç§»é™¤ä¹‹å‰é€‰ä¸­çš„
          this.setVisiable(item, false);
          this.$refs.tree.setChecked(item.id, false, false);
        }
        // debugger;
        let checkFlag = data.checkedKeys.indexOf(treeNode.id) > -1;
        store.setThematicLayerItemId(checkFlag ? treeNode.id : "");
      }
      // æ‰“勾选中
      let isCheck = data.checkedKeys.indexOf(treeNode.id) > -1;
      this.setVisiable(treeNode, isCheck);
    },

    setVisiable(treeNode, checked) {
      if (checked !== undefined) {
        treeNode.checked = checked;
      } else {
        treeNode.checked = !treeNode.checked;
      }
      if (treeNode.children) {
        treeNode.children.forEach((item) => {
          this.setVisiable(item, treeNode.checked);
        });
        return;
      } else if (treeNode._children) {
        if (treeNode.thisView === "ewzj") {
          treeNode._children[0].checked = treeNode.checked;
          if (treeNode._children[0].children) {
            treeNode._children[0].children.forEach((item) => {
              item.checked = treeNode.checked;
              this.addTreeData(item);
            });
          } else {
            this.addTreeData(treeNode._children[0]);
          }
        } else if (treeNode.thisView === "swzj") {
          for (let i = 1; i < treeNode._children.length; i++) {
            treeNode._children[i].checked = treeNode.checked;
          }
          treeNode._children.forEach((item, index) => {
            index !== 0 && this.addTreeData(item);
          });
        } else if (!treeNode.thisView) {
          treeNode._children.forEach((item, index) => {
            item.checked = treeNode.checked;
            if (item.children) {
              item.children.forEach((_item) => {
                _item.checked = item.checked;
                this.addTreeData(_item);
              });
            } else {
              this.addTreeData(item);
            }
          });
        }
        return;
      }

      if (!treeNode.isAdd) {
        this.addTreeData(treeNode);
        return;
      }

      let data = _getTreeData(treeNode.id);
      if (data) {
        data.item &&
          data.item.setVisibility &&
          data.item.setVisibility(treeNode.checked);
        data.item &&
          data.item.setVisible &&
          data.item.setVisible(treeNode.checked);
        data.item &&
          data.item.show !== undefined &&
          (data.item.show = treeNode.checked);
        if (data.datatype === "particle") {
          data.item.forEach((item) => {
            item.show = treeNode.checked;
          });
        }
      } else {
        if (
          treeNode.id &&
          treeNode.id.indexOf &&
          treeNode.id.indexOf("---") > -1
        ) {
          var ids = id.split("---");
          ids.forEach((item) => {
            sgworld.ProjectTree.setVisibility(item, treeNode.checked);
          });
        } else {
          sgworld.ProjectTree.setVisibility(treeNode.id, treeNode.checked);
          var dd = Viewer.dataSources._dataSources.filter((item) => {
            return item.name == treeNode.id;
          });
          if (dd && dd.length > 0) {
            dd[0].show = treeNode.checked;
          }
          //判断勾选的是否为聚合
          var jhdd = clusterItemList.filter((item) => {
            return item.name == treeNode.id;
          });
          if (jhdd && jhdd.length > 0) {
            jhdd[0].dataSource.show = treeNode.checked;
          }
        }
      }
    },

    flyTo(treeNode) {
      if (treeNode.children) return;
      if (treeNode._children && treeNode._children[0]) {
        this.flyTo(treeNode._children[0]);
        return;
      }
      if (treeNode && treeNode.flyTo) {
        if (treeNode && treeNode.flyTo.length === 3) {
          sgworld.Navigate.flyToPosition(
            treeNode.flyTo[0],
            treeNode.flyTo[1],
            treeNode.flyTo[2]
          );
        } else if (treeNode && treeNode.flyTo.length === 4) {
          sgworld.Navigate.flyToPointsInterest({
            destination: Cesium.Rectangle.fromDegrees(
              treeNode.flyTo[0],
              treeNode.flyTo[1],
              treeNode.flyTo[2],
              treeNode.flyTo[3]
            ),
          });
        } else {
          sgworld.Navigate.flyToPointsInterest({
            destination: Cesium.Cartesian3.fromDegrees(
              treeNode.flyTo[0],
              treeNode.flyTo[1],
              treeNode.flyTo[2]
            ),
            orientation: {
              heading: treeNode.flyTo[3],
              pitch: treeNode.flyTo[4],
              roll: treeNode.flyTo[5],
            },
          });
        }
        return;
      }
      let data = sgworld.ProjectTree.getObject(treeNode.id);
      data && data.item
        ? sgworld.Navigate.flyToObj(data.item)
        : sgworld.Navigate.flyToObj(data);
      if (data && data.datatype === "editEntity") {
        data && data.item && sgworld.Navigate.flyToObj(data.item[data.type]);
      }
    },

    renderContent(h, { node, data, store }) {
      if (data.icon) {
        return (
          <span class="TreeNodeClass" on-dblclick={() => this.flyTo(data)}>
            <span class="typeIcon">
              <img src={data.icon} />
            </span>
            <span class="treeName" style="font-size:16px">
              {data.name}
            </span>
          </span>
        );
      } else if (data.disabled) {
        return (
          <span
            class="TreeNodeClass custom_hide"
            on-dblclick={() => this.flyTo(data)}
          >
            <span class="treeName" style="font-size:16px">
              {data.name}
            </span>
            <i
              slot="reference"
              class="el-icon-info"
              style="font-size:16px;margin-right:16px"
              on-click={() => this.showLayerInfo(data)}
            ></i>
          </span>
        );
      } else {
        if (data.children) {
          return (
            <span class="TreeNodeClass" on-dblclick={() => this.flyTo(data)}>
              <span class="treeName" style="font-size:16px">
                {data.name}
              </span>
            </span>
          );
        } else {
          return (
            <span
              class="TreeNodeClass"
              style="flex: 1;display: flex;align-items: center;justify-content: space-between;"
              on-dblclick={() => this.flyTo(data)}
            >
              <span class="treeName" style="font-size:16px">
                {data.name}
              </span>
            </span>
          );
        }
      }
    },

    async addTreeData(treeNode) {
      switch (treeNode.sourceType) {
        case "tms":
          layer = sgworld.Creator.createImageryProvider(
            treeNode.name,
            "tms",
            {
              id: treeNode.id,
              url: treeNode.urls,
              fileExtension: treeNode.img || "png",
              enablePickFeatures: false,
              alpha: treeNode.alpha,
            },
            "0",
            undefined,
            true,
            ""
          );

          break;
        case "local-map":
          // æ·»åŠ æœ¬åœ°åœ°å›¾
          if (treeNode.tms) {
            layer = sgworld.Creator.createImageryProvider(
              treeNode.name,
              "tms",
              {
                id: treeNode.id,
                url: treeNode.urls,
                fileExtension: treeNode.img || "png",
                enablePickFeatures: false,
                level: treeNode.Level,
                minimumLevel: treeNode.minimumLevel,
                maximumLevel: treeNode.maximumLevel,
                tilingScheme:
                  treeNode.tileType === "Geo"
                    ? new Cesium.GeographicTilingScheme()
                    : new Cesium.WebMercatorTilingScheme(),
                alpha: treeNode.alpha,
              },
              "0",
              treeNode.zIndex,
              true,
              ""
            );
          } else {
            layer = sgworld.Creator.createUrlTemplateImageryProvider(
              treeNode.name,
              {
                id: treeNode.id,
                url: `${treeNode.urls}/${treeNode.tile || "{z}/{x}/{y}"}.${
                  treeNode.img || "png"
                }`,
                enablePickFeatures: false,
                level: treeNode.Level,
                minimumLevel: treeNode.minimumLevel,
                maximumLevel: treeNode.maximumLevel,
                tilingScheme:
                  treeNode.tileType === "Geo"
                    ? new Cesium.GeographicTilingScheme()
                    : new Cesium.WebMercatorTilingScheme(),
                alpha: treeNode.alpha,
              },
              "0",
              treeNode.zIndex,
              true,
              ""
            );
          }
          break;
        case "kml":
          // æ·»åŠ kml数据
          layer = sgworld.Creator.addKmlLayer(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
            },
            true
          );
          break;
        case "google":
          // æ·»åŠ è°·æ­Œåœ°å›¾
          layer = sgworld.Creator.createUrlTemplateImageryProvider(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              enablePickFeatures: false,
              level: treeNode.Level,
              minimumLevel: treeNode.minimumLevel,
              maximumLevel: treeNode.maximumLevel,
              alpha: treeNode.alpha,
              tilingScheme: sgworld.Core.getOffsetTilingScheme(),
            },
            "0",
            treeNode.zIndex,
            true,
            ""
          );
          break;
        case "arcgis":
          // arcgis地图
          layer = sgworld.Creator.createArcGisImageryLayer(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              enablePickFeatures: false,
              level: treeNode.Level,
              usePreCachedTilesIfAvailable: treeNode.GCJ02 ? false : true, // æ˜¯å¦ä½¿ç”¨æœåŠ¡çš„内置的切片方案，偏移纠正需要使用如下自定义的方案
              tilingScheme: treeNode.GCJ02
                ? sgworld.Core.getOffsetTilingScheme()
                : undefined, // åç§»çº æ­£
              minimumLevel: treeNode.minimumLevel,
              maximumLevel: treeNode.maximumLevel,
              alpha: treeNode.alpha,
            },
            "0",
            treeNode.zIndex,
            true,
            ""
          );
          break;
        case "mapbox":
          // mapbox地图
          layer = sgworld.Creator.createImageryProvider(
            treeNode.name,
            "MapBox",
            {
              id: treeNode.id,
              name: treeNode.name,
              level: treeNode.Level,
              enablePickFeatures: false,
              mapId: treeNode.mapId,
              minimumLevel: treeNode.minimumLevel,
              maximumLevel: treeNode.maximumLevel,
              alpha: treeNode.alpha,
              accessToken:
                treeNode.token ||
                "pk.eyJ1IjoibWFyc2dpcyIsImEiOiJja2Fod2xlanIwNjJzMnhvMXBkMnNqcjVpIn0.WnxikCaN2KV_zn9tLZO77A",
            },
            "0",
            treeNode.zIndex,
            true,
            ""
          );
          break;
        case "tdmap":
          // å¤©åœ°å›¾
          layer = sgworld.Creator.createWebMapTileServerImageLayer(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              level: treeNode.Level,
              minimumLevel: treeNode.minimumLevel,
              maximumLevel: 18,
              style: treeNode.style,
              layer: treeNode.layer,
              format: treeNode.format,
              enablePickFeatures: false,
              tileMatrixSetID: "tiff",
              show: true,
              subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
              alpha: treeNode.alpha,
            },
            "0",
            treeNode.zIndex,
            true,
            ""
          );
          break;
        case "yzsate":
          layer = sgworld.Creator.createWebMapTileServerImageLayer(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              layer: treeNode.layer,
              enablePickFeatures: false,
              show: true,
              tileMatrixSetID: treeNode.ttileMatrixSetId
                ? treeNode.ttileMatrixSetId
                : "Sate_2019",
              tilingScheme: new Cesium.WebMercatorTilingScheme({
                rectangleSouthwestInMeters: new Cesium.Cartesian2(0, -229396.5),
                rectangleNortheastInMeters: new Cesium.Cartesian2(
                  917580,
                  688193.5
                ),
                //rectangleSouthwestInMeters:new Cesium.Cartesian2(0,0) ,
                // rectangleNortheastInMeters:new Cesium.Cartesian2(20037508.3427892, 20037508.3427892),
                numberOfLevelZeroTilesX: 4,
                numberOfLevelZeroTilesY: 4,
                projection: new Cesium.GeographicProjection(),
              }),
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "yzmap":
          layer = sgworld.Creator.createWebMapTileServerImageLayer(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              layer: treeNode.layer,
              enablePickFeatures: false,
              show: true,
            },
            pID,
            undefined,
            treeNode.checked,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
        case "cluster":
          layer = this.initCluster(treeNode);
          break;
        case "ldgcluster":
          layer = this.initLdgCluster(treeNode);
          break;
        case "qiyeinfo":
          layer = this.qiyeCluster(treeNode);
          // layer = this.testSDKcluster(treeNode);
          break;
        case "yztile":
          layer = new YZWMS(treeNode);
          sgworld._Viewer.imageryLayers.addImageryProvider(layer);
          break;
        case "tdt_label":
          // å¤©åœ°å›¾ä¸‰ç»´æ³¨è®°
          layer = sgworld.Creator.GeoWTFS({
            token: treeNode.token || "c53eb074c3fcba5ac86103d4d711bbe8",
            url: treeNode.urls,
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
          });
          break;
        case "txmap":
          // è…¾è®¯åœ°å›¾
          layer = sgworld.Creator.createUrlTemplateImageryProvider(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              level: treeNode.Level,
              enablePickFeatures: false,
              minimumLevel: treeNode.minimumLevel,
              maximumLevel: 18,
              alpha: treeNode.alpha,
              tilingScheme: sgworld.Core.getOffsetTilingScheme(), // åç§»çº æ­£
              customTags: {
                sx: (_imageryProvider, x) => {
                  return x >> 4;
                },
                sy: (_imageryProvider, _x, y, level) => {
                  return ((1 << level) - y) >> 4;
                },
              },
            },
            "0",
            treeNode.zIndex,
            true,
            ""
          );
          break;
        case "gdmap":
          // é«˜å¾·åœ°å›¾
          layer = sgworld.Creator.createUrlTemplateImageryProvider(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              enablePickFeatures: false,
              level: treeNode.Level,
              minimumLevel: treeNode.minimumLevel,
              maximumLevel: 18,
              tilingScheme: sgworld.Core.getOffsetTilingScheme(), // åç§»çº æ­£
              alpha: treeNode.alpha,
            },
            "0",
            treeNode.zIndex,
            true,
            ""
          );
          break;
        case "bdmap":
          // ç™¾åº¦åœ°å›¾
          layer = sgworld.Creator.createImageryProvider(
            treeNode.name,
            "BaiduMap",
            {
              id: treeNode.id,
              level: treeNode.Level,
              enablePickFeatures: false,
              style: treeNode.style,
              minimumLevel: treeNode.minimumLevel,
              maximumLevel: treeNode.maximumLevel,
              alpha: treeNode.alpha,
            },
            "0",
            treeNode.zIndex,
            true,
            ""
          );
          break;
        case "cesiumblack":
          // cesiumIon黑夜地图
          layer = sgworld.Creator.createImageryProvider(
            treeNode.name,
            "cesiumBlack",
            {
              id: treeNode.id,
              url: treeNode.urls,
              flipXY: true,
              enablePickFeatures: false,
              level: treeNode.Level,
              minimumLevel: treeNode.minimumLevel,
              maximumLevel: treeNode.maximumLevel,
              alpha: treeNode.alpha,
            },
            "0",
            treeNode.zIndex,
            true,
            ""
          );
          break;
        case "osm":
          // osm地图
          layer = sgworld.Creator.createImageryProvider(
            treeNode.name,
            "OpenStreetMap",
            {
              id: treeNode.id,
              url: treeNode.urls,
              enablePickFeatures: false,
              level: treeNode.Level,
              minimumLevel: treeNode.minimumLevel,
              maximumLevel: treeNode.maximumLevel,
              alpha: treeNode.alpha,
            },
            "0",
            treeNode.zIndex,
            true,
            ""
          );
          break;
        case "wmts":
          // wmts影像
          layer = sgworld.Creator.createWebMapTileServerImageLayer(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              level: treeNode.Level,
              style: treeNode.style,
              layer: treeNode.layer,
              enablePickFeatures: false,
              format: treeNode.format,
              tileMatrixSetID: treeNode.srs,
              tilingScheme:
                treeNode.tileType === "Geo"
                  ? new Cesium.GeographicTilingScheme()
                  : new Cesium.WebMercatorTilingScheme(),
              show: true,
              minimumLevel: treeNode.minimumLevel,
              maximumLevel: treeNode.maximumLevel,
              alpha: treeNode.alpha,
            },
            "0",
            treeNode.zIndex,
            true,
            ""
          );
          break;
        case "gis_wmts":
          // gisserver wmst影像
          layer = sgworld.Creator.createUrlTemplateImageryProvider(
            treeNode.name,
            {
              id: treeNode.id,
              url: Cesium.buildModuleUrl(
                treeNode.urls + "/{z}/{x}/{reverseY}.png"
              ),
              enablePickFeatures: false,
              level: treeNode.Level,
              minimumLevel: treeNode.minimumLevel,
              maximumLevel: treeNode.maximumLevel,
              alpha: treeNode.alpha,
            },
            "0",
            treeNode.zIndex,
            true,
            ""
          );
          break;
        case "wmts_zj":
          // è¡Œåˆ—号差两倍的wmts
          var geotil = new Cesium.GeographicTilingScheme({
            rectangle: Cesium.Rectangle.MAX_VALUE,
          });
          if (treeNode.addLevel && treeNode.addLevel === 2) {
            geotil.positionToTileXY = function (position, level, result) {
              level > 0 && level++;
              var rectangle = this._rectangle;
              if (!Cesium.Rectangle.contains(rectangle, position)) {
                // outside the bounds of the tiling scheme
                return undefined;
              }

              var xTiles = this.getNumberOfXTilesAtLevel(level);
              var yTiles = this.getNumberOfYTilesAtLevel(level);

              var xTileWidth = rectangle.width / xTiles;
              var yTileHeight = rectangle.height / yTiles;

              var longitude = position.longitude;
              if (rectangle.east < rectangle.west) {
                longitude += Cesium.Math.TWO_PI;
              }

              var xTileCoordinate =
                ((longitude - rectangle.west) / xTileWidth) | 0;
              if (xTileCoordinate >= xTiles) {
                xTileCoordinate = xTiles - 1;
              }

              var yTileCoordinate =
                ((rectangle.north - position.latitude) / yTileHeight) | 0;
              if (yTileCoordinate >= yTiles) {
                yTileCoordinate = yTiles - 1;
              }

              if (!Cesium.defined(result)) {
                return new Cesium.Cartesian2(xTileCoordinate, yTileCoordinate);
              }

              result.x = xTileCoordinate;
              result.y = yTileCoordinate;
              return result;
            };
            geotil.tileXYToRectangle = function (x, y, level, result) {
              level > 0 && level++;
              var rectangle = this._rectangle;

              var xTiles = this.getNumberOfXTilesAtLevel(level);
              var yTiles = this.getNumberOfYTilesAtLevel(level);

              var xTileWidth = rectangle.width / xTiles;
              var west = x * xTileWidth + rectangle.west;
              var east = (x + 1) * xTileWidth + rectangle.west;

              var yTileHeight = rectangle.height / yTiles;
              var north = rectangle.north - y * yTileHeight;
              var south = rectangle.north - (y + 1) * yTileHeight;

              if (!Cesium.defined(result)) {
                result = new Cesium.Rectangle(west, south, east, north);
              }

              result.west = west;
              result.south = south;
              result.east = east;
              result.north = north;
              return result;
            };
          }
          layer = sgworld.Creator.createWebMapTileServerImageLayer(
            treeNode.name,
            {
              id: treeNode.id,
              url: treeNode.urls,
              layer: treeNode.layer,
              level: treeNode.Level,
              minimumLevel: treeNode.minimumLevel,
              maximumLevel: treeNode.maximumLevel,
              style: "default",
              tileMatrixSetID: "esritilematirx",
              format: "image/png",
              tilingScheme: geotil,
              addLevel: treeNode.addLevel || 1, //层级加一
              enablePickFeatures: false,
              show: true,
              alpha: treeNode.alpha,
            },
            "0",
            treeNode.zIndex,
            true,
            ""
          );
          break;
        case "wms":
        case "wmsc":
          // wms数据
          var parameters = {
            service: "WMS",
            format: "image/png",
            transparent: true,
          };
          if (treeNode.removeNullValue) {
            if (treeNode.nullvalue) {
              treeNode.nullvalue = treeNode.nullvalue.replace("rgb(", "");
              treeNode.nullvalue = treeNode.nullvalue.replace(")", "");
            }
            parameters.nullvalue = sgworld.Core.defaultValue(
              treeNode.nullvalue,
              "0,0,0"
            );
            parameters.nulltolerance = sgworld.Core.defaultValue(
              treeNode.nulltolerance,
              0
            );
          }
          treeNode.token && (treeNode.urls += "?token=" + treeNode.token);
          if (treeNode.sourceType === "wmsc") {
            layer = sgworld.Creator.createCacheImageryProvider(
              treeNode.name,
              {
                id: treeNode.id,
                url: treeNode.urls || "",
                layers: treeNode.layer || "",
                level: treeNode.Level,
                enablePickFeatures: false,
                cacheUrl: treeNode.cacheUrl || treeNode.urls,
                fileExtension: treeNode.fileExtension,
                cacheMaxLevel: treeNode.cacheMaxLevel || 16,
                alpha: treeNode.alpha,
              },
              "0",
              treeNode.zIndex,
              treeNode.checked,
              ""
            );
          } else {
            layer = sgworld.Creator.createImageryProvider(
              treeNode.name,
              "wms",
              {
                id: treeNode.id,
                url: treeNode.urls,
                layers: treeNode.layer || "",
                level: treeNode.Level,
                minimumLevel: treeNode.minimumLevel,
                maximumLevel: treeNode.maximumLevel,
                enablePickFeatures: false,
                parameters: parameters,
                alpha: treeNode.alpha,
              },
              "0",
              treeNode.zIndex,
              true,
              ""
            );
          }
          break;
        case "wmse":
          // layer = sgworld.Creator.createImageryProvider(
          //   treeNode.name,
          //   "wms",
          //   {
          //     id: treeNode.id,
          //     url: treeNode.urls,
          //     level: treeNode.Level,
          //     minimumLevel: treeNode.minimumLevel,
          //     maximumLevel: treeNode.maximumLevel,
          //     enablePickFeatures: false,

          //     layers: treeNode.layer || "",
          //     alpha: treeNode.alpha,
          //     parameters: {
          //       format: "image/png",
          //       transparent: true,
          //     },
          //   },
          //   "0",
          //   undefined,
          //   true,
          //   ""
          // );
          debugger;
          var layer = new Image({
            source: new ImageWMS({
              //不能设置为0，否则地图不展示。
              ratio: 1,
              url: "http://127.0.0.1:8080/geoserver/province/wms",
              params: {
                LAYERS: "province:新疆",
                STYLES: "",
                VERSION: "1.1.1",
                FORMAT: "image/png",
              },
              serverType: "geoserver",
            }),
          });
          window.map.addLayer(layer);
          break;
        case "wfs":
          // wfs数据
          // console.log(treeNode);
          layer = sgwfs.CreateWfs(treeNode.class, treeNode);
          break;
        case "yinjing":
          axios
            .get(
              treeNode.urls +
                "?version=1.3.0&request=GetFeature&format=json&typename=" +
                treeNode.layer
            )
            .then((data) => {
              console.log(data);

              let features = data.data.features;
              features.forEach((feature) => {
                let geom = feature.geometry.coordinates;
                let properties = feature.properties;
                let point = new SmartEarth.Degrees(geom[0], geom[1], 0);
                let imgUrl;
                // console.log(point);
                if (feature.featureType == "窨井") {
                  switch (feature.properties["井类型"]) {
                    case "雨水井":
                      imgUrl =
                        SmartEarthRootUrl +
                        "Workers/image/csyxj/切片/雨水井盖.png";
                      break;
                    case "电力井":
                      imgUrl =
                        SmartEarthRootUrl +
                        "Workers/image/csyxj/切片/电力井盖.png";
                      break;
                    case "交通井":
                      imgUrl =
                        SmartEarthRootUrl +
                        "Workers/image/csyxj/切片/交通井盖.png";
                      break;
                    case "路灯井":
                      imgUrl =
                        SmartEarthRootUrl +
                        "Workers/image/csyxj/切片/路灯井盖.png";
                      break;
                    case "通信井":
                      imgUrl =
                        SmartEarthRootUrl +
                        "Workers/image/csyxj/切片/通信井盖.png";
                      break;
                    case "污水井":
                      imgUrl =
                        SmartEarthRootUrl +
                        "Workers/image/csyxj/切片/污水井盖.png";
                      break;
                    case "监控井":
                      imgUrl =
                        SmartEarthRootUrl +
                        "Workers/image/csyxj/切片/监控井盖.png";
                      break;
                    case "燃气井":
                      imgUrl =
                        SmartEarthRootUrl +
                        "Workers/image/csyxj/切片/燃气井盖.png";
                      break;
                    case "热力井":
                      imgUrl =
                        SmartEarthRootUrl +
                        "Workers/image/csyxj/切片/热力井盖.png";
                      break;
                    default:
                      imgUrl = treeNode.image;
                      break;
                  }
                }

                var position = sgworld.Creator.CreatePosition(
                  geom[0],
                  geom[1],
                  0
                );
                var label = sgworld.Creator.CreateLabel(
                  position,
                  feature.properties["count"],
                  feature.featureType == "窨井" ? imgUrl : treeNode.image,
                  {
                    imageScale: 0.5,
                    disableDepthTestDistance: "Infinity",
                    minimumLevel: 16,
                    maximumLevel: 22,
                    // æ— è§†é®æŒ¡
                    disableDepthTestDistance: Infinity,
                  },
                  0,
                  "文本"
                );
              });
            });
          break;
        case "geojson":
          if (treeNode.class === "point") {
            treeNode.disableDepthTestDistance === "Infinity" &&
              (treeNode.disableDepthTestDistance = Number.POSITIVE_INFINITY);

            de = {
              id: treeNode.id,
              fillColor: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
              color: sgworld.Core.defaultValue(treeNode.imageColor, undefined),
              outlineColor: sgworld.Core.defaultValue(
                treeNode.outlineColor,
                "#ffffff"
              ),
              backgroundColor: sgworld.Core.defaultValue(
                treeNode.backgroundColor,
                "#ffffff"
              ),
              heightReference: sgworld.Core.defaultValue(
                treeNode.heightReference,
                0
              ),
              pointHeight: sgworld.Core.defaultValue(
                treeNode.pointHeight,
                undefined
              ),
              near: sgworld.Core.defaultValue(treeNode.near, 0),
              far: sgworld.Core.defaultValue(treeNode.far, 99999999999),
              bold: treeNode.bold,
              italic: treeNode.italic,
              showBackground: treeNode.showBackground,
              outlineWidth: sgworld.Core.defaultValue(treeNode.outlineWidth, 1),
              text: treeNode.text,
              image: treeNode.image,
              font_size: treeNode.size,
              font_family: sgworld.Core.defaultValue(
                treeNode.font_family,
                "微软雅黑"
              ),
              disableDepthTestDistance: sgworld.Core.defaultValue(
                treeNode.disableDepthTestDistance,
                undefined
              ),
              labelData: treeNode.labelData,
              imageData: treeNode.imageData,
            };

            if (
              treeNode.text &&
              treeNode.image &&
              !treeNode.labelData &&
              !treeNode.imageData
            ) {
              de.labelData = {
                horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                pixelOffset: new Cesium.Cartesian2(20, 0),
              };
              de.imageData = {
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                pixelOffset: new Cesium.Cartesian2(0, 0),
              };
            }
            layer = sgworld.Creator.createLabelPointGeoJsonFeatureLayer(
              treeNode.name,
              treeNode.urls,
              de,
              "0",
              treeNode.checked
            );
          } else if (treeNode.class === "polyline") {
            de = {
              id: treeNode.id,
              layertype: "polylinelayer",
              material: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
              outlineColor: sgworld.Core.defaultValue(
                treeNode.outlineColor,
                "#ffffff"
              ),
              outlineWidth: sgworld.Core.defaultValue(treeNode.outlineWidth, 0),
              height: sgworld.Core.defaultValue(treeNode.height, undefined),
              width: sgworld.Core.defaultValue(treeNode.width, 2),
              clampToGround: sgworld.Core.defaultValue(
                treeNode.clampToGround,
                true
              ),
              classificationType: treeNode.classificationType,
              dash: sgworld.Core.defaultValue(treeNode.dash, false),
              dashLength: sgworld.Core.defaultValue(treeNode.dashLength, 20),
              gapColor: sgworld.Core.defaultValue(
                treeNode.gapColor,
                "rgba(0,0,0,0)"
              ),
              near: sgworld.Core.defaultValue(treeNode.near, 0),
              far: sgworld.Core.defaultValue(treeNode.far, Infinity),
            };

            layer = sgworld.Creator.createPolylineGeoJsonFeatureLayer(
              treeNode.name,
              treeNode.urls,
              de,
              "0",
              treeNode.checked
            );
          } else if (treeNode.class === "polylineVolume") {
            de = {
              id: treeNode.id,
              material: sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
              slttype: "0",
              number: "4",
              exradius: "1",
              inradius: "1",
              orth_width: "2",
              orth_height: "2",
              radius: sgworld.Core.defaultValue(treeNode.radius, 5),
              cornerType: "0",
              heightReference: "0",
              height: sgworld.Core.defaultValue(treeNode.lineHeight, 0),
              near: "0",
              far: "99999999999",
              radiusScale: treeNode.radiusScale,
              connect: true,
            };
            layer = sgworld.Creator.createpolylineVolumeGeojsonPrimitiveLayer(
              treeNode.name,
              treeNode.urls,
              de,
              "0",
              true,
              function (data) {
                if (treeNode.flow) {
                  let lines = data.entities.values;
                  lines.forEach((line) => {
                    line.polylineVolume.material =
                      sgworld.Core.getTrailLinkMaterial(
                        sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
                        "../static/images/smoke.png",
                        9000
                      );
                  });
                }
              }
            );
          } else if (treeNode.class === "model") {
            de = {
              id: treeNode.id,
              collect: 0,
              uri: sgworld.Core.defaultValue(treeNode.model, ""),
              file: "",
              color: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
              scale: sgworld.Core.defaultValue(treeNode.scale, 1),
              heightReference: 0,
              height: sgworld.Core.defaultValue(treeNode.height, 0),
              near: "0",
              far: "99999999999",
            };
            layer = sgworld.Creator.createModelPointGeoJsonFeatureLayer(
              treeNode.name,
              treeNode.urls,
              de,
              "0",
              true
            );
          } else if (treeNode.class === "polygon") {
            treeNode.disableDepthTestDistance === "Infinity" &&
              (treeNode.disableDepthTestDistance = Number.POSITIVE_INFINITY);

            de = {
              id: treeNode.id,
              material: sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
              height: sgworld.Core.defaultValue(treeNode.height, 0),
              outlineColor: sgworld.Core.defaultValue(
                treeNode.outlineColor,
                "#ff0000"
              ),
              extrudedHeight: sgworld.Core.defaultValue(
                treeNode.extrudedHeight,
                0
              ),
              outlineWidth: sgworld.Core.defaultValue(treeNode.outlineWidth, 0),
              outline: sgworld.Core.defaultValue(treeNode.outline, true),
              clampToGround: sgworld.Core.defaultValue(
                treeNode.clampToGround,
                treeNode.extrudedHeight === undefined &&
                  treeNode.height === undefined
              ),
              classificationType: treeNode.classificationType,
              near: sgworld.Core.defaultValue(treeNode.near, 0),
              far: sgworld.Core.defaultValue(treeNode.far, Infinity),

              text: treeNode.text,
              font: sgworld.Core.defaultValue(treeNode.font, "微软雅黑"),
              labelNear: treeNode.labelNear,
              labelFar: treeNode.labelFar,
              fontSize: sgworld.Core.defaultValue(treeNode.size, "18px"),
              italic: treeNode.italic,
              bold: treeNode.bold,
              pixelOffset: new Cesium.Cartesian2(
                sgworld.Core.defaultValue(treeNode.offsetX, 0),
                sgworld.Core.defaultValue(treeNode.offsetY, 0)
              ),
              labelOutlineWidth: 2,
              disableDepthTestDistance: treeNode.disableDepthTestDistance,

              water: treeNode.water,
            };
            layer = sgworld.Creator.createPolygonGeoJsonFeatureLayer(
              treeNode.name,
              treeNode.urls,
              de,
              "0",
              treeNode.checked
            );
          }
          break;
        case "pathLayer":
          layer = sgworld.Creator.createPathLayer({
            id: treeNode.id,
            url: treeNode.url,
            color: treeNode.color || "#0033FF", //线的颜色
            width: treeNode.width || 4.0, //线的宽度
            pointColor: treeNode.pointColor || "#FFFFFF", //移动点的颜色
            speed: treeNode.speed || 5,
            far: treeNode.far || 5000,
          });
          break;
        case "vector": {
          let urls = {
            url: treeNode.urls,
            layer: treeNode.layer,
            srs: treeNode.srs,
          };
          if (
            treeNode.class === "point" ||
            treeNode.class === "label" ||
            treeNode.class === "image"
          ) {
            treeNode.disableDepthTestDistance === "Infinity" &&
              (treeNode.disableDepthTestDistance = Number.POSITIVE_INFINITY);
            if (treeNode.style) {
              // de = getVectorStyleFromSG(treeNode, treeNode.style);
            } else {
              de = {
                id: treeNode.id,
                level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
                level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
                fillColor: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
                color: sgworld.Core.defaultValue(
                  treeNode.imageColor,
                  undefined
                ),
                outlineColor: sgworld.Core.defaultValue(
                  treeNode.outlineColor,
                  "#ffffff"
                ),
                backgroundColor: sgworld.Core.defaultValue(
                  treeNode.backgroundColor,
                  "#ffffff"
                ),
                heightReference: sgworld.Core.defaultValue(
                  treeNode.heightReference,
                  0
                ),
                pointHeight: sgworld.Core.defaultValue(
                  treeNode.pointHeight,
                  undefined
                ),
                near: sgworld.Core.defaultValue(treeNode.near, 0),
                far: sgworld.Core.defaultValue(treeNode.far, 99999999999),
                bold: treeNode.bold,
                italic: treeNode.italic,
                showBackground: treeNode.showBackground,
                outlineWidth: sgworld.Core.defaultValue(
                  treeNode.outlineWidth,
                  1
                ),
                text: treeNode.text,
                image: treeNode.image,
                font_size: treeNode.size,
                font_family: sgworld.Core.defaultValue(
                  treeNode.font_family,
                  "微软雅黑"
                ),
                disableDepthTestDistance: sgworld.Core.defaultValue(
                  treeNode.disableDepthTestDistance,
                  undefined
                ),
                labelData: treeNode.labelData,
                imageData: treeNode.imageData,
              };
            }

            if (
              treeNode.text &&
              treeNode.image &&
              !treeNode.labelData &&
              !treeNode.imageData
            ) {
              de.labelData = {
                horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                pixelOffset: new Cesium.Cartesian2(20, 0),
              };
              de.imageData = {
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                pixelOffset: new Cesium.Cartesian2(0, 0),
              };
            }
            urls.upperLevelLimit = de.level_max;
            urls.lowerLevelLimit = de.level_min;
            layer = sgworld.Creator.createLabelImageGeoJsonFeatureLayerProvider(
              treeNode.name,
              urls,
              de,
              "0",
              treeNode.checked,
              function () {}
            );
          } else if (treeNode.class === "polylineVolume") {
            de = {
              id: treeNode.id,
              level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
              level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
              material: sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
              slttype: "0",
              number: "4",
              exradius: "1",
              inradius: "1",
              orth_width: "2",
              orth_height: "2",
              radius: sgworld.Core.defaultValue(treeNode.radius, 0.5),
              cornerType: "0",
              heightReference: "0",
              height: sgworld.Core.defaultValue(treeNode.height, 0),
              near: sgworld.Core.defaultValue(treeNode.near, 0),
              far: sgworld.Core.defaultValue(treeNode.far, 99999999999),
              radiusScale: treeNode.radiusScale,
            };
            urls.upperLevelLimit = de.level_max;
            urls.lowerLevelLimit = de.level_min;
            layer = sgworld.Creator.createVolumeGeoJsonFeatureLayerProvider(
              treeNode.name,
              urls,
              de,
              "0",
              treeNode.checked,
              function () {}
            );
          } else if (treeNode.class === "polyline") {
            de = {
              id: treeNode.id,
              layertype: "polylinelayer",
              level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
              level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
              material: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
              outlineColor: sgworld.Core.defaultValue(
                treeNode.outlineColor,
                "#ffffff"
              ),
              outlineWidth: sgworld.Core.defaultValue(treeNode.outlineWidth, 0),
              height: sgworld.Core.defaultValue(treeNode.height, undefined),
              width: sgworld.Core.defaultValue(treeNode.width, 2),
              clampToGround: sgworld.Core.defaultValue(
                treeNode.clampToGround,
                true
              ),
              classificationType: treeNode.classificationType,
              dash: sgworld.Core.defaultValue(treeNode.dash, false),
              dashLength: sgworld.Core.defaultValue(treeNode.dashLength, 20),
              gapColor: sgworld.Core.defaultValue(
                treeNode.gapColor,
                "rgba(0,0,0,0)"
              ),
              near: sgworld.Core.defaultValue(treeNode.near, 0),
              far: sgworld.Core.defaultValue(treeNode.far, Infinity),
            };
            urls.upperLevelLimit = de.level_max;
            urls.lowerLevelLimit = de.level_min;

            layer =
              sgworld.Creator.createPrimitivePolylineVectorGeoJsonFeatureLayerProvider(
                treeNode.name,
                urls,
                de,
                "0",
                treeNode.checked,
                function () {}
              );
          } else if (treeNode.class === "polygon") {
            de = {
              id: treeNode.id,
              layertype: "polygonlayer",
              level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
              level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
              material: sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
              heightReference: "1",
              height: sgworld.Core.defaultValue(treeNode.height, 0),
              extrudedHeight: sgworld.Core.defaultValue(
                treeNode.extrudedHeight,
                0
              ),
              extrudedHeightReference: "1",
              clampToGround: sgworld.Core.defaultValue(
                treeNode.clampToGround,
                false
              ),
              classificationType: treeNode.classificationType,
              near: sgworld.Core.defaultValue(treeNode.near, 0),
              far: sgworld.Core.defaultValue(treeNode.far, Infinity),
            };
            urls.upperLevelLimit = de.level_max;
            urls.lowerLevelLimit = de.level_min;
            layer =
              sgworld.Creator.createGeoJsonFeatureLayerProviderOptimization(
                treeNode.name,
                urls,
                de,
                "0",
                treeNode.checked,
                function () {}
              );
          } else if (treeNode.class === "model") {
            de = {
              id: treeNode.id,
              level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
              level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
              collect: 0,
              uri: sgworld.Core.defaultValue(treeNode.model, ""),
              file: "",
              color: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
              scale: sgworld.Core.defaultValue(treeNode.scale, 1),
              heightReference: 0,
              height: sgworld.Core.defaultValue(treeNode.height, 0),
              near: "0",
              far: "99999999999",
            };
            //模型点
            urls.upperLevelLimit = de.level_max;
            urls.lowerLevelLimit = de.level_min;
            layer = sgworld.Creator.createModelGeoJsonFeatureLayerProvider(
              treeNode.name,
              urls,
              de,
              "0",
              treeNode.checked,
              function () {}
            );
          }
          layer && (treeNode.id = layer.treeobj.id);
          break;
        }
        case "terrain":
          layer = sgworld.Creator.createTerrain(
            treeNode.name,
            {
              id: treeNode.id,
              requestVertexNormals: true,
              url: treeNode.urls,
            },
            "0",
            true,
            ""
          );
          break;
        case "sgsterrain":
          layer = sgworld.Creator.sfsterrainprovider(
            treeNode.name,
            {
              id: treeNode.id,
              layerName: treeNode.layer,
              requestVertexNormals: true,
              url: treeNode.urls || "",
              token: treeNode.token,
              cacheUrl: treeNode.cacheUrl,
              cacheLevel: treeNode.cacheLevel,
            },
            "0",
            true,
            ""
          );
          break;
        case "sgsterrain7.1":
          layer = sgworld.Creator.sfsterrainprovider71(
            treeNode.name,
            {
              id: treeNode.id,
              layerName: treeNode.layer,
              requestVertexNormals: true,
              url: treeNode.urls,
              token: treeNode.token,
              cacheUrl: treeNode.cacheUrl,
              cacheLevel: treeNode.cacheLevel,
            },
            "0",
            true,
            ""
          );
          break;
        case "arcgisterrain":
          layer = sgworld.Creator.createArcGISTerrain(
            treeNode.name,
            {
              id: treeNode.id,
              requestVertexNormals: true,
              url: treeNode.urls,
            },
            "0",
            true,
            ""
          );
          break;
        case "CesiumGlobeTerrain":
          layer = sgworld.Creator.createCesiumTerrain(
            treeNode.name,
            {
              id: treeNode.id,
              requestVertexNormals: true,
            },
            "0",
            true,
            ""
          );
          break;
        case "b3dm":
          layer = sgworld.Creator.create3DTilesets(
            treeNode.name,
            treeNode.urls,
            {
              id: treeNode.id,
              Level: treeNode.Level,
              maximumScreenSpaceError:
                treeNode.maximumScreenSpaceError &&
                parseInt(treeNode.maximumScreenSpaceError),
              maximumMemoryUsage:
                treeNode.maximumMemoryUsage &&
                parseInt(treeNode.maximumMemoryUsage),
              geometricError:
                treeNode.geometricError && parseInt(treeNode.geometricError),
            },
            {
              groundCenter: treeNode.Center,
              groundheight: 1,
              heading: treeNode.heading,
              pitch: treeNode.pitch,
              roll: treeNode.roll,
              effects: treeNode.effects || false,
              effectsMaxHeight: treeNode.effectsMaxHeight || 150,
              colors: treeNode.alpha
                ? "rgba(255,255,255," + treeNode.alpha + ")"
                : treeNode.color || undefined,
            },
            "0",
            true
          );
          break;
        case "s3m":
          layer = sgworld.Creator.createS3MLayer(
            treeNode.urls,
            sgworld._Viewer.scene,
            function () {}
          );
          break;
        case "gltf":
          var position = [treeNode.lon, treeNode.lat, treeNode.height];
          layer = sgworld.Creator.createModel(
            position,
            treeNode.urls,
            {
              id: treeNode.id,
              scale: treeNode.scale || 1,
              heading: treeNode.heading,
              pitch: treeNode.pitch,
              roll: treeNode.roll,
            },
            "0",
            treeNode.name,
            ""
          );
          break;
        case "SimpleGraphic":
          treeNode.type = treeNode.class;
          layer = sgworld.Creator.SimpleGraphic.addFeature(treeNode);
          break;
        case "videoPolygon":
          layer = sgworld.Creator.addVideoPolygon(treeNode.positions, {
            url: treeNode.url,
            angle: treeNode.angle,
          });
          break;
        case "MilitaryPlotting":
          if (!treeNode.feature.id) {
            treeNode.feature.id = treeNode.id;
          }
          if (!treeNode.feature.name) {
            treeNode.feature.name = treeNode.name;
          }
          layer = sgworld.Creator.MilitaryPlotting.addFeature(treeNode.feature);
          break;
        case "ParticleEffect":
          layer = sgworld.Analysis.createParticleEffect(
            treeNode.name,
            treeNode.position,
            {
              translation: Cesium.Cartesian3.fromElements(0, 0, 0), //平移
            }
          );
          layer.name = treeNode.name;
          break;
        case "FlowField":
          layer = sgworld.Creator.createTrailLine(
            treeNode.positions,
            treeNode.style
          );
          layer.boundingSphere = Cesium.BoundingSphere.fromPoints(
            treeNode.positions
          );

          break;
        case "MobileWall":
          layer = sgworld.Creator.createTrailLineWall(
            treeNode.LineInterpolation.positions,
            treeNode.style
          );
          layer.boundingSphere = Cesium.BoundingSphere.fromPoints(
            treeNode.LineInterpolation.positions
          );
          break;
        case "link":
          layer = sgworld.Creator.createLinkPro(
            sgworld.Core.toDegrees(treeNode.posisitons[0]),
            sgworld.Core.toDegrees(treeNode.posisitons[1]),
            {
              clampToGround: true,
            }
          );
          break;
        case "DiffusionSource":
          layer = sgworld.Analysis.createMultiCircleScan(
            treeNode.position,
            treeNode.maxRadius,
            treeNode.maxRadius.color,
            3000,
            true
          );
          break;
        case "RiskDiffusion":
        case "CircularDiffusion":
          layer = sgworld.Analysis.createCircleScan(
            treeNode.position,
            treeNode.maxRadius,
            treeNode.color,
            3000,
            true
          );
          break;
        case "FanDiffusion":
          layer = sgworld.Analysis.createSectorScan(
            treeNode.position,
            treeNode.distance,
            "#ff0000",
            60,
            treeNode.angle,
            true,
            4000,
            true
          );
          break;
        case "RadarMask":
          layer = sgworld.Creator.createRectangularSensor(
            treeNode.position,
            treeNode.cylinder
          );
          break;
        case "DynamicSatellite":
          let dtwxzsData = sgworld.Creator.createConeRadar(treeNode.position, {
            color: "#7b9ef7",
            radius: 200000,
          });
          let weixin = sgworld.Creator.createModel(
            treeNode.position,
            window.SmartEarthRootUrl + "Workers/Model/weixin.gltf",
            { scale: 15 },
            "0",
            "卫星"
          );
          layer = { dtwxzsData, weixin };
          layer.sourceType = "DynamicSatellite";
          break;
        case "excavate":
          var position = [treeNode.lon, treeNode.lat, treeNode.height];
          layer = sgworld.Creator.createModel(
            position,
            treeNode.urls,
            {
              id: treeNode.id,
              scale: treeNode.scale || 1,
            },
            pID,
            treeNode.name,
            ""
          );
          treeNode.id = layer.treeobj.id;
          break;
      }
      if (treeNode.sourceType !== "gltf" && (treeNode.lon || treeNode.lat)) {
        treeNode.flyTo = [
          treeNode.lon,
          treeNode.lat,
          sgworld.Core.defaultValue(treeNode.height, 10000),
        ];
      }
      if (treeNode.minx && treeNode.miny && treeNode.maxx && treeNode.maxy) {
        treeNode.flyTo = [
          treeNode.minx,
          treeNode.miny,
          treeNode.maxx,
          treeNode.maxy,
        ];
      }
      if (treeNode.sourceType === "wfs") {
        addTreeData(treeNode, layer);
      }
      if (treeNode.baseLayer) {
        layer.item.baseLayer = true;
      }
    },
    initLdgCluster(treeNode) {
      if (treeNode.checked == false) {
        window.map.removeLayer(window.ldgclusterLayer);
        window.map.removeLayer(window.tldgclusterLayer);
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      // åŠ è½½ GeoJSON æ•°æ®
      var vectorSource = new Vector({
        format: new GeoJSON(),
        url:
          treeNode.urls +
          "?version=1.3.0&request=GetFeature&format=json&typename=" +
          treeNode.layer,
      });

      // åˆ›å»ºèšåˆå±‚
      var clusterSource = new Cluster({
        distance: 40,
        source: vectorSource,
      });

      // åˆ›å»ºèšåˆæ˜¾ç¤ºæ ·å¼
      var styleCache = {};
      if (treeNode.name == "路灯杆 ") {
        window.ldgclusterLayer = new VectorLayer({
          source: clusterSource,
          style: function (feature) {
            var size = feature.get("features").length;
            if (size == 1) {
              return new Style({
                image: new Icon({
                  anchor: [0.5, 1],
                  src: treeNode.image,
                }),
              });
            }
            if (size > 1000) {
              var style = styleCache[size];
              if (!style) {
                style = new Style({
                  image: new Icon({
                    scale: 0.4,
                    src: require("@/assets/img/right/test01.png"),
                  }),
                  text: new Text({
                    text: size.toString(),
                    fill: new Fill({
                      color: "#fff",
                    }),
                  }),
                });
                styleCache[size] = style;
              }
              return style;
            }
            var style = styleCache[size];
            if (!style) {
              style = new Style({
                image: new Icon({
                  // anchor: [0.5, 1],
                  scale: 0.3,
                  src: require("@/assets/img/right/jh.png"),
                }),
                text: new Text({
                  text: size.toString(),
                  fill: new Fill({
                    color: "#fff",
                  }),
                }),
              });
              styleCache[size] = style;
            }
            return style;
          },
        });

        window.map.addLayer(window.ldgclusterLayer);
      } else if (treeNode.name == "路名牌杆 ") {
        window.tldgclusterLayer = new VectorLayer({
          source: clusterSource,
          style: function (feature) {
            var size = feature.get("features").length;
            if (size == 1) {
              return new Style({
                image: new Icon({
                  anchor: [0.5, 1],
                  src: treeNode.image,
                }),
              });
            }
            if (size > 1000) {
              var style = styleCache[size];
              if (!style) {
                style = new Style({
                  image: new Icon({
                    scale: 0.4,
                    src: require("@/assets/img/right/test01.png"),
                  }),
                  text: new Text({
                    text: size.toString(),
                    fill: new Fill({
                      color: "#fff",
                    }),
                  }),
                });
                styleCache[size] = style;
              }
              return style;
            }
            var style = styleCache[size];
            if (!style) {
              style = new Style({
                image: new Icon({
                  // anchor: [0.5, 1],
                  scale: 0.3,
                  src: require("@/assets/img/right/jh.png"),
                }),
                text: new Text({
                  text: size.toString(),
                  fill: new Fill({
                    color: "#fff",
                  }),
                }),
              });
              styleCache[size] = style;
            }
            return style;
          },
        });

        window.map.addLayer(window.tldgclusterLayer);
      }

      // å°†èšåˆå±‚加入地图
      window.map.removeLayer(window.jkspclusterLayer);
      window.map.removeLayer(window.qiyeclusterLayer);
      loading.close();
    },
    initCluster(treeNode) {
      if (treeNode.checked == false) {
        window.map.removeLayer(window.jkspclusterLayer);
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // åŠ è½½ GeoJSON æ•°æ®
      var vectorSource = new Vector({
        format: new GeoJSON(),
        url:
          treeNode.urls +
          "?version=1.3.0&request=GetFeature&format=json&typename=" +
          treeNode.layer,
      });

      // åˆ›å»ºèšåˆå±‚
      var clusterSource = new Cluster({
        distance: 40,
        source: vectorSource,
      });

      // åˆ›å»ºèšåˆæ˜¾ç¤ºæ ·å¼
      var styleCache = {};
      window.jkspclusterLayer = new VectorLayer({
        source: clusterSource,
        style: function (feature) {
          var size = feature.get("features").length;
          if (size == 1) {
            return new Style({
              image: new Icon({
                anchor: [0.5, 1],
                src: "./static/SmartEarthSDK/Workers/image/xzspj/spjk.png",
              }),
            });
          }
          if (size > 1000) {
            var style = styleCache[size];
            if (!style) {
              style = new Style({
                image: new Icon({
                  // anchor: [0.5, 1],
                  scale: 0.4,
                  src: require("@/assets/img/right/test01.png"),
                }),
                text: new Text({
                  text: size.toString(),
                  fill: new Fill({
                    color: "#fff",
                  }),
                }),
              });
              styleCache[size] = style;
            }
            return style;
          }
          var style = styleCache[size];
          if (!style) {
            style = new Style({
              image: new Icon({
                // anchor: [0.5, 1],
                scale: 0.3,
                src: require("@/assets/img/right/jh.png"),
              }),
              text: new Text({
                text: size.toString(),
                fill: new Fill({
                  color: "#fff",
                }),
              }),
            });
            styleCache[size] = style;
          }
          return style;
        },
      });

      // å°†èšåˆå±‚加入地图
      window.map.removeLayer(window.ldgclusterLayer);
      window.map.removeLayer(window.tldgclusterLayer);
      window.map.removeLayer(window.qiyeclusterLayer);
      window.map.addLayer(window.jkspclusterLayer);
      loading.close();
      // new Cesium.GeoJsonDataSource.load(
      //   treeNode.urls +
      //     "?version=1.3.0&request=GetFeature&format=json&typename=" +
      //     treeNode.layer
      // )
      //   .then((dataSource) => {
      //     Viewer.dataSources.add(dataSource);
      //     clusterItemList.push({ name: treeNode.id, dataSource: dataSource });
      //     // window.clusterItem = dataSource;
      //     // è®¾ç½®èšåˆå‚æ•°
      //     dataSource.clustering.enabled = true;
      //     window.dataClustering = dataSource.clustering;
      //     dataSource.clustering.pixelRange = 10;
      //     dataSource.clustering.minimumClusterSize = 10;

      //     // foreach用于调用数组的每个元素，并将元素传递给回调函数。
      //     dataSource.entities.values.forEach((entity) => {
      //       if (entity.featureType == "yz井数据") {
      //         switch (feature.properties["井类型"]) {
      //           default:
      //             imgUrl = treeNode.image;
      //             break;
      //         }
      //       }
      //       // å°†ç‚¹æ‹‰ä¼¸ä¸€å®šé«˜åº¦ï¼Œé˜²æ­¢è¢«åœ°å½¢åŽ‹ç›–
      //       entity.position._value.z += 10.0;
      //       // ä½¿ç”¨å¤§å°ä¸º64*64的icon，缩小展示poi
      //       entity.billboard = {
      //         image: entity.featureType == "yz井数据" ? imgUrl : treeNode.image,
      //         scale: treeNode.imageScale,
      //         width: 30,
      //         height: 30,
      //         distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
      //           0,
      //           5000.0
      //         ),
      //         disableDepthTestDistance: Number.POSITIVE_INFINITY,
      //       };
      //       entity.tag = treeNode.id;
      //       // entity.label = {
      //       //   // text: "POI",
      //       //   font: "bold 15px Microsoft YaHei",
      //       //   // ç«–直对齐方式
      //       //   verticalOrigin: Cesium.VerticalOrigin.CENTER,
      //       //   // æ°´å¹³å¯¹é½æ–¹å¼
      //       //   horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      //       //   // åç§»é‡
      //       //   pixelOffset: new Cesium.Cartesian2(15, 0),
      //       // };
      //     });

      //     // æ·»åŠ ç›‘听函数
      //     dataSource.clustering.clusterEvent.addEventListener(function (
      //       clusteredEntities,
      //       cluster
      //     ) {
      //       // å…³é—­è‡ªå¸¦çš„显示聚合数量的标签

      //       cluster.label.show = true;
      //       cluster.label.font = "bold 20px Microsoft YaHei";

      //       cluster.label.color = Cesium.Color.WHITE;
      //       cluster.label.outlineColor = Cesium.Color.BLACK;
      //       cluster.label.outlineWidth = 3.0;
      //       cluster.label.style = Cesium.LabelStyle.FILL_AND_OUTLINE;
      //       cluster.label.eyeOffset = new Cesium.Cartesian3(0, 0, -100);
      //       cluster.label.disableDepthTestDistance = Number.POSITIVE_INFINITY;
      //       cluster.billboard.disableDepthTestDistance =
      //         Number.POSITIVE_INFINITY;
      //       cluster.billboard.show = true;
      //       cluster.billboard.id = cluster.label.id;
      //       cluster.billboard.horizontalOrigin = Cesium.HorizontalOrigin.LEFT;
      //       cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.CENTER;
      //       var reg1 = new RegExp(",", "g");
      //       cluster.label.text = cluster.label.text.replace(reg1, "");
      //       // æ ¹æ®èšåˆæ•°é‡çš„多少设置不同层级的图片以及大小
      //       if (clusteredEntities.length >= 10000) {
      //         // cluster.billboard.image = require("@/assets/img/right/test01.png");
      //         cluster.billboard.image = require("@/assets/img/right/jh.png");
      //         cluster.billboard.pixelOffset = new Cesium.Cartesian2(-20, -8);
      //         cluster.billboard.width = 95;
      //         cluster.billboard.height = 95;
      //       } else if (clusteredEntities.length >= 1000) {
      //         // cluster.billboard.image = require("@/assets/img/right/jh.png");
      //         cluster.billboard.image = require("@/assets/img/right/test01.png");
      //         cluster.billboard.pixelOffset = new Cesium.Cartesian2(-18, -10);
      //         // that.combineIconAndLabel(
      //         //   require("@/assets/img/right/jh.png"),
      //         //   clusteredEntities.length,
      //         //   192,
      //         //   "test01"
      //         // );
      //         cluster.billboard.width = 80;
      //         cluster.billboard.height = 80;
      //       } else if (clusteredEntities.length >= 100) {
      //         cluster.billboard.image = require("@/assets/img/right/jh.png");
      //         // cluster.billboard.image = require("@/assets/img/right/test01.png");
      //         cluster.billboard.pixelOffset = new Cesium.Cartesian2(-13, -8);
      //         // that.combineIconAndLabel(
      //         //   require("@/assets/img/right/test01.png"),
      //         //   clusteredEntities.length,
      //         //   192,
      //         //   "test01"
      //         // );
      //         cluster.billboard.width = 60;
      //         cluster.billboard.height = 60;
      //       }
      //       //  else if (clusteredEntities.length >= 40) {
      //       //   cluster.billboard.image = require("@/assets/img/right/test02.png");
      //       //   cluster.billboard.pixelOffset = new Cesium.Cartesian2(-0, 0);
      //       //   // that.combineIconAndLabel(
      //       //   //   require("@/assets/img/right/test02.png"),
      //       //   //   clusteredEntities.length,
      //       //   //   192,
      //       //   //   "test02"
      //       //   // );
      //       //   cluster.billboard.width = 92;
      //       //   cluster.billboard.height = 92;
      //       // }
      //       // else if (clusteredEntities.length >= 20) {
      //       //   cluster.billboard.image = require("@/assets/img/right/test03.png");
      //       //   cluster.billboard.pixelOffset = new Cesium.Cartesian2(-15, 0);
      //       //   //  that.combineIconAndLabel(
      //       //   //   require("@/assets/img/right/test03.png"),
      //       //   //   clusteredEntities.length,
      //       //   //   192,
      //       //   //   "test03"
      //       //   // );
      //       //   cluster.billboard.width = 82;
      //       //   cluster.billboard.height = 82;
      //       // }
      //       else if (clusteredEntities.length >= 10) {
      //         cluster.billboard.image = require("@/assets/img/right/jh.png");
      //         // cluster.billboard.image = require("@/assets/img/right/test04.png");
      //         cluster.billboard.pixelOffset = new Cesium.Cartesian2(-15, -8);
      //         cluster.billboard.width = 50;
      //         cluster.billboard.height = 50;
      //       } else {
      //         // cluster.billboard.image = require("@/assets/img/right/test04.png");
      //         cluster.billboard.image = require("@/assets/img/right/jh.png");
      //         cluster.billboard.pixelOffset = new Cesium.Cartesian2(-25, -10);
      //         cluster.billboard.width = 40;
      //         cluster.billboard.height = 40;
      //       }
      //     });
      //     loading.close();
      //   })
      //   .catch((err) => {
      //     this.$message({
      //       showClose: true,
      //       message: "数据请求失败",
      //       type: "error",
      //       offset: 80,
      //     });
      //     loading.close();
      //   });
    },
    testSDKcluster() {
      let clusterLayer1 = new SmartEarth.ClusterLayer(Viewer, {
        style: "clustering",
      });
      axios
        .get(
          window.gisBaseUrl +
            "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=企业链企业"
        )
        .then((res) => {
          let positions = generatePosition(20000);
          positions.forEach((item) => {
            clusterLayer1.add(item, {
              image: "./static/SmartEarthSDK/Workers/image/xzspj/qiye.png",
            });
          });
          // res.data.features.forEach((item) => {
          // clusterLayer1.add(
          //   new SmartEarth.Degrees(
          //     item.geometry.coordinates[0],
          //     item.geometry.coordinates[1]
          //   ),
          //   {
          //     name: `QY&${item.properties.ID}&${item.properties["QYMC"]}&${item.properties["DZ"]}&${item.properties["BZDZ"]}&${item.properties["XYDM"]}&${item.geometry.coordinates[0]}&${item.geometry.coordinates[1]}`,
          //     image: SmartEarthRootUrl + "Workers/image/mark.png",
          //   }
          // );
          // });
        });
    },
    qiyeCluster(treeNode) {
      if (treeNode.checked == false) {
        window.map.removeLayer(window.qiyeclusterLayer);
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // åŠ è½½ GeoJSON æ•°æ®
      var vectorSource = new Vector({
        format: new GeoJSON(),
        url:
          treeNode.urls +
          "?version=1.3.0&request=GetFeature&format=json&typename=" +
          treeNode.layer,
      });

      // åˆ›å»ºèšåˆå±‚
      var clusterSource = new Cluster({
        distance: 40,
        source: vectorSource,
      });

      // åˆ›å»ºèšåˆæ˜¾ç¤ºæ ·å¼
      var styleCache = {};
      window.qiyeclusterLayer = new VectorLayer({
        source: clusterSource,
        style: function (feature) {
          var size = feature.get("features").length;
          if (size == 1) {
            return new Style({
              image: new Icon({
                anchor: [0.5, 1],
                src: treeNode.image,
              }),
            });
          }
          if (size > 1000) {
            var style = styleCache[size];
            if (!style) {
              style = new Style({
                image: new Icon({
                  // anchor: [0.5, 1],
                  scale: 0.4,
                  src: require("@/assets/img/right/test01.png"),
                }),
                text: new Text({
                  text: size.toString(),
                  fill: new Fill({
                    color: "#fff",
                  }),
                }),
              });
              styleCache[size] = style;
            }
            return style;
          }
          var style = styleCache[size];
          if (!style) {
            style = new Style({
              image: new Icon({
                // anchor: [0.5, 1],
                scale: 0.3,
                src: require("@/assets/img/right/jh.png"),
              }),
              text: new Text({
                text: size.toString(),
                fill: new Fill({
                  color: "#fff",
                }),
              }),
            });
            styleCache[size] = style;
          }
          return style;
          // var style = styleCache[size];
          //   if (!style) {
          //     style = new Style({
          //       image: new Circle({
          //         radius: 20,
          //         stroke: new Stroke({
          //           color: "#fff",
          //         }),
          //         fill: new Fill({
          //           color: "#3399CC",
          //         }),
          //       }),
          //       text: new Text({
          //         text: size.toString(),
          //         fill: new Fill({
          //           color: "#fff",
          //         }),
          //       }),
          //     });
          //     styleCache[size] = style;
          //   }
          //   return style;
        },
      });

      // å°†èšåˆå±‚加入地图
      window.map.removeLayer(window.ldgclusterLayer);
      window.map.removeLayer(window.tldgclusterLayer);
      window.map.removeLayer(window.jkspclusterLayer);
      window.map.addLayer(window.qiyeclusterLayer);
      loading.close();

      // let dataSource;
      // if (treeNode.layer == "企业链企业") {
      //   // console.log(store.qiyeJsonInfo);
      //   dataSource = store.qiyeJsonInfo;
      // }
      // Viewer.dataSources.add(dataSource);
      // clusterItemList.push({ name: treeNode.id, dataSource: dataSource });
      // // window.clusterItem = dataSource;
      // // è®¾ç½®èšåˆå‚æ•°
      // dataSource.clustering.enabled = true;
      // window.dataClustering = dataSource.clustering;
      // dataSource.clustering.pixelRange = 10;
      // dataSource.clustering.minimumClusterSize = 10;
      // // foreach用于调用数组的每个元素，并将元素传递给回调函数。
      // dataSource.entities.values.forEach((entity) => {
      //   if (entity.featureType == "yz井数据") {
      //     switch (feature.properties["井类型"]) {
      //       default:
      //         imgUrl = treeNode.image;
      //         break;
      //     }
      //   }
      //   // å°†ç‚¹æ‹‰ä¼¸ä¸€å®šé«˜åº¦ï¼Œé˜²æ­¢è¢«åœ°å½¢åŽ‹ç›–
      //   entity.position._value.z += 10.0;
      //   // ä½¿ç”¨å¤§å°ä¸º64*64的icon，缩小展示poi
      //   entity.billboard = {
      //     image: entity.featureType == "yz井数据" ? imgUrl : treeNode.image,
      //     scale: treeNode.imageScale,
      //     width: 30,
      //     height: 30,
      //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
      //       0,
      //       5000.0
      //     ),
      //     disableDepthTestDistance: Number.POSITIVE_INFINITY,
      //   };
      //   entity.tag = treeNode.id;
      // });
      // // æ·»åŠ ç›‘听函数
      // dataSource.clustering.clusterEvent.addEventListener(function (
      //   clusteredEntities,
      //   cluster
      // ) {
      //   // å…³é—­è‡ªå¸¦çš„显示聚合数量的标签

      //   var reg1 = new RegExp(",", "g");
      //   cluster.label.text = cluster.label.text.replace(reg1, "");
      //   cluster.label.show = true;
      //   cluster.label.font = "bold 20px Microsoft YaHei";
      //   cluster.label.color = Cesium.Color.WHITE;
      //   cluster.label.outlineColor = Cesium.Color.BLACK;
      //   cluster.label.outlineWidth = 3.0;
      //   cluster.label.style = Cesium.LabelStyle.FILL_AND_OUTLINE;
      //   cluster.label.eyeOffset = new Cesium.Cartesian3(0, 0, -100);
      //   cluster.label.disableDepthTestDistance = Number.POSITIVE_INFINITY;
      //   // cluster.label.showBackground = false;
      //   // cluster.label.backgroundColor = new Cesium.Color.fromCssColorString(
      //   //   "#30afff"
      //   // );
      //   // cluster.label.style = Cesium.LabelStyle.FILL;
      //   // cluster.label.backgroundPadding = new Cesium.Cartesian2(5, 5); //设置背景内边距
      //   cluster.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY;
      //   cluster.billboard.show = true;
      //   cluster.billboard.id = cluster.label.id;
      //   cluster.billboard.horizontalOrigin = Cesium.HorizontalOrigin.LEFT;
      //   cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.CENTER;
      //   // æ ¹æ®èšåˆæ•°é‡çš„多少设置不同层级的图片以及大小
      //   if (clusteredEntities.length >= 10000) {
      //     cluster.billboard.image = require("@/assets/img/right/jh.png");
      //     cluster.billboard.pixelOffset = new Cesium.Cartesian2(-20, -8);
      //     cluster.billboard.width = 95;
      //     cluster.billboard.height = 95;
      //   } else if (clusteredEntities.length >= 1000) {
      //     cluster.billboard.image = require("@/assets/img/right/jh.png");
      //     cluster.billboard.pixelOffset = new Cesium.Cartesian2(-18, -10);
      //     cluster.billboard.width = 80;
      //     cluster.billboard.height = 80;
      //   } else if (clusteredEntities.length >= 100) {
      //     cluster.billboard.image = require("@/assets/img/right/jh.png");
      //     cluster.billboard.pixelOffset = new Cesium.Cartesian2(-13, -8);
      //     cluster.billboard.width = 60;
      //     cluster.billboard.height = 60;
      //   } else if (clusteredEntities.length >= 10) {
      //     cluster.billboard.image = require("@/assets/img/right/jh.png");
      //     cluster.billboard.pixelOffset = new Cesium.Cartesian2(-15, -8);
      //     cluster.billboard.width = 50;
      //     cluster.billboard.height = 50;
      //   } else {
      //     cluster.billboard.image = require("@/assets/img/right/jh.png");
      //     cluster.billboard.pixelOffset = new Cesium.Cartesian2(-25, -10);
      //     cluster.billboard.width = 40;
      //     cluster.billboard.height = 40;
      //   }
      // });
    },
    // initCluster(treeNode) {
    //   let that = this;
    //   let imgUrl;
    //   new Cesium.GeoJsonDataSource.load(
    //     treeNode.urls +
    //       "?version=1.3.0&request=GetFeature&format=json&typename=" +
    //       treeNode.layer
    //   ).then((dataSource) => {
    //     Viewer.dataSources.add(dataSource);
    //     clusterItemList.push({ name: treeNode.id, dataSource: dataSource });

    //     // window.clusterItem = dataSource;

    //     // è®¾ç½®èšåˆå‚æ•°
    //     dataSource.clustering.enabled = true;
    //     window.dataClustering = dataSource.clustering;
    //     dataSource.clustering.pixelRange = 20;
    //     dataSource.clustering.minimumClusterSize = 20;

    //     // foreach用于调用数组的每个元素，并将元素传递给回调函数。
    //     dataSource.entities.values.forEach((entity) => {
    //       if (entity.featureType == "yz井数据") {
    //         switch (feature.properties["井类型"]) {
    //           default:
    //             imgUrl = treeNode.image;
    //             break;
    //         }
    //       }
    //       // å°†ç‚¹æ‹‰ä¼¸ä¸€å®šé«˜åº¦ï¼Œé˜²æ­¢è¢«åœ°å½¢åŽ‹ç›–
    //       entity.position._value.z += 50.0;
    //       // ä½¿ç”¨å¤§å°ä¸º64*64的icon，缩小展示poi
    //       entity.billboard = {
    //         image: entity.featureType == "yz井数据" ? imgUrl : treeNode.image,

    //         scale: treeNode.imageScale,
    //         // width: 50,
    //         // height: 50,
    //         distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
    //           0,
    //           5000.0
    //         ),
    //         disableDepthTestDistance: Number.POSITIVE_INFINITY,
    //       };
    //       entity.tag = treeNode.id;
    //       // entity.label = {
    //       //   // text: "POI",
    //       //   font: "bold 15px Microsoft YaHei",
    //       //   // ç«–直对齐方式
    //       //   verticalOrigin: Cesium.VerticalOrigin.CENTER,
    //       //   // æ°´å¹³å¯¹é½æ–¹å¼
    //       //   horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
    //       //   // åç§»é‡
    //       //   pixelOffset: new Cesium.Cartesian2(15, 0),
    //       // };
    //     });

    //     // æ·»åŠ ç›‘听函数
    //     dataSource.clustering.clusterEvent.addEventListener(function (
    //       clusteredEntities,
    //       cluster
    //     ) {
    //       // å…³é—­è‡ªå¸¦çš„显示聚合数量的标签
    //       cluster.label.show = false;
    //       cluster.billboard.show = true;
    //       cluster.billboard.id = cluster.label.id;
    //       cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
    //       // console.log("-----", cluster);
    //       // æ ¹æ®èšåˆæ•°é‡çš„多少设置不同层级的图片以及大小
    //       if (clusteredEntities.length >= 50) {
    //         cluster.billboard.image = that.combineIconAndLabel(
    //           require("@/assets/img/right/test01.png"),
    //           clusteredEntities.length,
    //           192,
    //           "test01"
    //         );
    //         cluster.billboard.width = 102;
    //         cluster.billboard.height = 102;
    //       } else if (clusteredEntities.length >= 40) {
    //         cluster.billboard.image = that.combineIconAndLabel(
    //           require("@/assets/img/right/test02.png"),
    //           clusteredEntities.length,
    //           192,
    //           "test02"
    //         );
    //         cluster.billboard.width = 92;
    //         cluster.billboard.height = 92;
    //       } else if (clusteredEntities.length >= 20) {
    //         cluster.billboard.image = that.combineIconAndLabel(
    //           require("@/assets/img/right/test03.png"),
    //           clusteredEntities.length,
    //           192,
    //           "test03"
    //         );
    //         cluster.billboard.width = 82;
    //         cluster.billboard.height = 82;
    //       } else {
    //         cluster.billboard.image = that.combineIconAndLabel(
    //           require("@/assets/img/right/test04.png"),
    //           clusteredEntities.length,
    //           192,
    //           "test04"
    //         );
    //         cluster.billboard.width = 62;
    //         cluster.billboard.height = 62;
    //       }
    //     });
    //   });
    // },
    /**
     * @description: å°†å›¾ç‰‡å’Œæ–‡å­—合成新图标使用
     * @param {*} url：图片地址
     * @param {*} label：文字
     * @param {*} size：画布大小
     * @return {*} è¿”回canvas
     */
    combineIconAndLabel(url, label, size, val) {
      // åˆ›å»ºç”»å¸ƒå¯¹è±¡
      let canvas = document.createElement("canvas");
      canvas.width = size;
      canvas.height = size;

      let ctx = canvas.getContext("2d");
      let promise = new Cesium.Resource.fetchImage(url).then((image) => {
        // å¼‚常判断
        try {
          ctx.drawImage(image, 0, 0);
        } catch (e) {
          console.log(e);
        }
        // console.log("-----", ctx);
        // æ¸²æŸ“字体
        ctx.fillStyle = Cesium.Color.WHITE.toCssColorString();
        if (val.indexOf("jh") != -1) {
          ctx.font = "bold 15px Microsoft YaHei";
        } else if (val.indexOf("jh") != -1) {
          ctx.font = "bold 15px jh YaHei";
        } else if (val.indexOf("test03") != -1) {
          ctx.font = "bold 15px Microsoft YaHei";
        } else if (val.indexOf("test04") != -1) {
          ctx.font = "bold 15px Microsoft YaHei";
        }
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(label, size / 3, size / 2.7);

        return canvas.toDataURL("image/png");
      });
      return promise;
    },
    back() {
      store.setLayerTreeShow(false);
    },
  },
  watch: {
    "state.itemId": {
      handler: function (newVal, oldVal) {
        console.log("state.itemId");
        if (oldVal != "") {
          oldVal.forEach((item) => {
            this.setVisiable(item, false);
          });
        }
        if (newVal != "") {
          newVal.forEach((item) => {
            this.setVisiable(item, true);
          });
        }
      },
    },
  },
};
</script>

<style scoped>
.layerTreePanel {
  position: absolute;
  color: black;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 1001;
}

.layerTreeContainer {
  /* margin-top: 0.2rem; */
  padding: 0.1rem;
}

.title {
  height: 35px;
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 700;
  color: #888888;
  line-height: 25px;
  margin: 10px 0px 10px 0;
  border-bottom: 1px solid #e5e5e6;
}
.treeContainer {
  height: 82vh;
  overflow: auto;
}
</style>

 src/components/sideMenu/layerTreePanel/main2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,23 @@
<template>
  <div v-show="state.show">
    <layerTreePanel></layerTreePanel>
  </div>
</template>

<script>
import store from "@/utils/store2.js";
import layerTreePanel from "./layerTreePanel2.vue";
export default {
  components: {
    layerTreePanel,
  },
  data() {
    return {
      state: store.layerTree,
    };
  },
};
</script>

<style>
</style>

 src/components/viewer.vue

@@ -101,7 +101,7 @@
    "my-layer-tree-panel": layerTreePanel,
    "my-history": history,
    "my-land-admin-info": landAdminInfo,
    "my-slider":sliderAlpha
    "my-slider": sliderAlpha,
  },
  data() {
    return {

 src/components/viewer2.vue

@@ -14,9 +14,9 @@
      <img class="searchBtn" src="@/assets/closeinput1.png" />
    </div> -->
    <!-- å³ä¾§å¯¼èˆªæ¡† -->
    <!-- <my-navigation-bar></my-navigation-bar> -->
    <my-navigation-bar></my-navigation-bar>
    <!-- æœç´¢æ¡† -->
    <!-- <my-sousuo v-if="!state.show" v-show="childrendata.ssval"></my-sousuo> -->
    <my-sousuo v-if="!state.show" v-show="childrendata.ssval"></my-sousuo>
    <!-- å³ä¸Šå¿«æ·åŒºåŸŸï¼ˆå·¥ç¨‹æ ‘、空间分析） -->
    <!-- <div class="right-top">
      <my-layertree :rightshowzy="childrendata"></my-layertree>
@@ -24,47 +24,47 @@
    <!-- åŽŸå·¦ä¸‹èœå• -->
    <!-- <my-menu v-on:getshowsta="datafromchild" ref="menu"></my-menu> -->
    <!-- å·¦ä¸‹å¿«æ·åŒºåŸŸï¼ˆå¤ä½ã€æŒ‡åŒ—等） -->
    <!-- <my-left-bottom :test="childrendata"></my-left-bottom> -->
    <my-left-bottom :test="childrendata"></my-left-bottom>
    <!-- å³ä¸‹å¿«æ·åŒºåŸŸï¼ˆæ”¾å¤§ç¼©å°ï¼‰ -->
    <!-- <my-right-bottom :test="childrendata"></my-right-bottom> -->
    <my-right-bottom :test="childrendata"></my-right-bottom>

    <!-- å„种面板 -->
    <!-- è®¾ç½®é¢æ¿ -->
    <!-- <my-setting-panel></my-setting-panel> -->
    <my-setting-panel></my-setting-panel>
    <!-- ä½ç½®é¢æ¿ -->
    <!-- <my-collection-panel></my-collection-panel> -->
    <my-collection-panel></my-collection-panel>
    <!-- æŒ‡åŒ—针面板 -->
    <!-- <my-direction-panel></my-direction-panel> -->
    <!-- æ–°å¢žæ”¶è—é¢æ¿ -->
    <!-- <my-add-collection-panel></my-add-collection-panel> -->
    <my-add-collection-panel></my-add-collection-panel>
    <!-- çª¨äº•ã€æ‘„像头统计面板 -->
    <!-- <my-statistics-panel></my-statistics-panel> -->
    <my-statistics-panel></my-statistics-panel>
    <!-- çª¨äº•ç»Ÿè®¡åˆ†æžé¢æ¿ -->
    <!-- <my-manhole-panel></my-manhole-panel> -->
    <my-manhole-panel></my-manhole-panel>
    <!-- æ‘„像头统计分析面板 -->
    <!-- <my-video-panel></my-video-panel> -->
    <my-video-panel></my-video-panel>
    <!-- å›¾å±‚面板 -->
    <!-- <my-layer-panel></my-layer-panel> -->
    <my-layer-panel></my-layer-panel>
    <!-- æ¼«æ¸¸é¢æ¿ -->
    <!-- <my-roam-panel></my-roam-panel> -->
    <my-roam-panel></my-roam-panel>
    <!-- å›¾å±‚树面板 -->
    <!-- <my-layer-tree-panel></my-layer-tree-panel> -->
    <my-layer-tree-panel></my-layer-tree-panel>
    <!-- åœŸåœ°ç®¡ç†å¼¹çª— -->
    <!-- <my-land-admin-info></my-land-admin-info>
    <my-slider></my-slider> -->
    <my-land-admin-info></my-land-admin-info>
    <my-slider></my-slider>
  </div>
</template>
<script>
import store from "@/utils/store.js";
import store from "@/utils/store2.js";

import _GLOBAL from "@/assets/GLOBAL";
import _GLOBAL from "@/assets/GLOBAL2";
import { leftClick, loadLayer } from "@/utils/map.js";
import leftBottom from "@/components/leftMenu/bottom.vue";
import rightBottom from "@/components/rightMenu/bottom.vue";
import sousuo from "@/components/leftMenu/sousuo.vue";
import leftBottom from "@/components/leftMenu/bottom2.vue";
import rightBottom from "@/components/rightMenu/bottom2.vue";
import sousuo from "@/components/leftMenu/sousuo2.vue";
import menu from "@/components/menu/menu.vue";
import NavigationBar from "./rightNavigation/NavigationBar.vue";
import layertree from "@/components/rightMenu/layerTree.vue";
import NavigationBar from "./rightNavigation/NavigationBar2.vue";
import layertree from "@/components/rightMenu/layerTree2.vue";
import settingPanel from "./sideMenu/settingMenu/main.vue";
import collectionPanel from "./sideMenu/collectionMenu/main.vue";
import directionPanel from "./sideMenu/directionMenu/main.vue";
@@ -74,7 +74,7 @@
import videoPanel from "./sideMenu/videoStatistics/main.vue";
import layerPanel from "./sideMenu/layerMenu/main2.vue";
import roamPanel from "./sideMenu/roamPanel/main.vue";
import layerTreePanel from "./sideMenu/layerTreePanel/main.vue";
import layerTreePanel from "./sideMenu/layerTreePanel/main2.vue";
import history from "./poplayer/history.vue";
import landAdminInfo from "./poplayer/landAdmin.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main.vue";
@@ -83,19 +83,10 @@
import Map from "ol/Map.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import {
    get as getProjection,
    getTransform
} from 'ol/proj';
import {
    getWidth,
    getTopLeft,
    applyTransform
} from 'ol/extent';
import 
    WMTS 
 from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import { get as getProjection, getTransform } from "ol/proj";
import { getWidth, getTopLeft, applyTransform } from "ol/extent";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";

export default {
  name: "viewer2",
@@ -144,14 +135,23 @@
  created() {},
  mounted() {
    this.$nextTick(function () {
      console.log("openlayer init");
      
      console.log('openlayer init');
      Map.prototype.getLayerByName = function (name) {
        var layer;
        this.getLayers().array_.forEach(function (lyr) {
          if (name == lyr.values_.name) {
            layer = lyr;
          }
        });
        return layer;
      };

      const layers = [];

      const TDTKey = 'f234b950740b8c2e0d9959a51c169d21';
      const tiandituUrl = 'http://t0.tianditu.gov.cn';
      let  options = {proj:'EPSG:4326',layer:'cia',matrixSets:"c"};
      const TDTKey = "f234b950740b8c2e0d9959a51c169d21";
      const tiandituUrl = "http://t0.tianditu.gov.cn";
      let options = { proj: "EPSG:4326", layer: "img", matrixSets: "c" };
      let _proj = options.proj;
      let _layer = options.layer;
      let _key = TDTKey;
@@ -176,7 +176,10 @@
        resolutions: resolutions,
        matrixIds: matrixIds,
      });
      console.log('url:',`${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`);
      console.log(
        "url:",
        `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`
      );
      let wmtsSource = new WMTS({
        url: `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`,
        layer: _layer,
@@ -189,13 +192,14 @@
        tileGrid: wmtsTileGrid,
      });
      let wmtsLayer = new TileLayer({
        name: "影像地图",
        id: _layer + "_" + _matrixSets,
        source: wmtsSource,
      });

      let wmtsSource1 = new WMTS({
        url: `${tiandituUrl}/img_${_matrixSets}/wmts?tk=${_key}`,
        layer: 'img',
        url: `${tiandituUrl}/cia_${_matrixSets}/wmts?tk=${_key}`,
        layer: "cia",
        version: "1.0.0",
        matrixSet: _matrixSets,
        format: "tiles",
@@ -205,24 +209,46 @@
        tileGrid: wmtsTileGrid,
      });
      let wmtsLayer1 = new TileLayer({
        id: _layer + "_" + _matrixSets,
        name: "路网图层",
        id: "cia_c",
        source: wmtsSource1,
      });
      layers.push(wmtsLayer1);

      let wmtsSource2 = new WMTS({
        url: `${tiandituUrl}/vec_c/wmts?tk=${_key}`,
        layer: "vec",
        version: "1.0.0",
        matrixSet: _matrixSets,
        format: "tiles",
        projection: projection,
        requestEncoding: "KVP",
        style: "default",
        tileGrid: wmtsTileGrid,
      });
      let wmtsLayer2 = new TileLayer({
        name: "二维地图",
        id: "cva_c",
        source: wmtsSource2,
      });
      wmtsLayer2.setVisible(false);
      ////卫星影像
      layers.push(wmtsLayer);


      ////二维地图
      layers.push(wmtsLayer2);
      ////路网
      layers.push(wmtsLayer1);

      const map = new Map({
        layers: layers,
        target: "openlayerContainer",
        view: new View({
          center: [-6655.5402445057125, 6709968.258934638],
          center: [116.505348, 39.795592],
          projection: "EPSG:4326",
          zoom: 12,
        }),
      });


      window.map = map;

      window.layerOpen = function (name, options) {
        layuiLayer.close(SmartEarthPopupData.layerProp);

 src/utils/map2.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,2193 @@
import Vue from 'vue';
import axios from "axios";
import _GLOBAL from '@/assets/GLOBAL2';
import poiLayer from '@/components/poplayer/main';
import store from "@/utils/store2";
import { Message } from 'element-ui';
let tdglLine, qiyexinxi, qysl, ydbm, ydlx, cyfx, crzt, ydmj, crnx, crnf, rjl, jzxg, jzmd;
let objdata;

window.tdglLine = tdglLine
let PoiLayerConstructor = Vue.extend(poiLayer);
/**核心区 */
export function loadHXQ() {
    let urls = window.gisBaseUrl + "/gisserver/wmsserver/YZ_BJ60";
    window.HXQ = sgworld.Creator.createImageryProvider('hxqgisserver', "wms", {
        url: urls,
        layers: '',
        parameters: {
            format: "image/png",
            transparent: true,
        }
    }, "0", undefined, true, function () {
        Viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(116.52556, 39.71046, 34189.97),
            orientation: {//设置相机的Heading，Pitch，Roll，参照上图
                heading: Cesium.Math.toRadians(360.0),
                pitch: Cesium.Math.toRadians(-90.0),
                roll: 0.0
            },
            duration: 3
        });
    });
}
/**经开区 */
export function loadJKQ() {
    let urls = window.gisBaseUrl + "/gisserver/wmsserver/YZ_BJ";
    window.JKQ = sgworld.Creator.createImageryProvider('jkqgisserver', "wms", {
        url: urls,
        layers: '',
        parameters: {
            format: "image/png",
            transparent: true,
        }
    }, "0", undefined, true, function () {
        Viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(116.52902, 39.67853, 59383.65),
            orientation: {//设置相机的Heading，Pitch，Roll，参照上图
                heading: Cesium.Math.toRadians(360.0),
                pitch: Cesium.Math.toRadians(-90.0),
                roll: 0.0
            },
            duration: 3
        });
    });

}
/**乡镇 */
export function loadXZ() {
    let urls = window.gisBaseUrl + "/gisserver/wmsserver/xiangzhen";
    window.XZ = sgworld.Creator.createImageryProvider('xzgisserver', "wms", {
        url: urls,
        layers: '',
        parameters: {
            format: "image/png",
            transparent: true,
        }
    }, "0", undefined, true, function () {
        Viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(116.55718, 39.65440, 53149.25),
            orientation: {//设置相机的Heading，Pitch，Roll，参照上图
                heading: Cesium.Math.toRadians(360.0),
                pitch: Cesium.Math.toRadians(-90.0),
                roll: 0.0
            },
            duration: 3
        });
    });

}
/**窨井 */
export function loadManhole() {
    window.clusterLayer && window.clusterLayer.clear();
    axios
        .get(window.gisBaseUrl + '/gisserver/wfsserver/yinjing?version=1.3.0&request=GetFeature&format=json&typename=yz井数据')
        .then(res => {
            // let manholeList = JSON.parse(res.data);
            store.setLayerPanelShow(false);
            res.data.features.forEach((item, index) => {
                window.clusterLayer.add(
                    new SmartEarth.Degrees(item.geometry.coordinates[0], item.geometry.coordinates[1], 15),
                    {
                        name: `YINJ-${item.properties.ID}-${item.properties['井名称']}-${item.properties['井深']}-${item.properties['井类型']}-${item.properties['井编号']}-${item.properties['位置']}-${item.properties['标段备注']}-${item.properties['行政区编码']}-${item.geometry.coordinates[0]}-${item.geometry.coordinates[1]}`,
                        image: SmartEarthRootUrl + 'Workers/image/mark.png',
                        scale: 0.5
                    }
                )
            });

            Viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(116.54555, 39.74727, 20565.49),
                orientation: {//设置相机的Heading，Pitch，Roll，参照上图
                    heading: Cesium.Math.toRadians(360.0),
                    pitch: Cesium.Math.toRadians(-90.0),
                    roll: 0.0
                },
                duration: 3
            });
        })
    // let url = window.gisBaseUrl + '/gisserver/wfsserver/yinjing';
    // let sgwfs = new SmartEarth.WFSTool(Viewer);
    // sgwfs.CreateWfs('point', {
    //     urls: url,
    //     layer: 'yz井数据',
    //     text: '[井名称]',
    //     image: SmartEarthRootUrl + 'Workers/image/mark.png',
    //     //offsetX: 20,
    //     offsetY: -40,
    //     color: '#de3',
    //     disableDepthTestDistance: Infinity
    // })
}
/**企业 */
export function loadEnterprise() {
    new Cesium.GeoJsonDataSource.load(
        window.gisBaseUrl + '/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=企业链企业'
    )
        // axios.get(window.gisBaseUrl + '/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=企业链企业')
        .then(dataSource => {
            console.log(dataSource);
            store.qiyeJsonInfo = dataSource
        })
        .catch((err) => {
            console.log(err);
        });
}
// export function loadEnterprise() {
//     window.clusterLayer && window.clusterLayer.clear();
//     axios
//         .get(window.gisBaseUrl + '/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=企业链企业')
//         .then(res => {
//             // let manholeList = JSON.parse(res.data);
//             store.setLayerPanelShow(false);
//             res.data.features.forEach((item, index) => {
//                 window.clusterLayer.add(
//                     new SmartEarth.Degrees(item.geometry.coordinates[0], item.geometry.coordinates[1], 15),
//                     {
//                         name: `QY&${item.properties.ID}&${item.properties['QYMC']}&${item.properties['DZ']}&${item.properties['BZDZ']}&${item.properties['XYDM']}&${item.geometry.coordinates[0]}&${item.geometry.coordinates[1]}`,
//                         image: SmartEarthRootUrl + 'Workers/image/mark.png',
//                         scale: 0.5
//                     }
//                 )
//             });

//             Viewer.camera.flyTo({
//                 destination: Cesium.Cartesian3.fromDegrees(116.54555, 39.74727, 20565.49),
//                 orientation: {//设置相机的Heading，Pitch，Roll，参照上图
//                     heading: Cesium.Math.toRadians(360.0),
//                     pitch: Cesium.Math.toRadians(-90.0),
//                     roll: 0.0
//                 },
//                 duration: 3
//             });
//         })
//     // let url = window.gisBaseUrl + '/gisserver/wfsserver/yinjing';
//     // let sgwfs = new SmartEarth.WFSTool(Viewer);
//     // sgwfs.CreateWfs('point', {
//     //     urls: url,
//     //     layer: 'yz井数据',
//     //     text: '[井名称]',
//     //     image: SmartEarthRootUrl + 'Workers/image/mark.png',
//     //     //offsetX: 20,
//     //     offsetY: -40,
//     //     color: '#de3',
//     //     disableDepthTestDistance: Infinity
//     // })
// }
/**摄像头 */
export function loadCamera() {
    window.clusterLayer && window.clusterLayer.clear();
    axios
        .get(window.gisBaseUrl + '/gisserver/wfsserver/YZ_SPJK_NEW_wfs?version=1.3.0&request=GetFeature&format=json&typename=摄像头0423')
        .then(res => {
            store.setLayerPanelShow(false);
            res.data.features.forEach((item, index) => {
                window.clusterLayer.add(
                    new SmartEarth.Degrees(item.geometry.coordinates[0], item.geometry.coordinates[1], 15),
                    {
                        name: `SPJK-${item.properties['IP地址']}-${item.properties['JK内码']}-${item.properties['JK区域']}-${item.properties['JK名称']}-${item.properties['JK类型']}-${item.properties['JK编号']}`,
                        image: SmartEarthRootUrl + 'Workers/image/mark1.png',
                        scale: 1
                    }
                )
            });
            Viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(116.51463, 39.73972, 19586.80),
                orientation: {//设置相机的Heading，Pitch，Roll，参照上图
                    heading: Cesium.Math.toRadians(360.0),
                    pitch: Cesium.Math.toRadians(-90.0),
                    roll: 0.0
                },
                duration: 3
            });
        })
    // let url = window.gisBaseUrl + '/gisserver/wfsserver/YZ_SPJK_NEW_wfs';
    // let sgwfs2 = new SmartEarth.WFSTool(Viewer);
    // sgwfs2.CreateWfs('point', {
    //     urls: url,
    //     layer: '摄像头0423',
    //     text: '[JK名称]',
    //     image: SmartEarthRootUrl + 'Workers/image/mark.png',
    //     //offsetX: 20,
    //     offsetY: -40,
    //     color: '#de3',
    //     disableDepthTestDistance: Infinity
    // })
}
/**清除矢量地图 */
export function clearMap() {
    window.HXQ && window.HXQ.deleteObject();
    window.JKQ && window.JKQ.deleteObject();
    window.XZ && window.XZ.deleteObject();
}
// å·¦å‡»äº‹ä»¶
window.divPoint3 = null;
window.instance = null;
window.pickFeature = null;
window.imgUrl = null;
window.scale = null;
window.clickPOI = null
function read(wkt) {
    var regExes = {
        typeStr: /^\s*(\w+)\s*\(\s*(.*)\s*\)\s*$/,
        emptyTypeStr: /^\s*(\w+)\s*EMPTY\s*$/,
        spaces: /\s+/,
        parenComma: /\)\s*,\s*\(/,
        doubleParenComma: /\)\s*\)\s*,\s*\(\s*\(/, // can't use {2} here
        trimParens: /^\s*\(?(.*?)\)?\s*$/,
    };
    /**
     * Object with properties corresponding to the geometry types. Property values
     * are functions that do the actual parsing.
     * @private
     */
    var parse$1 = {
        /**
         * Return point geometry given a point WKT fragment.
         *
         * @param {String} str A WKT fragment representing the point.
         * @return {Point} A point geometry.
         * @private
         */
        point: function point(str) {
            if (str === undefined) {
                return [];
            }

            var coords = str.trim().split(regExes.spaces);
            return [Number.parseFloat(coords[0]), Number.parseFloat(coords[1])];
        },

        /**
         * Return a multipoint geometry given a multipoint WKT fragment.
         *
         * @param {String} str A WKT fragment representing the multipoint.
         * @return {Point} A multipoint feature.
         * @private
         */
        multipoint: function multipoint(str) {
            var this$1 = this;

            if (str === undefined) {
                return [];
            }

            var point;
            var points = str.trim().split(",");
            var components = [];
            for (var i = 0, len = points.length; i < len; ++i) {
                point = points[i].replace(regExes.trimParens, "$1");
                components.push(parse$1.point(point));
            }
            return components;
        },

        /**
         * Return a linestring geometry given a linestring WKT fragment.
         *
         * @param {String} str A WKT fragment representing the linestring.
         * @return {LineString} A linestring geometry.
         * @private
         */
        linestring: function linestring(str) {
            if (str === undefined) {
                return [];
            }

            var points = str.trim().split(",");
            var components = [];
            var coords;
            for (var i = 0, len = points.length; i < len; ++i) {
                coords = points[i].trim().split(regExes.spaces);
                components.push([
                    Number.parseFloat(coords[0]),
                    Number.parseFloat(coords[1]),
                ]);
            }
            return components;
        },

        /**
         * Return a linearring geometry given a linearring WKT fragment.
         *
         * @param {String} str A WKT fragment representing the linearring.
         * @return {LinearRing} A linearring geometry.
         * @private
         */
        linearring: function linearring(str) {
            if (str === undefined) {
                return [];
            }

            var points = str.trim().split(",");
            var components = [];
            var coords;
            for (var i = 0, len = points.length; i < len; ++i) {
                coords = points[i].trim().split(regExes.spaces);
                components.push([
                    Number.parseFloat(coords[0]),
                    Number.parseFloat(coords[1]),
                ]);
            }
            return components;
        },

        /**
         * Return a multilinestring geometry given a multilinestring WKT fragment.
         *
         * @param {String} str A WKT fragment representing the multilinestring.
         * @return {MultiLineString} A multilinestring geometry.
         * @private
         */
        multilinestring: function multilinestring(str) {
            var this$1 = this;

            if (str === undefined) {
                return [];
            }

            var line;
            var lines = str.trim().split(regExes.parenComma);
            var components = [];
            for (var i = 0, len = lines.length; i < len; ++i) {
                line = lines[i].replace(regExes.trimParens, "$1");
                components.push(parse$1.linestring(line));
            }
            return components;
        },

        /**
         * Return a polygon geometry given a polygon WKT fragment.
         *
         * @param {String} str A WKT fragment representing the polygon.
         * @return {Polygon} A polygon geometry.
         * @private
         */
        polygon: function polygon(str) {
            var this$1 = this;

            if (str === undefined) {
                return [];
            }

            var ring, linestring, linearring;
            var rings = str.trim().split(regExes.parenComma);
            var shell;
            var holes = [];
            //for (var i = 0, len = rings.length; i < len; ++i) {
            ring = rings[0].replace(regExes.trimParens, "$1");
            linestring = ring;
            //}
            return linestring;
        },

        /**
         * Return a multipolygon geometry given a multipolygon WKT fragment.
         *
         * @param {String} str A WKT fragment representing the multipolygon.
         * @return {MultiPolygon} A multipolygon geometry.
         * @private
         */
        multipolygon: function multipolygon(str) {
            var this$1 = this;

            if (str === undefined) {
                return [];
            }

            var polygon;
            var polygons = str.trim().split(regExes.doubleParenComma);
            var components = [];
            for (var i = 0, len = polygons.length; i < len; ++i) {
                polygon = polygons[i].replace(regExes.trimParens, "$1");
                components.push(parse$1.polygon(polygon));
            }
            return components;
        },
    };

    var geometry, type, str;
    wkt = wkt.replace(/[\n\r]/g, " ");
    var matches = regExes.typeStr.exec(wkt);
    if (wkt.search("EMPTY") !== -1) {
        matches = regExes.emptyTypeStr.exec(wkt);
        matches[2] = undefined;
    }
    if (matches) {
        type = matches[1].toLowerCase();
        str = matches[2];
        if (parse$1[type]) {
            geometry = parse$1[type].apply(this, [str]);
        }
    }

    if (geometry === undefined) {
        throw new Error("Could not parse WKT " + wkt);
    }

    return geometry;
}
export function leftClick() {
    try {
        // ç‚¹å‡»äº‹ä»¶
        let handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
        // let nPickFeature;
        // é¼ æ ‡ç‚¹å‡»äº‹ä»¶
        handler.setInputAction(event => {
            window.clickPOI = sgworld.Navigate.getMouseDegrees(event);
            // console.log(window.clickPOI);
            if (window.clickPOI) {
                // éšè—åº•éƒ¨å›¾å±‚面版
                store.setLayerPanelShow(false);
                // éšè—å³ä¸Šè§’菜单面板
                store.setMenuListShow(false);
                // éšè—åº•éƒ¨æ¼«æ¸¸é¢æ¿
                store.setRoamPanelShow(false);

            }
            // åœŸåœ°ç®¡ç†
            if (store.tdglInfo.flag) {
                axios
                    .get(
                        // "http://10.10.4.115:8022/geowinmap_xncs/ds?r=0.9158559377752831&serviceproviderid=map.vectorserviceprovider&serviceid=queryfeature&featcls=225%25E8%258C%2583%25E5%259B%25B4%25E5%2588%2586%25E5%258C%25BA%25E8%25A7%2584%25E5%2588%2592.geojson&lng=" +
                        window.gisBaseUrl + "yzxncsApi/geowinmap_xncs/ds?r=0.9158559377752831&serviceproviderid=map.vectorserviceprovider&serviceid=queryfeature&featcls=225%25E8%258C%2583%25E5%259B%25B4%25E5%2588%2586%25E5%258C%25BA%25E8%25A7%2584%25E5%2588%2592.geojson&lng=" +
                        window.clickPOI.lon +
                        "&lat=" +
                        window.clickPOI.lat +
                        "&geom=true&requesttype=json"
                    ).then(response => {
                        let center = { lon: 0, lat: 0 };
                        let polygon = read(response.data.geometry);
                        if (polygon.length > 0) {
                            var geometry = [];
                            let points = polygon[0].split(",");
                            for (let i = 0; i < points.length; i++) {
                                let point = points[i].replace(/^\s+|\s+$/g, "").split(" ");
                                center.lon += parseFloat(point[0]) / points.length;
                                center.lat += parseFloat(point[1]) / points.length;
                                geometry.push({
                                    x: parseFloat(point[0]),
                                    y: parseFloat(point[1]),
                                    z: 0,
                                });
                            }
                            if (window.tdglLine) {
                                sgworld.Creator.DeleteObject(window.tdglLine);
                                window.tdglLine = null;
                            }
                            window.tdglLine = sgworld.Creator.createPolyline(
                                geometry,
                                "#ff0000",
                                1,
                                0,
                                "线"
                            );
                            if (center.lon != 0 && center.lat != 0) {
                                Viewer.camera.flyTo({
                                    destination: Cesium.Cartesian3.fromDegrees(
                                        center.lon,
                                        center.lat,
                                        1000
                                    ),
                                    duration: 1.0,
                                });
                            }
                        }
                        if (center.lon != 0 && center.lat != 0) {
                            axios
                                .get(
                                    // "http://10.10.4.115:8022//poisearch/guihuacon/getInfo?ydbm=" +
                                    window.gisBaseUrl + "yzxncsApi/poisearch/guihuacon/getInfo?ydbm=" +
                                    response.data.NO
                                )
                                .then(
                                    info => {
                                        let data = info.data.data;
                                        if (data.yongdishuju === null) {
                                            objdata = {
                                                POITYPE: "NOTDGL",
                                                zwxx: "暂无信息",
                                                lon: window.clickPOI.lon,
                                                lat: window.clickPOI.lat,
                                            }
                                        } else {
                                            qiyexinxi = info.data.data.qiyexinxi;
                                            qysl = data.qiyexinxi.length;
                                            if (qysl > 0) {
                                                ydbm = data.qiyexinxi[0]["地块编号"];
                                            } else {
                                                ydbm = data.churangxinxi["ydbh"];
                                            }
                                            try {
                                                ydlx = data.yongdishuju["ydlxmc"];
                                            } catch (e) { }
                                            try {
                                                cyfx = data.yongdishuju["cyfx"];
                                            } catch (e) { }
                                            try {
                                                // this.crzt = response.data["ZT"];
                                                switch (response.data["ZT"]) {
                                                    case 3:
                                                        crzt = "已出让";
                                                        break;
                                                    case 4:
                                                        crzt = "未出让";
                                                        break;
                                                }
                                            } catch (e) { }
                                            try {
                                                ydmj = parseFloat(
                                                    "" + data.yongdishuju["ydmj"]
                                                ).toFixed(0);
                                            } catch (e) { }
                                            try {
                                                crnx = data.churangxinxi["crnx"];
                                            } catch (e) { }
                                            try {
                                                crnf = data.churangxinxi["crnf"];
                                            } catch (e) { }
                                            try {
                                                rjl = data.yongdishuju["rjl"];
                                            } catch (e) { }
                                            try {
                                                jzxg = data.yongdishuju["jzxg"];
                                            } catch (e) { }
                                            try {
                                                jzmd = data.yongdishuju["jzmd"];
                                            } catch (e) { }
                                            objdata = {
                                                POITYPE: "TDGL",
                                                ydbm,
                                                ydlx,
                                                cyfx,
                                                crzt,
                                                ydmj,
                                                ydbm,
                                                crnx,
                                                crnf,
                                                rjl,
                                                jzxg,
                                                jzmd,
                                                lon: window.clickPOI.lon,
                                                lat: window.clickPOI.lat,
                                            }
                                        }

                                        store.setTdglShow(false);
                                        store.setTdlgInfo({});
                                        store.setTdglShow(true);
                                        store.setTdlgInfo(objdata);

                                        // divPoint3 && divPoint3.deleteObject();
                                        // store.setPoplayerShowAction(false);
                                        // store.setPoplayerListAction({});
                                        // store.setPoplayerShowAction(true);

                                        // store.setPoplayerListAction(objdata);
                                        // if (window.instance) {
                                        //     window.instance.$destroy();
                                        // }
                                        // window.instance = new PoiLayerConstructor({
                                        //     data: {
                                        //         list: objdata
                                        //     }
                                        // });
                                        // window.instance.$mount();
                                        // divPoint3 = window.sgworld.Creator.createDivPoint('', {
                                        //     lon: objdata.lon,
                                        //     lat: objdata.lat,
                                        //     height: 5
                                        // }, {
                                        //     type: "custom",
                                        //     offset: ["c", 20],
                                        //     description: window.instance.$el,
                                        //     near: 0,
                                        //     far: 100000
                                        // });
                                    }
                                );
                        }
                    })
            }
            let nPickFeature = sgworld.Viewer.scene.pick(event.position);
            // console.log(nPickFeature);
            // if (nPickFeature == undefined) {
            //     window.flyPoint && Viewer.entities.remove(window.flyPoint);
            //     window.flyPoint = undefined;
            // }
            // console.log(event.position);//屏幕位置
            if (!nPickFeature || !nPickFeature.id) {
                return
            } else if (nPickFeature.primitive instanceof Cesium.Billboard) {
                let cartographic =
                    window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(
                        nPickFeature.primitive.position
                    );
                let lon = Cesium.Math.toDegrees(cartographic.longitude);
                let lat = Cesium.Math.toDegrees(cartographic.latitude);
                let p = sgworld.Navigate.getDegrees();
                let flyHeight
                if (p.height > 2000) {
                    flyHeight = p.height / 1.8
                } else if (p.height > 500) {
                    flyHeight = 500
                } else {
                    flyHeight = p.height
                }
                // console.log(p);
                Viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(
                        window.clickPOI.lon,
                        window.clickPOI.lat,
                        flyHeight
                    ),
                    duration: 1.0,
                });

                if (nPickFeature.id.length > 0) {
                    return;
                }
                // é‡ç½®å›¾æ ‡
                if (window.pickFeature && window.pickFeature.primitive) {
                    window.pickFeature.primitive.image = imgUrl;
                    window.pickFeature.primitive.scale = scale;
                    window.pickFeature = null;
                }
                // å¤‡ä»½æ‹¾å–的对象
                window.pickFeature = nPickFeature;
                imgUrl = nPickFeature.primitive.image;
                scale = nPickFeature.primitive.scale;
                nPickFeature.primitive.scale = 1;
                nPickFeature.primitive.image =
                    window.SmartEarthRootUrl + "Workers/image/point.png";
                //点击弹框(部件、企业、监控)
                if (nPickFeature.id.tag || nPickFeature.id.show) {
                    let properties = nPickFeature.id.properties;
                    let propertyNames = nPickFeature.id.properties.propertyNames;
                    if (propertyNames.indexOf("监控名") !== -1) {
                        // objdata = {
                        //     POITYPE: "SPJK",
                        //     name: properties["JK名称"]._value,
                        //     type: properties["JK类型"]._value,
                        //     function: properties["功能"]._value,
                        //     area: properties["所在区"]._value,
                        //     number: properties["JK编号"]._value,
                        //     code: properties["JK内码"]._value,
                        //     lon: lon,
                        //     lat: lat,
                        // }
                        Message({
                            message: '连接状态查询中',
                            type: 'info',
                            offset: 60,
                            center: true,
                            duration: 1000,
                        });
                        layerOpen(properties["JK名称"]._value, {
                            width: "100%",
                            height: "40%",
                            // offset: [offsetTop + "px", "380px"],
                            url: "../../static/video/video.html?code=" + properties["JK内码"]._value,
                            fn: {
                                success: (layero, index) => {
                                    SmartEarthPopupData.layerContainer = layero;
                                },
                                end: () => {

                                },
                                cancel: () => {
                                    // é‡ç½®å›¾æ ‡
                                    if (window.pickFeature && window.pickFeature.primitive) {
                                        window.pickFeature.primitive.image = imgUrl;
                                        window.pickFeature.primitive.scale = scale;
                                        window.pickFeature = null;
                                    }
                                    sgworld.drawObj &&
                                        sgworld.drawObj.end &&
                                        sgworld.drawObj.end("cancel");
                                },
                            },
                        });
                        return
                    } else if (propertyNames.indexOf("部件名称") !== -1) {
                        objdata = {
                            // ç‚¹ä½ç±»åž‹ï¼ˆä¸­è‹±æ–‡é…ç½®è¡¨poiKeys.js)
                            POITYPE: "CSBJ",
                            // å±•ç¤ºå­—段
                            name: properties["部件名称"]._value,
                            address: properties["安装地址"]._value,
                            code: properties["部件编码"]._value,
                            type: properties["部件类型"]._value,
                            // å¼¹æ¡†ç»çº¬åº¦
                            lon: lon,
                            lat: lat,
                        }
                    } else if (propertyNames.indexOf("井编号") !== -1) {
                        objdata = {
                            POITYPE: "YINJ",
                            name: properties["井名称"]._value,
                            depth: properties["井深"]._value,
                            type: properties["井类型"]._value,
                            location: properties["位置"]._value,
                            code: properties["井编号"]._value,
                            lon: lon,
                            lat: lat,
                        }
                    } else if (propertyNames.indexOf("QYMC") !== -1) {
                        objdata = {
                            POITYPE: "QY",
                            QYMC: properties["QYMC"]._value,
                            XYDM: properties["XYDM"]._value,
                            BZDZ: properties["BZDZ"]._value,
                            DZ: properties["DZ"]._value,
                            lon: lon,
                            lat: lat,
                        }
                    } else if (propertyNames.includes("id")) {
                        objdata = {
                            POITYPE: "POINT",
                            name: properties["_name"]._value,
                            address: properties["_address"]._value,
                            lat: properties["_lat"]._value,
                            lon: properties["_lng"]._value,
                        }
                    }
                    divPoint3 && divPoint3.deleteObject();
                    store.setPoplayerShowAction(false);
                    store.setPoplayerListAction({});
                    store.setPoplayerShowAction(true);
                    // let arr = nPickFeature.id.name.split('&');
                    // console.log(arr);
                    // let objdata = {
                    //     POITYPE: "QY",
                    //     QYMC: arr[2],
                    //     DZ: arr[3],
                    //     BZDZ: arr[4],
                    //     XYDM: arr[5],
                    //     lon: arr[6],
                    //     lat: arr[7],
                    // }
                    store.setPoplayerListAction(objdata);
                    if (window.instance) {
                        window.instance.$destroy();
                    }
                    window.instance = new PoiLayerConstructor({
                        data: {
                            list: objdata
                        }
                    });
                    window.instance.$mount();
                    divPoint3 = window.sgworld.Creator.createDivPoint('', {
                        lon: objdata.lon,
                        lat: objdata.lat,
                        height: 5
                    }, {
                        type: "custom",
                        offset: ["c", 20],
                        description: window.instance.$el,
                        near: 0,
                        far: 100000
                    });
                    return;
                }
                // 
            }
            // if (nPickFeature.id && nPickFeature.id.name.indexOf('YINJ') != -1) {
            //     divPoint3 && divPoint3.deleteObject();
            //     store.setPoplayerShowAction(false);
            //     store.setPoplayerListAction({});
            //     store.setPoplayerShowAction(true);
            //     let arr = nPickFeature.id.name.split('-');
            //     let objdata = {
            //         POITYPE: "YINJ",
            //         name: arr[2],
            //         depth: arr[3],
            //         type: arr[4],
            //         code: arr[5],
            //         location: arr[6],
            //         text: arr[7],
            //         areaCode: arr[8],
            //         lon: arr[9],
            //         lat: arr[10]
            //     }
            //     store.setPoplayerListAction(objdata);
            //     if (window.instance) {
            //         window.instance.$destroy();
            //     }
            //     window.instance = new PoiLayerConstructor({
            //         data: {
            //             list: objdata
            //         }
            //     });
            //     window.instance.$mount();
            //     divPoint3 = window.sgworld.Creator.createDivPoint('', {
            //         lon: objdata.lon,
            //         lat: objdata.lat,
            //         height: 5
            //     }, {
            //         type: "custom",
            //         offset: ["c", 20],
            //         description: window.instance.$el,
            //         near: 0,
            //         far: 100000
            //     });
            //     return;
            // }
            // else if (nPickFeature.id && nPickFeature.id.name.indexOf('QY') != -1) {
            //     divPoint3 && divPoint3.deleteObject();
            //     store.setPoplayerShowAction(false);
            //     store.setPoplayerListAction({});
            //     store.setPoplayerShowAction(true);
            //     let arr = nPickFeature.id.name.split('&');
            //     // console.log(arr);
            //     let objdata = {
            //         POITYPE: "QY",
            //         QYMC: arr[2],
            //         DZ: arr[3],
            //         BZDZ: arr[4],
            //         XYDM: arr[5],
            //         lon: arr[6],
            //         lat: arr[7],
            //     }
            //     store.setPoplayerListAction(objdata);
            //     if (window.instance) {
            //         window.instance.$destroy();
            //     }
            //     window.instance = new PoiLayerConstructor({
            //         data: {
            //             list: objdata
            //         }
            //     });
            //     window.instance.$mount();
            //     divPoint3 = window.sgworld.Creator.createDivPoint('', {
            //         lon: objdata.lon,
            //         lat: objdata.lat,
            //         height: 5
            //     }, {
            //         type: "custom",
            //         offset: ["c", 20],
            //         description: window.instance.$el,
            //         near: 0,
            //         far: 100000
            //     });
            //     return;
            // }
            else {
                // return;
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    } catch (e) { }
}

//加载三维图层
export function loadLayer(treeNode) {
    console.log('loadLayer',treeNode);
    let layer;
    switch (treeNode.sourceType) {
        case "tms":
            layer = sgworld.Creator.createImageryProvider(
                treeNode.name,
                "tms",
                {
                    id: treeNode.id,
                    url: treeNode.urls,
                    fileExtension: treeNode.img || "png",
                    enablePickFeatures: false,
                    alpha: treeNode.alpha,
                },
                "0",
                undefined,
                true,
                ""
            );
            return layer;
            break;
        case "local-map":
            // æ·»åŠ æœ¬åœ°åœ°å›¾
            if (treeNode.tms) {
                layer = sgworld.Creator.createImageryProvider(
                    treeNode.name,
                    "tms",
                    {
                        id: treeNode.id,
                        url: treeNode.urls,
                        fileExtension: treeNode.img || "png",
                        enablePickFeatures: false,
                        level: treeNode.Level,
                        minimumLevel: treeNode.minimumLevel,
                        maximumLevel: treeNode.maximumLevel,
                        minificationFilter: Cesium.TextureMinificationFilter.NEAREST_MIPMAP_LINEAR,
                        magnificationFilter: Cesium.TextureMinificationFilter.NEAREST_MIPMAP_LINEAR,
                        tilingScheme:
                            treeNode.tileType === "Geo"
                                ? new Cesium.GeographicTilingScheme()
                                : new Cesium.WebMercatorTilingScheme(),
                        alpha: treeNode.alpha,
                    },
                    "0",
                    treeNode.zIndex,
                    true,
                    ""
                );
            } else {
                layer = sgworld.Creator.createUrlTemplateImageryProvider(
                    treeNode.name,
                    {
                        id: treeNode.id,
                        url: `${treeNode.urls}/${treeNode.tile || "{z}/{x}/{y}"}.${treeNode.img || "png"
                            }`,
                        enablePickFeatures: false,
                        level: treeNode.Level,
                        minimumLevel: treeNode.minimumLevel,
                        maximumLevel: treeNode.maximumLevel,
                        tilingScheme:
                            treeNode.tileType === "Geo"
                                ? new Cesium.GeographicTilingScheme()
                                : new Cesium.WebMercatorTilingScheme(),
                        alpha: treeNode.alpha,
                    },
                    "0",
                    treeNode.zIndex,
                    true,
                    ""
                );
            }
            break;
        case "kml":
            // æ·»åŠ kml数据
            layer = sgworld.Creator.addKmlLayer(
                treeNode.name,
                {
                    id: treeNode.id,
                    url: treeNode.urls,
                },
                true
            );
            break;
        case "google":
            // æ·»åŠ è°·æ­Œåœ°å›¾
            layer = sgworld.Creator.createUrlTemplateImageryProvider(
                treeNode.name,
                {
                    id: treeNode.id,
                    url: treeNode.urls,
                    enablePickFeatures: false,
                    level: treeNode.Level,
                    minimumLevel: treeNode.minimumLevel,
                    maximumLevel: treeNode.maximumLevel,
                    alpha: treeNode.alpha,
                },
                "0",
                treeNode.zIndex,
                true,
                ""
            );
            break;
        case "arcgis":
            // arcgis地图
            layer = sgworld.Creator.createArcGisImageryLayer(
                treeNode.name,
                {
                    id: treeNode.id,
                    url: treeNode.urls,
                    enablePickFeatures: false,
                    level: treeNode.Level,
                    usePreCachedTilesIfAvailable: treeNode.GCJ02 ? false : true, // æ˜¯å¦ä½¿ç”¨æœåŠ¡çš„内置的切片方案，偏移纠正需要使用如下自定义的方案
                    tilingScheme: treeNode.GCJ02
                        ? sgworld.Core.getOffsetTilingScheme()
                        : undefined, // åç§»çº æ­£
                    minimumLevel: treeNode.minimumLevel,
                    maximumLevel: treeNode.maximumLevel,
                    alpha: treeNode.alpha,
                },
                "0",
                treeNode.zIndex,
                true,
                ""
            );
            return layer;
            break;
        case "mapbox":
            // mapbox地图
            layer = sgworld.Creator.createImageryProvider(
                treeNode.name,
                "MapBox",
                {
                    id: treeNode.id,
                    name: treeNode.name,
                    level: treeNode.Level,
                    enablePickFeatures: false,
                    mapId: treeNode.mapId,
                    minimumLevel: treeNode.minimumLevel,
                    maximumLevel: treeNode.maximumLevel,
                    alpha: treeNode.alpha,
                    accessToken:
                        treeNode.token ||
                        "pk.eyJ1IjoibWFyc2dpcyIsImEiOiJja2Fod2xlanIwNjJzMnhvMXBkMnNqcjVpIn0.WnxikCaN2KV_zn9tLZO77A",
                },
                "0",
                treeNode.zIndex,
                true,
                ""
            );
            break;
        case "tdmap":
            // å¤©åœ°å›¾
            layer = sgworld.Creator.createWebMapTileServerImageLayer(
                treeNode.name,
                {
                    id: treeNode.id,
                    url: treeNode.urls,
                    level: treeNode.Level,
                    minimumLevel: treeNode.minimumLevel,
                    maximumLevel: 18,
                    style: treeNode.style,
                    layer: treeNode.layer,
                    format: treeNode.format,
                    enablePickFeatures: false,
                    tileMatrixSetID: "tiff",
                    show: true,
                    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    alpha: treeNode.alpha,
                },
                "0",
                treeNode.zIndex,
                true,
                ""
            );
            return layer;
            break;

        case "yzsate":
            layer = sgworld.Creator.createWebMapTileServerImageLayer(
                treeNode.name,
                {
                    id: treeNode.id,
                    url: treeNode.urls,
                    layer: treeNode.layer,
                    enablePickFeatures: false,
                    show: true,
                    tileMatrixSetID: treeNode.ttileMatrixSetId
                        ? treeNode.ttileMatrixSetId
                        : "Sate_2019",
                    tilingScheme: new Cesium.WebMercatorTilingScheme({
                        rectangleSouthwestInMeters: new Cesium.Cartesian2(0, -229396.5),
                        rectangleNortheastInMeters: new Cesium.Cartesian2(
                            917580,
                            688193.5
                        ),
                        //rectangleSouthwestInMeters:new Cesium.Cartesian2(0,0) ,
                        // rectangleNortheastInMeters:new Cesium.Cartesian2(20037508.3427892, 20037508.3427892),
                        numberOfLevelZeroTilesX: 4,
                        numberOfLevelZeroTilesY: 4,
                        projection: new Cesium.GeographicProjection(),
                    }),
                },
                pID,
                undefined,
                treeNode.checked,
                ""
            );
            treeNode.id = layer.treeobj.id;
            break;
        case "yzmap":
            layer = sgworld.Creator.createWebMapTileServerImageLayer(
                treeNode.name,
                {
                    id: treeNode.id,
                    url: treeNode.urls,
                    layer: treeNode.layer,
                    enablePickFeatures: false,
                    show: true,
                },
                pID,
                undefined,
                treeNode.checked,
                ""
            );
            treeNode.id = layer.treeobj.id;
            break;

        case "yztile":
            layer = new YZWMS(treeNode);
            sgworld._Viewer.imageryLayers.addImageryProvider(layer);
            break;
        case "tdt_label":
            // å¤©åœ°å›¾ä¸‰ç»´æ³¨è®°
            layer = sgworld.Creator.GeoWTFS({
                token: treeNode.token || "c53eb074c3fcba5ac86103d4d711bbe8",
                url: treeNode.urls,
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
            });
            break;
        case "txmap":
            // è…¾è®¯åœ°å›¾
            layer = sgworld.Creator.createUrlTemplateImageryProvider(
                treeNode.name,
                {
                    id: treeNode.id,
                    url: treeNode.urls,
                    level: treeNode.Level,
                    enablePickFeatures: false,
                    minimumLevel: treeNode.minimumLevel,
                    maximumLevel: 18,
                    alpha: treeNode.alpha,
                    tilingScheme: sgworld.Core.getOffsetTilingScheme(), // åç§»çº æ­£
                    customTags: {
                        sx: (_imageryProvider, x) => {
                            return x >> 4;
                        },
                        sy: (_imageryProvider, _x, y, level) => {
                            return ((1 << level) - y) >> 4;
                        },
                    },
                },
                "0",
                treeNode.zIndex,
                true,
                ""
            );
            return layer;
            break;
        case "gdmap":
            // é«˜å¾·åœ°å›¾
            layer = sgworld.Creator.createUrlTemplateImageryProvider(
                treeNode.name,
                {
                    id: treeNode.id,
                    url: treeNode.urls,
                    enablePickFeatures: false,
                    level: treeNode.Level,
                    minimumLevel: treeNode.minimumLevel,
                    maximumLevel: 18,
                    tilingScheme: sgworld.Core.getOffsetTilingScheme(), // åç§»çº æ­£
                    alpha: treeNode.alpha,
                },
                "0",
                treeNode.zIndex,
                true,
                ""
            );
            return layer;
            break;
        case "bdmap":
            // ç™¾åº¦åœ°å›¾
            layer = sgworld.Creator.createImageryProvider(
                treeNode.name,
                "BaiduMap",
                {
                    id: treeNode.id,
                    level: treeNode.Level,
                    enablePickFeatures: false,
                    style: treeNode.style,
                    minimumLevel: treeNode.minimumLevel,
                    maximumLevel: treeNode.maximumLevel,
                    alpha: treeNode.alpha,
                },
                "0",
                treeNode.zIndex,
                true,
                ""
            );
            break;
        case "cesiumblack":
            // cesiumIon黑夜地图
            layer = sgworld.Creator.createImageryProvider(
                treeNode.name,
                "cesiumBlack",
                {
                    id: treeNode.id,
                    url: treeNode.urls,
                    flipXY: true,
                    enablePickFeatures: false,
                    level: treeNode.Level,
                    minimumLevel: treeNode.minimumLevel,
                    maximumLevel: treeNode.maximumLevel,
                    alpha: treeNode.alpha,
                },
                "0",
                treeNode.zIndex,
                true,
                ""
            );
            break;
        case "osm":
            // osm地图
            layer = sgworld.Creator.createImageryProvider(
                treeNode.name,
                "OpenStreetMap",
                {
                    id: treeNode.id,
                    url: treeNode.urls,
                    enablePickFeatures: false,
                    level: treeNode.Level,
                    minimumLevel: treeNode.minimumLevel,
                    maximumLevel: treeNode.maximumLevel,
                    alpha: treeNode.alpha,
                },
                "0",
                treeNode.zIndex,
                true,
                ""
            );
            break;
        case "wmts":
            // wmts影像
            layer = sgworld.Creator.createWebMapTileServerImageLayer(
                treeNode.name,
                {
                    id: treeNode.id,
                    url: treeNode.urls,
                    level: treeNode.Level,
                    style: treeNode.style,
                    layer: treeNode.layer,
                    enablePickFeatures: false,
                    format: treeNode.format,
                    tileMatrixSetID: treeNode.srs,
                    tilingScheme:
                        treeNode.tileType === "Geo"
                            ? new Cesium.GeographicTilingScheme()
                            : new Cesium.WebMercatorTilingScheme(),
                    show: true,
                    minimumLevel: treeNode.minimumLevel,
                    maximumLevel: treeNode.maximumLevel,
                    alpha: treeNode.alpha,
                },
                "0",
                treeNode.zIndex,
                true,
                ""
            );
            return layer;
            break;
        case "gis_wmts":
            // gisserver wmst影像
            layer = sgworld.Creator.createUrlTemplateImageryProvider(
                treeNode.name,
                {
                    id: treeNode.id,
                    url: Cesium.buildModuleUrl(
                        treeNode.urls + "/{z}/{x}/{reverseY}.png"
                    ),
                    enablePickFeatures: false,
                    level: treeNode.Level,
                    minimumLevel: treeNode.minimumLevel,
                    maximumLevel: treeNode.maximumLevel,
                    alpha: treeNode.alpha,
                },
                "0",
                treeNode.zIndex,
                true,
                ""
            );
            break;
        case "wmts_zj":
            // è¡Œåˆ—号差两倍的wmts
            var geotil = new Cesium.GeographicTilingScheme({
                rectangle: Cesium.Rectangle.MAX_VALUE,
            });
            if (treeNode.addLevel && treeNode.addLevel === 2) {
                geotil.positionToTileXY = function (position, level, result) {
                    level > 0 && level++;
                    var rectangle = this._rectangle;
                    if (!Cesium.Rectangle.contains(rectangle, position)) {
                        // outside the bounds of the tiling scheme
                        return undefined;
                    }

                    var xTiles = this.getNumberOfXTilesAtLevel(level);
                    var yTiles = this.getNumberOfYTilesAtLevel(level);

                    var xTileWidth = rectangle.width / xTiles;
                    var yTileHeight = rectangle.height / yTiles;

                    var longitude = position.longitude;
                    if (rectangle.east < rectangle.west) {
                        longitude += Cesium.Math.TWO_PI;
                    }

                    var xTileCoordinate =
                        ((longitude - rectangle.west) / xTileWidth) | 0;
                    if (xTileCoordinate >= xTiles) {
                        xTileCoordinate = xTiles - 1;
                    }

                    var yTileCoordinate =
                        ((rectangle.north - position.latitude) / yTileHeight) | 0;
                    if (yTileCoordinate >= yTiles) {
                        yTileCoordinate = yTiles - 1;
                    }

                    if (!Cesium.defined(result)) {
                        return new Cesium.Cartesian2(xTileCoordinate, yTileCoordinate);
                    }

                    result.x = xTileCoordinate;
                    result.y = yTileCoordinate;
                    return result;
                };
                geotil.tileXYToRectangle = function (x, y, level, result) {
                    level > 0 && level++;
                    var rectangle = this._rectangle;

                    var xTiles = this.getNumberOfXTilesAtLevel(level);
                    var yTiles = this.getNumberOfYTilesAtLevel(level);

                    var xTileWidth = rectangle.width / xTiles;
                    var west = x * xTileWidth + rectangle.west;
                    var east = (x + 1) * xTileWidth + rectangle.west;

                    var yTileHeight = rectangle.height / yTiles;
                    var north = rectangle.north - y * yTileHeight;
                    var south = rectangle.north - (y + 1) * yTileHeight;

                    if (!Cesium.defined(result)) {
                        result = new Cesium.Rectangle(west, south, east, north);
                    }

                    result.west = west;
                    result.south = south;
                    result.east = east;
                    result.north = north;
                    return result;
                };
            }
            layer = sgworld.Creator.createWebMapTileServerImageLayer(
                treeNode.name,
                {
                    id: treeNode.id,
                    url: treeNode.urls,
                    layer: treeNode.layer,
                    level: treeNode.Level,
                    minimumLevel: treeNode.minimumLevel,
                    maximumLevel: treeNode.maximumLevel,
                    style: "default",
                    tileMatrixSetID: "esritilematirx",
                    format: "image/png",
                    tilingScheme: geotil,
                    addLevel: treeNode.addLevel || 1, //层级加一
                    enablePickFeatures: false,
                    show: true,
                    alpha: treeNode.alpha,
                },
                "0",
                treeNode.zIndex,
                true,
                ""
            );
            break;
        case "wms":
        case "wmsc":
            // wms数据
            var parameters = {
                service: "WMS",
                format: "image/png",
                transparent: true,
            };
            if (treeNode.removeNullValue) {
                if (treeNode.nullvalue) {
                    treeNode.nullvalue = treeNode.nullvalue.replace("rgb(", "");
                    treeNode.nullvalue = treeNode.nullvalue.replace(")", "");
                }
                parameters.nullvalue = sgworld.Core.defaultValue(
                    treeNode.nullvalue,
                    "0,0,0"
                );
                parameters.nulltolerance = sgworld.Core.defaultValue(
                    treeNode.nulltolerance,
                    0
                );
            }
            treeNode.token && (treeNode.urls += "?token=" + treeNode.token);
            if (treeNode.sourceType === "wmsc") {
                layer = sgworld.Creator.createCacheImageryProvider(
                    treeNode.name,
                    {
                        id: treeNode.id,
                        url: treeNode.urls || "",
                        layers: treeNode.layer || "",
                        level: treeNode.Level,
                        enablePickFeatures: false,
                        cacheUrl: treeNode.cacheUrl || treeNode.urls,
                        fileExtension: treeNode.fileExtension,
                        cacheMaxLevel: treeNode.cacheMaxLevel || 16,
                        alpha: treeNode.alpha,
                    },
                    "0",
                    treeNode.zIndex,
                    treeNode.checked,
                    ""
                );
            } else {
                layer = sgworld.Creator.createImageryProvider(
                    treeNode.name,
                    "wms",
                    {
                        id: treeNode.id,
                        url: treeNode.urls,
                        layers: treeNode.layer || "",
                        level: treeNode.Level,
                        minimumLevel: treeNode.minimumLevel,
                        maximumLevel: treeNode.maximumLevel,
                        enablePickFeatures: false,
                        parameters: parameters,
                        alpha: treeNode.alpha,
                    },
                    "0",
                    treeNode.zIndex,
                    true,
                    ""
                );
            }
            break;
        case "wmse":
            layer = sgworld.Creator.createImageryProvider(
                treeNode.name,
                "wms",
                {
                    id: treeNode.id,
                    url: treeNode.urls,
                    level: treeNode.Level,
                    minimumLevel: treeNode.minimumLevel,
                    maximumLevel: treeNode.maximumLevel,
                    enablePickFeatures: false,

                    layers: treeNode.layer || "",
                    alpha: treeNode.alpha,
                    parameters: {
                        format: "image/png",
                        transparent: true,
                    },
                },
                "0",
                undefined,
                true,
                ""
            );
            break;
        case "wfs":
            // wfs数据
            layer = sgwfs.CreateWfs(treeNode.class, treeNode);
            break;
        case "geojson":
            if (treeNode.class === "point") {
                treeNode.disableDepthTestDistance === "Infinity" &&
                    (treeNode.disableDepthTestDistance = Number.POSITIVE_INFINITY);

                de = {
                    id: treeNode.id,
                    fillColor: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
                    color: sgworld.Core.defaultValue(treeNode.imageColor, undefined),
                    outlineColor: sgworld.Core.defaultValue(
                        treeNode.outlineColor,
                        "#ffffff"
                    ),
                    backgroundColor: sgworld.Core.defaultValue(
                        treeNode.backgroundColor,
                        "#ffffff"
                    ),
                    heightReference: sgworld.Core.defaultValue(
                        treeNode.heightReference,
                        0
                    ),
                    pointHeight: sgworld.Core.defaultValue(
                        treeNode.pointHeight,
                        undefined
                    ),
                    near: sgworld.Core.defaultValue(treeNode.near, 0),
                    far: sgworld.Core.defaultValue(treeNode.far, 99999999999),
                    bold: treeNode.bold,
                    italic: treeNode.italic,
                    showBackground: treeNode.showBackground,
                    outlineWidth: sgworld.Core.defaultValue(treeNode.outlineWidth, 1),
                    text: treeNode.text,
                    image: treeNode.image,
                    font_size: treeNode.size,
                    font_family: sgworld.Core.defaultValue(
                        treeNode.font_family,
                        "微软雅黑"
                    ),
                    disableDepthTestDistance: sgworld.Core.defaultValue(
                        treeNode.disableDepthTestDistance,
                        undefined
                    ),
                    labelData: treeNode.labelData,
                    imageData: treeNode.imageData,
                };

                if (
                    treeNode.text &&
                    treeNode.image &&
                    !treeNode.labelData &&
                    !treeNode.imageData
                ) {
                    de.labelData = {
                        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                        pixelOffset: new Cesium.Cartesian2(20, 0),
                    };
                    de.imageData = {
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        pixelOffset: new Cesium.Cartesian2(0, 0),
                    };
                }
                layer = sgworld.Creator.createLabelPointGeoJsonFeatureLayer(
                    treeNode.name,
                    treeNode.urls,
                    de,
                    "0",
                    treeNode.checked
                );
            } else if (treeNode.class === "polyline") {
                de = {
                    id: treeNode.id,
                    layertype: "polylinelayer",
                    material: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
                    outlineColor: sgworld.Core.defaultValue(
                        treeNode.outlineColor,
                        "#ffffff"
                    ),
                    outlineWidth: sgworld.Core.defaultValue(treeNode.outlineWidth, 0),
                    height: sgworld.Core.defaultValue(treeNode.height, undefined),
                    width: sgworld.Core.defaultValue(treeNode.width, 2),
                    clampToGround: sgworld.Core.defaultValue(
                        treeNode.clampToGround,
                        true
                    ),
                    classificationType: treeNode.classificationType,
                    dash: sgworld.Core.defaultValue(treeNode.dash, false),
                    dashLength: sgworld.Core.defaultValue(treeNode.dashLength, 20),
                    gapColor: sgworld.Core.defaultValue(
                        treeNode.gapColor,
                        "rgba(0,0,0,0)"
                    ),
                    near: sgworld.Core.defaultValue(treeNode.near, 0),
                    far: sgworld.Core.defaultValue(treeNode.far, Infinity),
                };

                layer = sgworld.Creator.createPolylineGeoJsonFeatureLayer(
                    treeNode.name,
                    treeNode.urls,
                    de,
                    "0",
                    treeNode.checked
                );
            } else if (treeNode.class === "polylineVolume") {
                de = {
                    id: treeNode.id,
                    material: sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
                    slttype: "0",
                    number: "4",
                    exradius: "1",
                    inradius: "1",
                    orth_width: "2",
                    orth_height: "2",
                    radius: sgworld.Core.defaultValue(treeNode.radius, 5),
                    cornerType: "0",
                    heightReference: "0",
                    height: sgworld.Core.defaultValue(treeNode.lineHeight, 0),
                    near: "0",
                    far: "99999999999",
                    radiusScale: treeNode.radiusScale,
                    connect: true,
                };
                layer = sgworld.Creator.createpolylineVolumeGeojsonPrimitiveLayer(
                    treeNode.name,
                    treeNode.urls,
                    de,
                    "0",
                    true,
                    function (data) {
                        if (treeNode.flow) {
                            let lines = data.entities.values;
                            lines.forEach((line) => {
                                line.polylineVolume.material =
                                    sgworld.Core.getTrailLinkMaterial(
                                        sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
                                        "../static/images/smoke.png",
                                        9000
                                    );
                            });
                        }
                    }
                );
            } else if (treeNode.class === "model") {
                de = {
                    id: treeNode.id,
                    collect: 0,
                    uri: sgworld.Core.defaultValue(treeNode.model, ""),
                    file: "",
                    color: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
                    scale: sgworld.Core.defaultValue(treeNode.scale, 1),
                    heightReference: 0,
                    height: sgworld.Core.defaultValue(treeNode.height, 0),
                    near: "0",
                    far: "99999999999",
                };
                layer = sgworld.Creator.createModelPointGeoJsonFeatureLayer(
                    treeNode.name,
                    treeNode.urls,
                    de,
                    "0",
                    true
                );
            } else if (treeNode.class === "polygon") {
                treeNode.disableDepthTestDistance === "Infinity" &&
                    (treeNode.disableDepthTestDistance = Number.POSITIVE_INFINITY);

                de = {
                    id: treeNode.id,
                    material: sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
                    height: sgworld.Core.defaultValue(treeNode.height, 0),
                    outlineColor: sgworld.Core.defaultValue(
                        treeNode.outlineColor,
                        "#ff0000"
                    ),
                    extrudedHeight: sgworld.Core.defaultValue(
                        treeNode.extrudedHeight,
                        0
                    ),
                    outlineWidth: sgworld.Core.defaultValue(treeNode.outlineWidth, 0),
                    outline: sgworld.Core.defaultValue(treeNode.outline, true),
                    clampToGround: sgworld.Core.defaultValue(
                        treeNode.clampToGround,
                        treeNode.extrudedHeight === undefined &&
                        treeNode.height === undefined
                    ),
                    classificationType: treeNode.classificationType,
                    near: sgworld.Core.defaultValue(treeNode.near, 0),
                    far: sgworld.Core.defaultValue(treeNode.far, Infinity),

                    text: treeNode.text,
                    font: sgworld.Core.defaultValue(treeNode.font, "微软雅黑"),
                    labelNear: treeNode.labelNear,
                    labelFar: treeNode.labelFar,
                    fontSize: sgworld.Core.defaultValue(treeNode.size, "18px"),
                    italic: treeNode.italic,
                    bold: treeNode.bold,
                    pixelOffset: new Cesium.Cartesian2(
                        sgworld.Core.defaultValue(treeNode.offsetX, 0),
                        sgworld.Core.defaultValue(treeNode.offsetY, 0)
                    ),
                    labelOutlineWidth: 2,
                    disableDepthTestDistance: treeNode.disableDepthTestDistance,

                    water: treeNode.water,
                };
                layer = sgworld.Creator.createPolygonGeoJsonFeatureLayer(
                    treeNode.name,
                    treeNode.urls,
                    de,
                    "0",
                    treeNode.checked
                );
            }
            break;
        case "pathLayer":
            layer = sgworld.Creator.createPathLayer({
                id: treeNode.id,
                url: treeNode.url,
                color: treeNode.color || "#0033FF", //线的颜色
                width: treeNode.width || 4.0, //线的宽度
                pointColor: treeNode.pointColor || "#FFFFFF", //移动点的颜色
                speed: treeNode.speed || 5,
                far: treeNode.far || 5000,
            });
            break;
        case "vector": {
            let urls = {
                url: treeNode.urls,
                layer: treeNode.layer,
                srs: treeNode.srs,
            };
            if (
                treeNode.class === "point" ||
                treeNode.class === "label" ||
                treeNode.class === "image"
            ) {
                treeNode.disableDepthTestDistance === "Infinity" &&
                    (treeNode.disableDepthTestDistance = Number.POSITIVE_INFINITY);
                if (treeNode.style) {
                    // de = getVectorStyleFromSG(treeNode, treeNode.style);
                } else {
                    de = {
                        id: treeNode.id,
                        level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
                        level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
                        fillColor: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
                        color: sgworld.Core.defaultValue(
                            treeNode.imageColor,
                            undefined
                        ),
                        outlineColor: sgworld.Core.defaultValue(
                            treeNode.outlineColor,
                            "#ffffff"
                        ),
                        backgroundColor: sgworld.Core.defaultValue(
                            treeNode.backgroundColor,
                            "#ffffff"
                        ),
                        heightReference: sgworld.Core.defaultValue(
                            treeNode.heightReference,
                            0
                        ),
                        pointHeight: sgworld.Core.defaultValue(
                            treeNode.pointHeight,
                            undefined
                        ),
                        near: sgworld.Core.defaultValue(treeNode.near, 0),
                        far: sgworld.Core.defaultValue(treeNode.far, 99999999999),
                        bold: treeNode.bold,
                        italic: treeNode.italic,
                        showBackground: treeNode.showBackground,
                        outlineWidth: sgworld.Core.defaultValue(
                            treeNode.outlineWidth,
                            1
                        ),
                        text: treeNode.text,
                        image: treeNode.image,
                        font_size: treeNode.size,
                        font_family: sgworld.Core.defaultValue(
                            treeNode.font_family,
                            "微软雅黑"
                        ),
                        disableDepthTestDistance: sgworld.Core.defaultValue(
                            treeNode.disableDepthTestDistance,
                            undefined
                        ),
                        labelData: treeNode.labelData,
                        imageData: treeNode.imageData,
                    };
                }

                if (
                    treeNode.text &&
                    treeNode.image &&
                    !treeNode.labelData &&
                    !treeNode.imageData
                ) {
                    de.labelData = {
                        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                        pixelOffset: new Cesium.Cartesian2(20, 0),
                    };
                    de.imageData = {
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        pixelOffset: new Cesium.Cartesian2(0, 0),
                    };
                }
                urls.upperLevelLimit = de.level_max;
                urls.lowerLevelLimit = de.level_min;
                layer = sgworld.Creator.createLabelImageGeoJsonFeatureLayerProvider(
                    treeNode.name,
                    urls,
                    de,
                    "0",
                    treeNode.checked,
                    function () { }
                );
            } else if (treeNode.class === "polylineVolume") {
                de = {
                    id: treeNode.id,
                    level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
                    level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
                    material: sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
                    slttype: "0",
                    number: "4",
                    exradius: "1",
                    inradius: "1",
                    orth_width: "2",
                    orth_height: "2",
                    radius: sgworld.Core.defaultValue(treeNode.radius, 0.5),
                    cornerType: "0",
                    heightReference: "0",
                    height: sgworld.Core.defaultValue(treeNode.height, 0),
                    near: sgworld.Core.defaultValue(treeNode.near, 0),
                    far: sgworld.Core.defaultValue(treeNode.far, 99999999999),
                    radiusScale: treeNode.radiusScale,
                };
                urls.upperLevelLimit = de.level_max;
                urls.lowerLevelLimit = de.level_min;
                layer = sgworld.Creator.createVolumeGeoJsonFeatureLayerProvider(
                    treeNode.name,
                    urls,
                    de,
                    "0",
                    treeNode.checked,
                    function () { }
                );
            } else if (treeNode.class === "polyline") {
                de = {
                    id: treeNode.id,
                    layertype: "polylinelayer",
                    level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
                    level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
                    material: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
                    outlineColor: sgworld.Core.defaultValue(
                        treeNode.outlineColor,
                        "#ffffff"
                    ),
                    outlineWidth: sgworld.Core.defaultValue(treeNode.outlineWidth, 0),
                    height: sgworld.Core.defaultValue(treeNode.height, undefined),
                    width: sgworld.Core.defaultValue(treeNode.width, 2),
                    clampToGround: sgworld.Core.defaultValue(
                        treeNode.clampToGround,
                        true
                    ),
                    classificationType: treeNode.classificationType,
                    dash: sgworld.Core.defaultValue(treeNode.dash, false),
                    dashLength: sgworld.Core.defaultValue(treeNode.dashLength, 20),
                    gapColor: sgworld.Core.defaultValue(
                        treeNode.gapColor,
                        "rgba(0,0,0,0)"
                    ),
                    near: sgworld.Core.defaultValue(treeNode.near, 0),
                    far: sgworld.Core.defaultValue(treeNode.far, Infinity),
                };
                urls.upperLevelLimit = de.level_max;
                urls.lowerLevelLimit = de.level_min;

                layer =
                    sgworld.Creator.createPrimitivePolylineVectorGeoJsonFeatureLayerProvider(
                        treeNode.name,
                        urls,
                        de,
                        "0",
                        treeNode.checked,
                        function () { }
                    );
            } else if (treeNode.class === "polygon") {
                de = {
                    id: treeNode.id,
                    layertype: "polygonlayer",
                    level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
                    level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
                    material: sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
                    heightReference: "1",
                    height: sgworld.Core.defaultValue(treeNode.height, 0),
                    extrudedHeight: sgworld.Core.defaultValue(
                        treeNode.extrudedHeight,
                        0
                    ),
                    extrudedHeightReference: "1",
                    clampToGround: sgworld.Core.defaultValue(
                        treeNode.clampToGround,
                        false
                    ),
                    classificationType: treeNode.classificationType,
                    near: sgworld.Core.defaultValue(treeNode.near, 0),
                    far: sgworld.Core.defaultValue(treeNode.far, Infinity),
                };
                urls.upperLevelLimit = de.level_max;
                urls.lowerLevelLimit = de.level_min;
                layer =
                    sgworld.Creator.createGeoJsonFeatureLayerProviderOptimization(
                        treeNode.name,
                        urls,
                        de,
                        "0",
                        treeNode.checked,
                        function () { }
                    );
            } else if (treeNode.class === "model") {
                de = {
                    id: treeNode.id,
                    level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
                    level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
                    collect: 0,
                    uri: sgworld.Core.defaultValue(treeNode.model, ""),
                    file: "",
                    color: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
                    scale: sgworld.Core.defaultValue(treeNode.scale, 1),
                    heightReference: 0,
                    height: sgworld.Core.defaultValue(treeNode.height, 0),
                    near: "0",
                    far: "99999999999",
                };
                //模型点
                urls.upperLevelLimit = de.level_max;
                urls.lowerLevelLimit = de.level_min;
                layer = sgworld.Creator.createModelGeoJsonFeatureLayerProvider(
                    treeNode.name,
                    urls,
                    de,
                    "0",
                    treeNode.checked,
                    function () { }
                );
            }
            layer && (treeNode.id = layer.treeobj.id);
            break;
        }
        case "terrain":
            layer = sgworld.Creator.createTerrain(
                treeNode.name,
                {
                    id: treeNode.id,
                    requestVertexNormals: true,
                    url: treeNode.urls,
                },
                "0",
                true,
                ""
            );
            break;
        case "sgsterrain":
            layer = sgworld.Creator.sfsterrainprovider(
                treeNode.name,
                {
                    id: treeNode.id,
                    layerName: treeNode.layer,
                    requestVertexNormals: true,
                    url: treeNode.urls || "",
                    token: treeNode.token,
                    cacheUrl: treeNode.cacheUrl,
                    cacheLevel: treeNode.cacheLevel,
                },
                "0",
                true,
                ""
            );
            break;
        case "sgsterrain7.1":
            layer = sgworld.Creator.sfsterrainprovider71(
                treeNode.name,
                {
                    id: treeNode.id,
                    layerName: treeNode.layer,
                    requestVertexNormals: true,
                    url: treeNode.urls,
                    token: treeNode.token,
                    cacheUrl: treeNode.cacheUrl,
                    cacheLevel: treeNode.cacheLevel,
                },
                "0",
                true,
                ""
            );
            break;
        case "arcgisterrain":
            layer = sgworld.Creator.createArcGISTerrain(
                treeNode.name,
                {
                    id: treeNode.id,
                    requestVertexNormals: true,
                    url: treeNode.urls,
                },
                "0",
                true,
                ""
            );
            break;
        case "CesiumGlobeTerrain":
            layer = sgworld.Creator.createCesiumTerrain(
                treeNode.name,
                {
                    id: treeNode.id,
                    requestVertexNormals: true,
                },
                "0",
                true,
                ""
            );
            break;
        case "b3dm":
            layer = sgworld.Creator.create3DTilesets(
                treeNode.name,
                treeNode.urls,
                {
                    id: treeNode.id,
                    Level: treeNode.Level,
                    maximumScreenSpaceError:
                        treeNode.maximumScreenSpaceError &&
                        parseInt(treeNode.maximumScreenSpaceError),
                    maximumMemoryUsage:
                        treeNode.maximumMemoryUsage &&
                        parseInt(treeNode.maximumMemoryUsage),
                    geometricError:
                        treeNode.geometricError && parseInt(treeNode.geometricError),
                },
                {
                    groundCenter: treeNode.Center,
                    groundheight: treeNode.modelHeight,
                    heading: treeNode.heading,
                    pitch: treeNode.pitch,
                    roll: treeNode.roll,
                    effects: treeNode.effects || false,
                    effectsMaxHeight: treeNode.effectsMaxHeight || 150,
                    colors: treeNode.alpha
                        ? "rgba(255,255,255," + treeNode.alpha + ")"
                        : treeNode.color || undefined,
                },
                "0",
                true
            );
            return layer;
            break;
        case "s3m":
            layer = sgworld.Creator.createS3MLayer(
                treeNode.urls,
                sgworld._Viewer.scene,
                function () { }
            );
            break;
        case "gltf":
            var position = [treeNode.lon, treeNode.lat, treeNode.height];
            layer = sgworld.Creator.createModel(
                position,
                treeNode.urls,
                {
                    id: treeNode.id,
                    scale: treeNode.scale || 1,
                    heading: treeNode.heading,
                    pitch: treeNode.pitch,
                    roll: treeNode.roll,
                },
                "0",
                treeNode.name,
                ""
            );
            break;
        case "SimpleGraphic":
            treeNode.type = treeNode.class;
            layer = sgworld.Creator.SimpleGraphic.addFeature(treeNode);
            break;
        case "videoPolygon":
            layer = sgworld.Creator.addVideoPolygon(treeNode.positions, {
                url: treeNode.url,
                angle: treeNode.angle,
            });
            break;
        case "MilitaryPlotting":
            if (!treeNode.feature.id) {
                treeNode.feature.id = treeNode.id;
            }
            if (!treeNode.feature.name) {
                treeNode.feature.name = treeNode.name;
            }
            layer = sgworld.Creator.MilitaryPlotting.addFeature(treeNode.feature);
            break;
        case "ParticleEffect":
            layer = sgworld.Analysis.createParticleEffect(
                treeNode.name,
                treeNode.position,
                {
                    translation: Cesium.Cartesian3.fromElements(0, 0, 0), //平移
                }
            );
            layer.name = treeNode.name;
            break;
        case "FlowField":
            layer = sgworld.Creator.createTrailLine(
                treeNode.positions,
                treeNode.style
            );
            layer.boundingSphere = Cesium.BoundingSphere.fromPoints(
                treeNode.positions
            );

            break;
        case "MobileWall":
            layer = sgworld.Creator.createTrailLineWall(
                treeNode.LineInterpolation.positions,
                treeNode.style
            );
            layer.boundingSphere = Cesium.BoundingSphere.fromPoints(
                treeNode.LineInterpolation.positions
            );
            break;
        case "link":
            layer = sgworld.Creator.createLinkPro(
                sgworld.Core.toDegrees(treeNode.posisitons[0]),
                sgworld.Core.toDegrees(treeNode.posisitons[1]),
                {
                    clampToGround: true,
                }
            );
            break;
        case "DiffusionSource":
            layer = sgworld.Analysis.createMultiCircleScan(
                treeNode.position,
                treeNode.maxRadius,
                treeNode.maxRadius.color,
                3000,
                true
            );
            break;
        case "RiskDiffusion":
        case "CircularDiffusion":
            layer = sgworld.Analysis.createCircleScan(
                treeNode.position,
                treeNode.maxRadius,
                treeNode.color,
                3000,
                true
            );
            break;
        case "FanDiffusion":
            layer = sgworld.Analysis.createSectorScan(
                treeNode.position,
                treeNode.distance,
                "#ff0000",
                60,
                treeNode.angle,
                true,
                4000,
                true
            );
            break;
        case "RadarMask":
            layer = sgworld.Creator.createRectangularSensor(
                treeNode.position,
                treeNode.cylinder
            );
            break;
        case "DynamicSatellite":
            let dtwxzsData = sgworld.Creator.createConeRadar(treeNode.position, {
                color: "#7b9ef7",
                radius: 200000,
            });
            let weixin = sgworld.Creator.createModel(
                treeNode.position,
                window.SmartEarthRootUrl + "Workers/Model/weixin.gltf",
                { scale: 15 },
                "0",
                "卫星"
            );
            layer = { dtwxzsData, weixin };
            layer.sourceType = "DynamicSatellite";
            break;
        case "excavate":
            var position = [treeNode.lon, treeNode.lat, treeNode.height];
            layer = sgworld.Creator.createModel(
                position,
                treeNode.urls,
                {
                    id: treeNode.id,
                    scale: treeNode.scale || 1,
                },
                pID,
                treeNode.name,
                ""
            );
            treeNode.id = layer.treeobj.id;
            break;
    }
    return layer
}

export function clearLayerByTypeId(type) {
    if (_GLOBAL.layers[type]) {
        _GLOBAL.layers[type].forEach(item => {
            item && item.deleteObject()
        });
        _GLOBAL.layers[type] = [];
    }
}

export function clearLayerByTypeIdArr(arr) {
    if (arr.length) {
        arr.forEach(item => {
            clearLayerByTypeId(item);
        })
    }
}

 src/utils/store2.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,174 @@
const store = {
    /**地址页面 */
    locationCollection: {
        show: false
    },
    setLocationCollectionShow(val) {
        this.locationCollection.show = val;
    },
    /**设置页面 */
    settingPanel: {
        show: false
    },
    setSettingPanelShow(val) {
        this.settingPanel.show = val;
    },
    /**统计页面 */
    statisticsPanel: {
        show: false
    },
    setStatisticsPanelShow(val) {
        this.statisticsPanel.show = val;
    },
    /**窨井统计 */
    manholeStatistics: {
        show: false
    },
    setManholeStatisticsShow(val) {
        this.manholeStatistics.show = val;
    },
    /**摄像头统计 */
    videoStatistics: {
        show: false
    },
    setVideoStatisticsShow(val) {
        this.videoStatistics.show = val;
    },
    /*右上角菜单*/
    MenuList: {
        show: false
    },
    setMenuListShow(val) {
        this.MenuList.show = val;
    },
    /**图层页面 */
    layerPanel: {
        show: false
    },
    setLayerPanelShow(val) {
        this.layerPanel.show = val;
    },
    /**漫游面板 */
    roamPanel: {
        show: false
    },
    setRoamPanelShow(val) {
        this.roamPanel.show = val;
    },
    /**复位快捷方式 */
    resetLink: {
        show: true
    },
    setResetLinkShow(val) {
        this.resetLink.show = val;
    },
    /**指北针快捷方式 */
    pointLink: {
        show: true
    },
    setPointLinkShow(val) {
        this.pointLink.show = val;
    },
    /**全屏快捷方式 */
    fullScreen: {
        show: false
    },
    setFullScreenShow(val) {
        this.fullScreen.show = val;
    },
    /**收藏快捷方式 */
    favorite: {
        show: false
    },
    setFavoriteShow(val) {
        this.favorite.show = val;
    },
    /**添加收藏页面 */
    addFavorite: {
        show: false
    },
    setAddFavoriteShow(val) {
        this.addFavorite.show = val;
    },
    /**搜索框 */
    searchPanel: {
        show: true,
    },
    setSearchPanelShow(val) {
        this.searchPanel.show = val;
    },
    Poplayer: {
        list: {},
        show: false
    },
    setPoplayerListAction(newValue) {
        this.Poplayer.list = newValue
    },
    setPoplayerShowAction(newValue) {
        this.Poplayer.show = newValue
    },
    /**
     * ä¸“题图层选择情况
     */
    thematicLayer: {
        itemId: ''
    },
    setThematicLayerItemId(val) {
        this.thematicLayer.itemId = val;
    },
    /**
     * å›¾å±‚æ ‘
     */
    layerTree: {
        show: false
    },
    setLayerTreeShow(val) {
        this.layerTree.show = val;
    },
    /**
    * åœŸåœ°ç®¡ç†
    */
    tdglInfo: {
        flag: false,
        show: false,
        sliderShow: false,
        alpha: 1,
        info: {}
    },
    setAlpha(val) {
        this.tdglInfo.alpha = val;
    },
    setSliderShow(val) {
        this.tdglInfo.sliderShow = val;
    },
    setTdglFlag(val) {
        this.tdglInfo.flag = val;
    },
    setTdglShow(val) {
        this.tdglInfo.show = val;
    },
    setTdlgInfo(val) {
        this.tdglInfo.info = val;
    },
    /**
    * åŽ†å²å½±åƒ
    */
    history: {
        show: false,
    },
    setHistoryShow(val) {
        this.history.show = val;
    },
    qiyeJsonInfo: {},
    /*
        åŸºç¡€å›¾å±‚选择情况
    */
    basicMapChecked: {
        val: "",
    },
    setBasicMap(val) {
        this.basicMapChecked.val = val;
    }
};

export default store;

 src/utils/ztt2.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,21 @@
const ZTTitem = [
    {
        id: "shipinjiankong",
        name: "视频监控",
        active: false,
        src: require("@/assets/img/layer/shipinjiankong.png"),
    },
    {
        id: "qiyexinxi",
        name: "企业信息",
        active: false,
        src: require("@/assets/img/layer/qiyefenbu.png"),
    },
    {
        id: "shizhengganti",
        name: "市政杆体",
        active: false,
        src: require("@/assets/img/layer/shizhengganti.png"),
    },
]
export default ZTTitem

 static/json/layer.js

@@ -365,7 +365,7 @@
                "id": "chengshiguihua_dikuaibianhao_tms",
                "name": "亦庄新城规划图",
                "sourceType": "local-map",
                "urls": "https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms",
                "urls": "https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/",
                "tile": "{z}/{x}/{y}",
                "tileType": "Mercator",
                "img": "jpeg",
@@ -563,7 +563,7 @@
        },
        {
            "id": "ludenggan",
            "sourceType": "cluster",
            "sourceType": "ldgcluster",
            "alpha": 1,
            "name": "路灯杆 ",
            "class": "point",
@@ -588,7 +588,7 @@
        },
        {
            "id": "lumingpaigan",
            "sourceType": "cluster",
            "sourceType": "ldgcluster",
            "alpha": 1,
            "name": "路名牌杆",
            "class": "point",

 static/json/layers.json

@@ -334,7 +334,7 @@
                    "children": [
                        {
                            "id": "ludenggan",
                            "sourceType": "cluster",
                            "sourceType": "ldgcluster",
                            "alpha": 1,
                            "name": "路灯杆 ",
                            "class": "point",