@go-home-early/go-home-early98 0.3.1 → 0.3.2

package/src/packages/Cesium/index.vue

@@ -0,0 +1,3830 @@
+<template>
+  <div class="cesium">
+    <div :id="id" :style="{ height: height }" v-loading="loading" />
+    <!-- 导航工具 -->
+    <div v-if="showNavigation" class="navigation-container">
+      <!-- 指北针 -->
+      <div class="navigation-item">
+        <div :style="{ transform: `rotateZ(${360 - cameraInfo.heading}deg)` }" class="compass-outer"></div>
+        <div class="compass-inner">
+          <div class="compass-orientation">{{ compassOrientation }}</div>
+          <div class="compass-angle">{{ parseInt(cameraInfo.heading) }}°</div>
+        </div>
+      </div>
+      <!-- 2d/3d地图模式切换 -->
+      <div @click="changeMapMode" class="map-action-container map-mode">{{ is3D ? '2D' : '3D' }}</div>
+      <!-- 放大缩小 -->
+      <div class="widget-zoom">
+        <div @click="handleZoomIn" class="map-action-container">
+          <img src="./imgs/add-off.png" />
+        </div>
+        <div @click="handleZoomOut" class="map-action-container">
+          <img src="./imgs/reduce-off.png" />
+        </div>
+      </div>
+      <!-- 底图 -->
+      <el-popover :append-to-body="false" placement="left">
+        <div class="base-maps">
+          <div class="base-map-tdt">
+            <div class="street-selector">
+              <el-checkbox @change="changeStreetSelector" v-model="streetSelector">开启路网</el-checkbox>
+            </div>
+            <div class="base-map-txt">卫星地图-天地图</div>
+          </div>
+        </div>
+        <div slot="reference" class="map-switch">
+          <div class="img-satellite"></div>
+        </div>
+      </el-popover>
+    </div>
+    <Popup ref="cesiumPopupRef" v-if="popupVisible" :show-popup="popupVisible" :popup-data="popupData"
+      :popup-position="popupPosition" @close-popup="closePopup" />
+
+    <el-dialog title="定位" :visible.sync="locationDialogVisible" append-to-body top="0" width="800px"
+      :custom-class="'c-dialog c-dialog-no-title c-dialog-mini'">
+      <LocationDialog @flyToPoint="flyToPoint" />
+    </el-dialog>
+
+    <el-dialog title="剖面" :visible.sync="poumianDialogVisible" append-to-body top="10%" width="1000px"
+      :custom-class="'c-dialog c-dialog-no-title c-dialog-mini'">
+      <PoumianDialog :params="poumianDialogParams" :is-cesium="false" />
+    </el-dialog>
+
+        <!-- 后台管理坐标采集框 -->
+    <div class="coordinate-collection" v-if="isShowCoordinate">
+      <div v-if="dataState == 'update' || dataState == 'add'" class="title">坐标采集框</div>
+      <div v-else class="title">坐标</div>
+      <div v-if="dataState == 'update' || dataState == 'add'" class="btn-box">
+        <div v-if="dratTypeArr.includes('Point')" class="btn-item" :class="[btnSelectIndex == 0 ? 'btn-item-click' : '']" @click="drawBtnClick(0)">
+          <img src="./imgs/point.png" alt="" />
+        </div>
+        <div v-if="dratTypeArr.includes('LineString')" class="btn-item" :class="[btnSelectIndex == 1 ? 'btn-item-click' : '']" @click="drawBtnClick(1)">
+          <img src="./imgs/line.png" alt="" />
+        </div>
+        <div v-if="dratTypeArr.includes('Polygon')" class="btn-item" :class="[btnSelectIndex == 2 ? 'btn-item-click' : '']" @click="drawBtnClick(2)">
+          <img src="./imgs/polygon.png" alt="" />
+        </div>
+        <div class="btn-item" :class="[btnSelectIndex == 3 ? 'btn-item-click' : '']" @click="deleteMangLayerClick">
+          <img src="./imgs/map-delete.png" alt="" />
+        </div>
+      </div>
+      <el-form ref="positioningForm" :model="positioningData" label-width="60px" label-position="left" class="coordinate-form">
+        <el-form-item label="经度" prop="longitude" :rules="{
+            required: true,
+            message: '请输入经度',
+            trigger: 'blur',
+          }">
+          <div v-if="dataState == 'details'">
+            {{ handleCoordinateLength(positioningData.longitude) }}
+          </div>
+          <el-input-number v-else v-model.trim="positioningData.longitude" style="width: 100%" placeholder="请输入经度" size="small" :controls="false" />
+        </el-form-item>
+        <el-form-item v-if="!dratTypeArr.includes('Point') && btnSelectIndex != 0" label="至东经" prop="longitudeEnd">
+          <el-input-number v-if="false" v-model.trim="positioningData.longitudeEnd" style="width: 100%" placeholder="请输入" :controls="false" />
+          <div v-else>
+            {{ handleCoordinateLength(positioningData.longitudeEnd) }}
+          </div>
+        </el-form-item>
+        <el-form-item label="纬度" prop="latitude" :rules="{
+            required: true,
+            message: '请输入纬度',
+            trigger: 'blur',
+          }">
+          <div v-if="dataState == 'details'">
+            {{ handleCoordinateLength(positioningData.latitude) }}
+          </div>
+          <el-input-number v-else v-model.trim="positioningData.latitude" style="width: 100%" placeholder="请输入纬度" size="small" :controls="false" />
+        </el-form-item>
+        <el-form-item v-if="!dratTypeArr.includes('Point') && btnSelectIndex != 0" label="至北纬" prop="latitudeEnd">
+          <!-- v-if="dataState == 'update'" -->
+          <el-input-number v-if="false" v-model.trim="positioningData.latitudeEnd" style="width: 100%" placeholder="请输入" :controls="false" />
+          <div v-else>
+            {{ handleCoordinateLength(positioningData.latitudeEnd) }}
+          </div>
+        </el-form-item>
+        <el-form-item v-show="isClickAnalyze" label="范围" prop="">
+          <div style="width: 100%; display: flex; justify-content: space-between">
+            <el-input v-model="radius" style="width: 80%" placeholder="请输入分析范围">
+              <template slot="append">米</template>
+            </el-input>
+            <el-button style="margin-left: 10px" icon="el-icon-search" circle></el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+      <el-button v-if="dataState != 'details' && btnSelectIndex == 0" type="primary" size="small" style="margin: 0 0 13px; float: right" @click="updateMapBtn">修改</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as Cesium from 'cesium';
+import * as turf from "@turf/turf"
+import CesiumNavigation from "cesium-navigation-es6"
+import DrawMap from "./DrawMap"
+import WKT from "terraformer-wkt-parser"
+import Popup from "./components/Popup"
+import LocationDialog from "./components/LocationDialog"
+import PoumianDialog from "./components/PoumianDialog"
+import { deepClone } from "@/packages/utils"
+import MeasureTools from "./utils/MeasureTools.js"
+import MeasureHeight from "./utils/MeasureHeight.js"
+import CircularDiffusionMaterialProperty from "./materials/CircularDiffusionMaterialProperty.js";
+import "@cesium/widgets/Source/widgets.css"; 
+// import "cesium/Build/Widgets/widgets.css";
+var token = "f536641212889df16a6afaa1beff020b"
+// 服务域名
+var tdtUrl = "https://t{s}.tianditu.gov.cn/"
+// 服务负载子域服务负载子域
+var subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"]
+export default {
+  name:'zv-cesium',
+  props: {
+    params: {
+      type: Object,
+      default: () => ({
+        autoFlyTo: true,
+      }),
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    // 导航工具(指北针、2d/3d地图模式切换、放大缩小、底图)
+    showNavigation: {
+      type: Boolean,
+      default: false,
+    },
+    // 时钟轴
+    showTimeline: {
+      type: Boolean,
+      default: false,
+    },
+    //缩放倍数
+    scale: {
+      type: Number,
+      default: 1
+    },
+    //后台管理绘制类型,默认Point
+    mangDrawType: {
+      type: String,
+      default: 'Point'
+    },
+    //是否展示后台管理坐标采集框
+    isShowCoordinate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mixins: [DrawMap],
+  components: { Popup, LocationDialog, PoumianDialog },
+  computed: {
+    is3D () {
+      return this.cameraInfo.pitch > -80
+    },
+    // 指北针方向
+    compassOrientation () {
+      const heading = parseFloat(this.cameraInfo.heading)
+      if (heading >= 337.5 || heading < 22.5) {
+        return 'N'
+      } else if (heading >= 22.5 && heading < 67.5) {
+        return 'NE'
+      } else if (heading >= 67.5 && heading < 112.5) {
+        return 'E'
+      } else if (heading >= 112.5 && heading < 157.5) {
+        return 'SE'
+      } else if (heading >= 157.5 && heading < 202.5) {
+        return 'S'
+      } else if (heading >= 202.5 && heading < 247.5) {
+        return 'SW'
+      } else if (heading >= 247.5 && heading < 292.5) {
+        return 'W'
+      } else if (heading >= 292.5 && heading < 337.5) {
+        return 'NW'
+      }
+    },
+    dratTypeArr() {
+      switch (this.mangDrawType) {
+        case "Point":
+          return ["Point"];
+        case "LineString":
+          return ["LineString"];
+        case "Polygon":
+          return ["Polygon"];
+        case "PointPolygon":
+          return ["Point", "Polygon"];
+      }
+    },
+  },
+  data () {
+    return {
+      id: "map_" + Date.now(),
+      query: {},
+      loading: false,
+      viewer: null,
+      popupVisible: false,
+      popupData: {},
+      popupPosition: { x: 0, y: 0 },
+      selectedEntity: null,
+      layers: [],
+      streetSelector: false,  // 开启路网注记
+      layerClickHandlerWkt: null,
+      layerClickHandlerWms: null,
+      drawLayerObj: {}, // 前端绘制图层信息存放obj
+      isSurrounding: false, // 开启环绕
+      surroundHandler: null, // 环绕实例
+      currentViewer: {},
+      measureTool: null,
+      locationDialogVisible: false,
+      poumianDialogVisible: false,
+      poumianDialogParams: {},
+      b3dmTemp: {},
+      dataPath: process.env.VUE_APP_NW ? "/bhdjcweb" : "", // 本地测试时，http://dev.vanone.com
+      cameraInfo: {
+        height: 0,
+        longitude: 0,
+        latitude: 0,
+        pitch: 0,
+        heading: 0,
+        roll: 0,
+      },
+      terrainSmallSelect: -1, // 地形模式小框选择的按钮
+      terrainCacheMap: new Map(),      //地形高度缓存
+      mouseHandler: null, // 鼠标移动事件处理器
+      drawHandler: null, // 绘制事件处理器
+      hh: null,
+      _arrowDimensionCache: null, // 箭头尺寸计算缓存
+      dataState: 'update',//显示后台管理地图当前状态
+      btnSelectIndex: -1,//绘制类型选择
+      positioningData: {
+        // 坐标采集的经纬度
+        longitude: undefined,
+        latitude: undefined,
+        longitudeEnd: undefined,
+        latitudeEnd: undefined,
+      },
+      isClickAnalyze: false,
+      radius: 5000,
+      mangDrawLayerName: 'draw_layers',//后台绘制图层统一名称
+    }
+  },
+  created () {
+    this._arrowDimensionCache = {
+      lastFrame: -1,
+      cache: new Map(),
+    }
+  },
+  mounted () {
+    this.query = Object.assign({}, this.params)
+    this.init()
+    this.measureTool = new MeasureTools(this.viewer)
+  },
+  destroyed () {
+    this.destroy()
+  },
+  methods: {
+    // 2d/3d地图模式切换
+    changeMapMode () {
+      const viewer = this.viewer
+      const scene = viewer.scene
+      // 地图中心点
+      const center = new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2)
+      const ray = scene.camera.getPickRay(center)
+      const centerPosition = scene.globe.pick(ray, scene)
+      const cartographic = Cesium.Cartographic.fromCartesian(centerPosition)
+      const longitude = Cesium.Math.toDegrees(cartographic.longitude)
+      const latitude = Cesium.Math.toDegrees(cartographic.latitude)
+      const { height } = scene.camera.positionCartographic
+      let { heading } = scene.camera
+      let centerCartesianPosition = Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
+      let newPosition
+      if (this.is3D) {
+        newPosition = centerCartesianPosition
+      } else {
+        const hpr = new Cesium.HeadingPitchRoll(
+          heading,
+          Cesium.Math.toRadians(0),
+          Cesium.Math.toRadians(0)
+        )
+        const orientation = Cesium.Transforms.headingPitchRollQuaternion(centerCartesianPosition, hpr)
+        const rotationMatrix = Cesium.Matrix3.fromQuaternion(orientation)
+        const forward = Cesium.Matrix3.getColumn(rotationMatrix, 1, new Cesium.Cartesian3())
+
+        const moveDistance = (height - cartographic.height) * Math.tan(Cesium.Math.toRadians(45))
+        newPosition = Cesium.Cartesian3.add(
+          centerCartesianPosition,
+          Cesium.Cartesian3.multiplyByScalar(forward, -moveDistance, new Cesium.Cartesian3()),
+          new Cesium.Cartesian3()
+        )
+      }
+      viewer.camera.flyTo({
+        destination: newPosition,
+        orientation: {
+          heading: scene.camera.heading,
+          pitch: this.is3D ? Cesium.Math.toRadians(-90) : Cesium.Math.toRadians(-45),
+          roll: 0
+        }
+      })
+    },
+    
+    handleZoomIn () {
+      const camera = this.viewer.camera
+      const zoomFactor = 0.1 // 调整倍率，值越小，放大越多
+      camera.zoomIn(zoomFactor * this.viewer.camera.positionCartographic.height)
+    },
+
+    handleZoomOut () {
+      const camera = this.viewer.camera
+      const zoomFactor = 0.1 // 调整倍率，值越小，缩小越多
+      camera.zoomOut(zoomFactor * camera.positionCartographic.height)
+    },
+
+    processGeoJSONData (data) {
+      const list = []
+      data.features.forEach((feature) => {
+        const { coordinates, type } = feature.geometry
+        if (type === "MultiPolygon") {
+          coordinates.forEach((part) => {
+            const coords = []
+            part[0].forEach((point) => {
+              coords.push(...point)
+            })
+            list.push(coords)
+          })
+        } else {
+          const coords = []
+          coordinates[0].forEach((point) => {
+            coords.push(...point)
+          })
+          list.push(coords)
+        }
+      })
+      return list
+    },
+
+    loadMaskPrimitive (layer) {
+      fetch("/vendor/data-map-json/36.geojson")
+        .then((response) => {
+          if (response.ok) {
+            return response.json()
+          } else {
+            throw new Error("请求失败！")
+          }
+        })
+        .then((data) => {
+          // console.log('data', data);
+          const list = this.processGeoJSONData(data)
+          // const polygonEntities = this.getPolygonPrimitive(list);
+          // // const wallPrimitive = this.getWallPrimitive(list);
+
+          // // 添加多边形遮罩到图层
+          // polygonEntities.forEach((entity) => {
+          //   layer.entities.add(entity);
+          // });
+
+          // // 如果需要也可以添加墙体遮罩（如果墙体没有效果，可以忽略）
+          // this.viewer.scene.primitives.add(wallPrimitive);
+
+          // const inverseMaskPrimitive = this.getInverseMaskPrimitive(list);
+
+          // // 将遮罩添加到 Cesium 场景中
+          // this.viewer.scene.primitives.add(inverseMaskPrimitive);
+
+          // // 添加反转遮罩的多边形
+          // const inverseMaskPolygonEntity = this.getInverseMaskPolygonEntity(list);
+          // console.log('inverseMaskPolygonEntity', inverseMaskPolygonEntity);
+          // layer.entities.add(inverseMaskPolygonEntity);
+
+          // // 获取墙体实体列表并添加
+          // const wallEntities = this.getWallEntity(list);
+          // console.log('wallEntities', wallEntities);
+          // wallEntities.forEach((entity) => {
+          //   layer.entities.add(entity);
+          // });
+
+          let arr = list[0]
+
+          var polygonWithHole = new Cesium.PolygonGeometry({
+            polygonHierarchy: new Cesium.PolygonHierarchy(
+              Cesium.Cartesian3.fromDegreesArray([
+                73.0, 53.0, 73.0, 0.0, 135.0, 0.0, 135.0, 53.0,
+              ]),
+              [
+                new Cesium.PolygonHierarchy(
+                  Cesium.Cartesian3.fromDegreesArray(arr)
+                ),
+              ]
+            ),
+          })
+          var geometry = Cesium.PolygonGeometry.createGeometry(polygonWithHole)
+          let instances = []
+          instances.push(
+            new Cesium.GeometryInstance({
+              geometry: geometry,
+              attributes: {
+                color: Cesium.ColorGeometryInstanceAttribute.fromColor(
+                  Cesium.Color.BLACK.withAlpha(0.5)
+                ),
+                // disableDepthTestDistance: Number.POSITIVE_INFINITY, // 禁用深度检测
+              },
+            })
+          )
+          this.viewer.scene.primitives.add(
+            new Cesium.Primitive({
+              geometryInstances: instances,
+              appearance: new Cesium.PerInstanceColorAppearance({
+                flat: true,
+                translucent: true, // 开启透明度支持
+                renderState: {
+                  depthTest: {
+                    enabled: false, // 禁用深度测试（如果需要）
+                  },
+                },
+              }),
+            })
+          )
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+
+    // 工具
+    handleTool (obj, viewer = this.viewer) {
+      if (!obj.type) return
+
+      const data = {
+        color: "#EA3535",
+        fontSize: 30,
+        pxNum: 2,
+        // callback: this.drawCallbackGJ,
+      }
+
+      // 测距离
+      if (obj.type == "LineString") {
+        if (obj.clear) {
+          this.measureTool._drawLayer.entities.removeAll()
+          return
+        }
+        this.measureTool.drawLineMeasureGraphics({
+          clampToGround: true,
+          measure: true,
+          style: {
+            line: {
+              width: 2,
+              material: Cesium.Color.fromCssColorString("#ffff00"),
+            },
+            point: {
+              color: Cesium.Color.RED,
+              pixelSize: 5,
+              outlineColor: Cesium.Color.GREEN,
+              outlineWidth: 3,
+              show: false, //默认是显示点位
+            },
+          },
+          callback: (e) => {
+            console.log(e, "88888888888")
+          },
+        })
+      }
+
+      // 测面积
+      if (obj.type == "Polygon") {
+        if (obj.clear) {
+          this.measureTool._drawLayer.entities.removeAll()
+          return
+        }
+        this.measureTool.drawAreaMeasureGraphics({
+          clampToGround: true,
+          measure: true,
+          style: {
+            line: {
+              width: 2,
+              material: Cesium.Color.fromCssColorString("#0099ff"),
+              show: true, //默认为true
+            },
+            point: {
+              pixelSize: 5,
+              outlineColor: Cesium.Color.BLUE,
+              outlineWidth: 2,
+              show: false, //默认为true
+            },
+            //如果不设置centerPoint则会把测量的位置现在在最后一个点击的位置
+            centerPoint: {
+              pixelSize: 5,
+              outlineColor: Cesium.Color.RED,
+              outlineWidth: 2,
+            },
+          },
+          callback: (e) => {
+            // console.log(e, "88888888888");
+          },
+        })
+      }
+
+      // 测高度
+      if (obj.type === "Height") {
+        if (!this.hh) {
+          this.hh = new MeasureHeight(viewer)
+        }
+        this.hh.activate()
+        // const ii = new measureLineFlat(viewer, 5);
+      }
+
+      // 测坡度
+      if (obj.type === "Slope") {
+        if (obj.clear) {
+          this.measureTool._drawLayer.entities.removeAll()
+          return
+        }
+        this.drawTypeFunctionGJ("CEPODU")
+      }
+
+      // 测剖面
+      if (obj.type === "Section") {
+        // this.drawTypeFunctionGJ("CEPOUMIAN", data);
+
+        if (obj.clear) {
+          this.measureTool._drawLayer.entities.removeAll()
+          return
+        }
+
+        this.measureTool.drawLineMeasureGraphics({
+          showPoumian: true,
+          clampToGround: true,
+          measure: true,
+          style: {
+            line: {
+              width: 2,
+              material: Cesium.Color.fromCssColorString("#ffff00"),
+            },
+            point: {
+              color: Cesium.Color.RED,
+              pixelSize: 5,
+              outlineColor: Cesium.Color.GREEN,
+              outlineWidth: 3,
+              show: false, //默认是显示点位
+            },
+          },
+          callback: (e) => {
+            let data = []
+            this.loading = true
+            e.poumian.forEach((v, k) => {
+              data.push({
+                title: k + 1,
+                value: v,
+              })
+            })
+            setTimeout(() => {
+              this.poumianDialogParams = {
+                id: "PoumianChart",
+                data: data,
+                scaleNum: this.params.scaleNum,
+              }
+              this.loading = false
+              this.poumianDialogVisible = true
+            }, 500)
+          },
+        })
+      }
+
+      // 环绕
+      if (obj.type === "Surround") {
+        this.toggleSurround()
+      }
+
+      if (obj.type === "Location") {
+        this.locationDialogVisible = true
+      }
+
+      if (obj.type === "ZoomIn") {
+        this.handleZoomIn()
+      }
+      if (obj.type === "ZoomOut") {
+        this.handleZoomOut()
+      }
+    },
+
+    // 销毁
+    destroy () {
+      // 销毁鼠标事件处理器
+      if (this.mouseHandler) {
+        this.mouseHandler.destroy()
+        this.mouseHandler = null
+      }
+
+      if (Cesium.defined(this.viewer)) {
+        this.viewer.entities.removeAll()
+        this.viewer.imageryLayers.removeAll()
+        this.viewer.dataSources.removeAll()
+        // viewer.scene.primitives.removeAll();
+        // 获取webgl上下文
+        let gl = this.viewer.scene.context._originalGLContext
+        gl.canvas.width = 1
+        gl.canvas.height = 1
+        this.viewer.destroy() // 销毁Viewer实例
+        gl.getExtension("WEBGL_lose_context").loseContext()
+        gl = null
+      }
+    },
+
+    setCesiumStyle (style) {
+      let cesiumStyle = {}
+      if (style.fill) {
+        cesiumStyle.material = Cesium.Color.fromCssColorString(
+          style.fill.color || "#ff0000"
+        )
+      }
+      if (style.stroke) {
+        cesiumStyle.outline = true
+        cesiumStyle.outlineColor = Cesium.Color.fromCssColorString(
+          style.stroke.color || "#ff0000"
+        )
+        cesiumStyle.outlineWidth = style.stroke.width || 2
+      }
+      return cesiumStyle
+    },
+
+    async drawCircleByWkt (circleObj) {
+      if (!circleObj) return
+
+      if (this.drawLayerObj[circleObj.name]) {
+        this.drawLayerObj[circleObj.name].forEach((entity) => {
+          this.viewer.entities.remove(entity)
+        })
+        this.drawLayerObj[circleObj.name] = []
+      }
+      let wkts = Array.isArray(circleObj.wkt) ? circleObj.wkt : [circleObj.wkt]
+      let entities = []
+      let style = circleObj.style || {}
+      let cesiumStyle = this.setCesiumStyle(style)
+      let ellipse = {
+        semiMinorAxis: circleObj.distance,
+        semiMajorAxis: circleObj.distance,
+        material: cesiumStyle.material || Cesium.Color.RED.withAlpha(0.5),
+        outline: cesiumStyle.outline || false,
+        outlineColor: cesiumStyle.outlineColor || Cesium.Color.BLACK,
+        outlineWidth: cesiumStyle.outlineWidth || 1,
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
+      }
+
+      wkts.forEach((wkt) => {
+        if (typeof wkt !== "string" || wkt.indexOf("POINT") === -1) return
+        const geojson = WKT.parse(wkt)
+        const coordinates = geojson.coordinates
+
+        const entity = this.viewer.entities.add({
+          name: circleObj.name,
+          position: Cesium.Cartesian3.fromDegrees(
+            coordinates[0],
+            coordinates[1],
+            0
+          ),
+          ellipse: ellipse,
+        })
+        entities.push(entity)
+      })
+
+      this.drawLayerObj[circleObj.name] = entities
+
+      if (circleObj.fit && entities.length) {
+        this.viewer.flyTo(entities)
+      }
+    },
+
+    // 初始化
+    async init () {
+      this.viewer = new Cesium.Viewer(this.id, {
+        homeButton: false, // 视角返回初始位置
+        sceneModePicker: false, // 控制是3d还是
+        baseLayerPicker: false, // 影像切换
+        animation: false, // 是否显示动画控件
+        infoBox: false, // 是否显示点击要素之后显示的信息
+        selectionIndicator: false, // 要素选中框
+        geocoder: false, // 是否显示地名查找控件
+        timeline: this.showTimeline, // 是否显示时间线控件
+        fullscreenButton: false, //全屏
+        shouldAnimate: true, //是否允许动画
+        navigationHelpButton: false, // 是否显示帮助信息控件
+        imageryProvider: false, // 禁用默认的影像图层
+      })
+
+      // 抗锯齿
+      this.viewer.scene.fxaa = true
+      this.viewer.scene.postProcessStages.fxaa.enabled = true
+      // 水雾特效
+      this.viewer.scene.globe.showGroundAtmosphere = true
+      // 开启深度检测
+      this.viewer.scene.globe.depthTestAgainstTerrain = true
+      // 隐藏Cesium logo
+      this.viewer.cesiumWidget.creditContainer.style.display = "none"
+
+      if (!process.env.VUE_APP_TIAN_MAP_ZOOM) {
+        // 叠加影像服务
+        var imgMap = new Cesium.UrlTemplateImageryProvider({
+          url: tdtUrl + "DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token,
+          subdomains: subdomains,
+          tilingScheme: new Cesium.WebMercatorTilingScheme(),
+          maximumLevel: 18,
+        })
+        this.viewer.imageryLayers.addImageryProvider(imgMap)
+
+        // 叠加国界服务
+        var iboMap = new Cesium.UrlTemplateImageryProvider({
+          url: tdtUrl + "DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=" + token,
+          subdomains: subdomains,
+          tilingScheme: new Cesium.WebMercatorTilingScheme(),
+          maximumLevel: 10,
+        })
+        this.viewer.imageryLayers.addImageryProvider(iboMap)
+      } else {
+        // 叠加影像服务 使用地理坐标系
+        var imgMap = new Cesium.UrlTemplateImageryProvider({
+          // url: tdtUrl + 'DataServer?T=img_c&x={xx}&y={yy}&l={zz}&tk=' + token,
+          url: `${process.env.VUE_APP_TIAN_API}/imageMap/file/management/imageShow/onemap21/{zz}/{xx}/{yy}`,
+          customTags: {
+            zz: function (imageryProvider, x, y, z) {
+              return z + 1
+            },
+            xx: function (imageryProvider, x, y, z) {
+              return x
+            },
+            yy: function (imageryProvider, x, y, z) {
+              return y
+            },
+          },
+          subdomains: subdomains,
+          tilingScheme: new Cesium.GeographicTilingScheme({
+            ellipsoid: Cesium.Ellipsoid.WGS84,
+            numberOfLevelZeroTilesX: 2,
+            numberOfLevelZeroTilesY: 1,
+          }),
+          // rectangle: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90), // 地理坐标系的全局范围
+          layer: "img",
+          style: "default",
+          format: "image/png",
+          tileMatrixSetID: "EPSG:4326_img",
+          maximumLevel: 14,
+        })
+        this.viewer.imageryLayers.addImageryProvider(imgMap)
+      }
+
+      // 叠加地形服务
+      let provider = new Cesium.CesiumTerrainProvider({
+        url: "http://data.mars3d.cn/terrain",
+        requestWaterMask: true,
+        requestVertexNormals: true,
+        maximumScreenSpaceError: 8
+      })
+      this.viewer.terrainProvider = provider
+      const options = {
+        // 设置罗盘重置后的点位
+        defaultResetView: Cesium.Rectangle.fromDegrees(
+          113.3411, // 江西-西经
+          23.5, // 江西-南纬
+          118.6553, // 江西-东经
+          30.8 // 江西-北纬
+        ),
+        enableCompass: false,
+        enableZoomControls: false,
+        enableDistanceLegend: true,
+        enableCompassOuterRing: false,
+      }
+      new CesiumNavigation(this.viewer, options)
+
+      // // 创建 CustomDataSource 图层
+      // const maskLayer = new Cesium.CustomDataSource("MaskLayer");
+
+      // // 将图层添加到 Viewer 中
+      // this.viewer.dataSources.add(maskLayer);
+
+      // // 调用 loadMaskPrimitive，将 customLayer 作为参数传入
+      // this.loadMaskPrimitive(maskLayer);
+
+      if (this.query.autoFlyTo) {
+        this.initFlyTo(this.viewer)
+      }
+
+      this.getCameraInfo()
+    },
+
+    getCameraInfo (viewer = this.viewer) {
+      viewer.camera.percentageChanged = 0.01
+      viewer.camera.changed.addEventListener(() => {
+        var camera = viewer.camera
+        var cartographic = camera.positionCartographic
+
+        // 获取相机的高度、经度、纬度
+        this.cameraInfo.height = cartographic.height.toFixed(2)
+        this.cameraInfo.longitude = Cesium.Math.toDegrees(
+          cartographic.longitude
+        ).toFixed(6)
+        this.cameraInfo.latitude = Cesium.Math.toDegrees(
+          cartographic.latitude
+        ).toFixed(6)
+
+        // 获取相机的朝向角度
+        this.cameraInfo.pitch = Cesium.Math.toDegrees(camera.pitch).toFixed(2)
+        this.cameraInfo.heading = Cesium.Math.toDegrees(camera.heading).toFixed(
+          2
+        )
+        this.cameraInfo.roll = Cesium.Math.toDegrees(camera.roll).toFixed(2)
+      })
+    },
+
+    async addB3dmLayer (params, viewer = this.viewer) {
+      if (this.tileset) viewer.scene.primitives.remove(this.tileset)
+      this.tileset = new Cesium.Cesium3DTileset({
+        url: params.url,
+        maximumScreenSpaceError: 1,
+        maximumMemoryUsage: 1024,
+        preloadWhenHidden: true,
+        preloadFlightDestinations: true,
+        dynamicScreenSpaceError: true,
+        dynamicScreenSpaceErrorDensity: 0.001,
+        dynamicScreenSpaceErrorFactor: 4.0,
+        dynamicScreenSpaceErrorHeightFalloff: 0.25
+      })
+      viewer.scene.primitives.add(this.tileset)
+      const scene = viewer.scene
+      scene.globe.depthTestAgainstTerrain = false
+      // 等待模型完全加载
+      await this.tileset.readyPromise
+      this.viewer.flyTo(this.tileset)
+    },
+
+    async addGltfLayer (params, viewer = this.viewer) {
+      params.scale = params.scale ? params.scale : 2.0
+
+      params.size = params.size ? params.size : 5
+
+      // 恢复默认尺寸
+      params.scale = 1
+
+      let geoJson = WKT.parse(params.boundaryLine)
+      // console.log('geoJson', geoJson);
+      const coordinates = geoJson.coordinates
+      // console.log('coordinates', coordinates);
+      let longitude = coordinates[0]
+      let latitude = coordinates[1]
+
+      // let height = await this.getPointHeight([longitude, latitude], viewer);
+      let height = 0
+      // console.log('gltfHeight', height);
+
+      const modelPosition = Cesium.Cartesian3.fromDegrees(
+        longitude,
+        latitude,
+        height
+      )
+
+      const model = Cesium.Model.fromGltf({
+        url: params.url,
+        modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(modelPosition),
+        scale: params.scale,
+      })
+
+      viewer.scene.primitives.add(model)
+
+      // 使用 readyPromise 确保模型加载完成
+      model.readyPromise
+        .then(() => {
+          // console.log('模型加载完成', params);
+          const boundingSphere = model.boundingSphere
+          const optimalDistance = boundingSphere.radius * params.size // 根据模型大小调整距离
+
+          const modelPosition1 = Cesium.Cartesian3.fromDegrees(
+            longitude,
+            latitude,
+            height + params.size
+          )
+
+          // 以模型的实际地理位置为中心，设置视角
+          viewer.camera.lookAt(
+            modelPosition1,
+            new Cesium.HeadingPitchRange(
+              Cesium.Math.toRadians(-90.0), // 水平视角
+              Cesium.Math.toRadians(-10.0), // 轻微仰视角度
+              optimalDistance // 适当距离
+            )
+          )
+
+          // 可选：解除相机锁定，以便用户自由控制视角
+          viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+
+          viewer.scene.screenSpaceCameraController.inertiaZoom = 0
+          viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10 // 5 相机的高度的最小值
+          viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1000 // 相机高度的最大值
+          viewer.scene.screenSpaceCameraController._minimumZoomRate = 100 // 50 设置相机缩小时的速率
+          viewer.scene.screenSpaceCameraController._maximumZoomRate = 200 // 50 设置相机放大时的速率
+        })
+        .catch((error) => {
+          console.error("模型加载失败:", error)
+        })
+    },
+
+    // 定位到中国
+    initFlyTo (viewer = this.viewer) {
+      // 调整为直接定位到江西
+      viewer.camera.flyTo({
+        destination: Cesium.Rectangle.fromDegrees(
+          113.3411, // 西经
+          23.5, // 南纬
+          118.6553, // 东经
+          30.8 // 北纬
+        ),
+        duration: 3, // 飞行持续时间（秒）
+      })
+    },
+
+    flyToDefault () {
+      this.viewer.camera.flyTo({
+        destination: Cesium.Rectangle.fromDegrees(
+          113.3411, // 西经
+          23.5, // 南纬
+          118.6553, // 东经
+          30.8 // 北纬
+        ),
+        orientation: {
+          heading: Cesium.Math.toRadians(350),
+          pitch: Cesium.Math.toRadians(-90),
+          roll: Cesium.Math.toRadians(10),
+        },
+        duration: 3, // 飞行持续时间（秒）
+      })
+    },
+
+    // 定位到点位环绕
+    async flyToPoint (params, viewer = this.viewer) {
+      if (this.locationDialogVisible) {
+        this.locationDialogVisible = false
+      }
+
+      // 将wkt格式转化为geojson
+      let geoJson = params.point
+      if (!geoJson || !this.isWkt(geoJson)) {
+        console.log("后端数据不严谨，经纬度为null")
+      }
+      geoJson = WKT.parse(geoJson)
+      // console.log(geoJson); return;
+
+      const coordinates = geoJson.coordinates
+
+      let height = params.height || 0
+      let heading = params.heading
+        ? Cesium.Math.toRadians(params.heading)
+        : viewer.scene.camera.heading
+      let pitch = params.pitch
+        ? Cesium.Math.toRadians(params.pitch)
+        : viewer.scene.camera.pitch
+      let roll = params.roll
+        ? Cesium.Math.toRadians(params.roll)
+        : viewer.scene.camera.roll
+
+      if (params.surround) {
+        // 开启环绕
+
+        // 高度需要定死，这样在环绕函数里设置的拉远的距离才会一样
+        height = params.height || 17850000
+
+        // 航向已原航向为准
+        heading = viewer.scene.camera.heading
+
+        // 俯仰角现已原角度为准，在环绕函数里再修改角度，这样整体效果会更好
+        pitch = viewer.scene.camera.pitch
+
+        // 滚转已原滚转为准
+        roll = viewer.scene.camera.roll
+      } else {
+        // 关闭环绕时到点位，增加高度，解决放大到点位时层级过大导致点位图标乱串问题
+        let h = await this.getPointHeight(coordinates, viewer)
+        height += h
+      }
+
+      const center = Cesium.Cartesian3.fromDegrees(
+        coordinates[0],
+        coordinates[1],
+        height
+      )
+
+      // 将三维球定位到点位
+      viewer.camera.flyTo({
+        destination: center,
+        orientation: {
+          heading: heading,
+          pitch: pitch,
+          roll: roll,
+        },
+        duration: params.duration ? params.duration : 2, // 飞行持续时间（秒）
+        complete: () => {
+          // 开启环绕
+          if (params.surround) {
+            params.center = center
+            this.startSurround(params, viewer)
+          }
+
+          // 关闭环绕、存在拉远距离
+          if (!params.surround && params.range) {
+            var offset = new Cesium.HeadingPitchRange(
+              viewer.scene.camera.heading,
+              viewer.scene.camera.pitch,
+              params.range
+            )
+
+            // 设置相机视图
+            viewer.camera.lookAt(center, offset)
+
+            // 解决在使用camera.lookAt之后，造成问题:cesium内置的鼠标控制相机功能发生改变，例如：鼠标右键的挪移后相机是绕中心点旋转，而不是平移，flyto也会变得很诡异(虽然跳到目标点正常，但是相机飞的非常高
+            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+          }
+        },
+      })
+    },
+
+    // 设置相机视角
+    setView (longitude, latitude, height, heading = 0, pitch = 0, roll = 0) {
+      this.viewer.camera.setView({
+        destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
+        orientation: {
+          heading: Cesium.Math.toRadians(heading),
+          pitch: Cesium.Math.toRadians(pitch),
+          roll
+        }
+      })
+    },
+
+    // 存储当前视角
+    // 传入viewer对象
+    // 存储当前视角的position(位置)、heading(航向角)、pitch(俯仰角)、roll(翻滚角)
+    storeViewer (viewer = this.viewer) {
+      //获取当前视角的postion（位置）
+      const position = viewer.camera.position
+
+      this.currentViewer = {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        heading: viewer.camera.heading,
+        pitch: viewer.camera.pitch,
+        roll: viewer.camera.roll,
+      }
+    },
+
+    restoreViewer (viewer = this.viewer) {
+      console.log("开始返回视角")
+      viewer.camera.flyTo({
+        //定位到范围中心点
+        destination: {
+          x: this.currentViewer.x,
+          y: this.currentViewer.y,
+          z: this.currentViewer.z,
+        },
+        orientation: {
+          heading: this.currentViewer.heading,
+          pitch: this.currentViewer.pitch,
+          roll: this.currentViewer.roll,
+        },
+      })
+    },
+
+    // 叠加WMS图层
+    addWmsLayer (params, viewer = this.viewer) {
+      this.delWmsLayer(params.name, viewer)
+
+      // 添加WMS图层
+      const wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
+        url: `${params.url}${params.work}/wms`, // 替换为你的WMS服务URL
+        layers: `${params.work}:${params.layerName}`, // 替换为你想要叠加的图层名称
+        parameters: {
+          service: "WMS",
+          version: "1.1.1",
+          request: "GetMap",
+          styles: params.style || "",
+          format: "image/png",
+          transparent: true,
+          cql_filter: params.filter || "1=1",
+        },
+      })
+
+      const layer = viewer.imageryLayers.addImageryProvider(wmsImageryProvider)
+
+      const layerItem = {
+        name: params.name,
+        url: params.url,
+        work: params.work,
+        filterSql: params.filterSql,
+        function: params.layerEventFun,
+        layer,
+      }
+      const layerIndex = this.layers.findIndex((l) => l.name === params.name)
+      if (layerIndex >= 0) {
+        this.layers[layerIndex] = layerItem
+      } else {
+        this.layers.push(layerItem)
+      }
+      if (typeof params.layerEventFun == "function") {
+        if (!this.layerClickHandlerWms) {
+          this.layerClickHandlerWms = new Cesium.ScreenSpaceEventHandler(
+            viewer.scene.canvas
+          )
+        }
+
+        this.layerClickHandlerWms.setInputAction((click) => {
+          // const pickedObject = viewer.scene.pickPosition(click.position);
+          // console.log('进来了1', pickedObject);
+
+          const clickPosition = click.position
+          const pickedObject = viewer.camera.getPickRay(clickPosition)
+          // const pickPosition = viewer.scene.pickPosition(pickPosition);
+          // console.log('clickPosition', clickPosition);
+
+          if (Cesium.defined(pickedObject)) {
+            let pickedImagery = viewer.imageryLayers.pickImageryLayerFeatures(
+              pickedObject,
+              viewer.scene
+            )
+            // console.log('进来了2', pickedImagery);
+            // 叠加geosever图层后,每次点击都会调用这个,所以需要加个判断,不然会一直报错
+            if (pickedImagery) {
+              pickedImagery.then((features) => {
+                // console.log('进来了2', features);
+                if (features && features.length > 0) {
+                  const pickedPosition = viewer.scene.globe.pick(
+                    pickedObject,
+                    viewer.scene
+                  )
+
+                  const cartographic =
+                    Cesium.Cartographic.fromCartesian(pickedPosition)
+                  const longitude = Cesium.Math.toDegrees(
+                    cartographic.longitude
+                  )
+                  const latitude = Cesium.Math.toDegrees(cartographic.latitude)
+
+                  // 创建一个临时实体用于定位弹窗位置
+                  const entity = new Cesium.Entity({
+                    position: Cesium.Cartesian3.fromDegrees(
+                      longitude,
+                      latitude
+                    ),
+                  })
+
+                  let newFeatures = {}
+
+                  // 重定义features.name名称，否则默认为geoserver的发布名称
+                  features.forEach((v) => {
+                    const pickedLayer = v.imageryLayer
+
+                    // 查找对应的图层名称
+                    const layerInfo = this.layers.find(
+                      (layer) => layer.layer === pickedLayer
+                    )
+                    // console.log('layerInfo', layerInfo);
+                    if (layerInfo) {
+                      // v.name = layerInfo.name;
+                      // v.url = this.getFeatureInfoUrl(Object.assign(params, { position: clickPosition }), viewer);
+                      newFeatures[layerInfo.name] = this.getFeatureInfoUrl(
+                        Object.assign(layerInfo, { position: clickPosition }),
+                        viewer
+                      )
+                      if (typeof layerInfo.function === "function") {
+                        layerInfo.function(entity, newFeatures)
+                      }
+                    }
+                  })
+                }
+              })
+            }
+          }
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+      }
+    },
+
+    // 删除WMS图层
+    delWmsLayer (name, viewer = this.viewer) {
+      // 查找并删除已有的同名图层
+      const existingLayerIndex = this.layers.findIndex((l) => l.name === name)
+      if (existingLayerIndex >= 0) {
+        viewer.imageryLayers.remove(this.layers[existingLayerIndex].layer)
+        this.layers.splice(existingLayerIndex, 1)
+      }
+    },
+
+    // 设置WMS图层显示/隐藏
+    setWmsLayerVisible (params) {
+      const layer = this.layers.find((l) => l.name === params.name)
+      if (layer) {
+        layer.layer.show = params.active
+      }
+    },
+    // 叠加路网注记服务
+    changeStreetSelector (show) {
+      if (!this.ciaLayer) {
+        let ciaMap = new Cesium.UrlTemplateImageryProvider({
+          url: tdtUrl + 'DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' + token,
+          subdomains: subdomains,
+          tilingScheme: new Cesium.WebMercatorTilingScheme()
+        })
+        this.ciaLayer = this.viewer.imageryLayers.addImageryProvider(ciaMap)
+      }
+      this.ciaLayer.show = show
+    },
+
+    //获取点位经纬度计算高度
+    async getPointHeight (point, viewer = this.viewer) {
+      // 将经纬度坐标转换为笛卡尔坐标
+      let position = Cesium.Cartesian3.fromDegrees(point[0], point[1])
+
+      let terrainProvider = this.viewer.terrainProvider
+      // console.log(`output->terrainProvider`, terrainProvider);
+
+      // 获取地形高度信息
+      let x = position.x
+      let y = position.y
+      let z = position.z
+
+      let cartesianPosition = new Cesium.Cartesian3(x, y, z) // 假设这是你的三维坐标
+      let ellipsoid = this.viewer.scene.globe.ellipsoid
+      let cartographicPosition = ellipsoid.cartesianToCartographic(cartesianPosition)
+
+      // 获取地形高度信息
+      const updatedPositions = await Cesium.sampleTerrain(terrainProvider, 11, [cartographicPosition,])
+      let terrainHeight = updatedPositions[0].height || 1000 // 获取地形高度信息
+      // console.log(`output->terrainHeight`, terrainHeight);
+      return terrainHeight
+
+    },
+
+    // 批量获取地形高度
+    async getTerrainHeight (points) {
+      let result
+      let key = JSON.stringify(points.map(point => [point[0], point[1]]))
+      let { terrainProvider } = this.viewer
+      if (this.terrainCacheMap.has(key)) {
+        result = this.terrainCacheMap.get(key)
+      } else {
+        let cartographicList = points.map(point => Cesium.Cartographic.fromDegrees(point[0], point[1]))
+        result = await Cesium.sampleTerrainMostDetailed(terrainProvider, cartographicList)
+        this.terrainCacheMap.set(key, result)
+      }
+      return result
+    },
+
+    // 叠加WKT图层
+    async addWktLayer(params, viewer = this.viewer) {
+      // 判断是否存在，处理显示/隐藏
+      const name = params.type || params.enName || params.name;
+
+      // 不存在，执行下面步骤
+      let options = this.handleStyle(params);
+      const data = options.coordsArr || options.list || [];
+      let coordsList = data.map(item => {
+        let geoJson = WKT.parse(item[options.coordField]);
+        return geoJson.type == "Point" ? geoJson.coordinates : null;
+      }).filter(Boolean);
+      let terrainHeights;
+      if (coordsList.length) {
+
+        terrainHeights = await this.getTerrainHeight(coordsList);
+      }
+
+      // 先删除已有图层数据,//请求高度后再清除,防止上一个图层还没绘制完成就提前清除了,导致没有清除到
+      this.delWktLayer(name);
+
+      // 创建数据源
+      const dataSource = new Cesium.CustomDataSource(name);
+
+      for (let index = 0; index < data.length; index++) {
+        const v = data[index];
+        // 将wkt格式转化为geojson
+        let geoJson = v[options.coordField];
+        if (!geoJson || !this.isWkt(geoJson)) {
+          console.log("后端数据不严谨，经纬度为null");
+          continue;
+        }
+        geoJson = WKT.parse(geoJson);
+
+        const { type } = geoJson;
+        const { coordinates } = geoJson;
+
+        const style = v.olstyle || options.coordsStyle;
+        let entity = null;
+
+        if (type === "Point") {
+          entity = dataSource.entities.add({
+            position: Cesium.Cartesian3.fromDegrees(coordinates[0], coordinates[1], v.height || terrainHeights[index].height),
+            properties: v,
+            callback: options.vectorEventFun, // 附加回调函数
+          });
+          const pointProperties = entity.properties;
+          pointProperties.addProperty("index", index);
+
+          if (style.label) {
+            entity.label = style.label;
+            entity.label.text = v[options.textField];
+          }
+          if (style.billboard) {
+            entity.billboard = style.billboard;
+          }
+
+          // 处理Cesium特定的point样式
+          if (style.cesium && style.cesium.point) {
+            entity.point = Object.assign(
+              {},
+              entity.point || {},
+              style.cesium.point
+            );
+          }
+          // 处理ellipse样式
+          if (style.ellipse) {
+            entity.ellipse = style.ellipse;
+          }
+        } else if (type === "LineString") {
+          const positions = await Promise.all(
+            coordinates.map(async (coord) =>
+              Cesium.Cartesian3.fromDegrees(
+                coord[0],
+                coord[1],
+                coord[2] || await this.getPointHeight(coord, viewer)
+              )
+            ));
+          entity = dataSource.entities.add({
+            polyline: {
+              positions: positions,
+              width: params.coordsStyle.stroke.width,
+              material: Cesium.Color.fromCssColorString(
+                params.coordsStyle.stroke.color
+              ),
+              clampToGround: params.clampToGround || false,//是否开启贴地
+            },
+          });
+        } else if (type === "Polygon") {
+          let terrainHeight = await this.getTerrainHeight(coordinates[0], viewer);
+          const hierarchy = coordinates.map((ring) =>
+            ring.map((coord, index) =>
+              Cesium.Cartesian3.fromDegrees(coord[0], coord[1], terrainHeight[index].height)
+            )
+          );
+          entity = dataSource.entities.add({
+            id: v.id,
+            polygon: {
+              hierarchy: new Cesium.PolygonHierarchy(hierarchy[0]),
+            },
+            callback: options.vectorEventFun, // 附加回调函数
+          });
+
+          // 确保样式正确应用，包括透明度
+          if (style.polygon) {
+            entity.polygon = Object.assign(entity.polygon, style.polygon);
+          }
+
+          // 根据传入的参数设置边框
+          if (style.stroke) {
+            if (style.stroke.width == 0) {
+              entity.polygon.outline = false;
+            } else {
+              // 如果设置了stroke，则启用outline并设置样式
+              entity.polygon.outline = true;
+              if (style.stroke.color) {
+                entity.polygon.outlineColor = Cesium.Color.fromCssColorString(
+                  this.handleColor(style.stroke.color)
+                );
+              }
+              if (style.stroke.width) {
+                entity.polygon.outlineWidth = style.stroke.width;
+              }
+            }
+
+            // 多面边框设置在 Cesium 1.95 下无效，改为线条方式模拟多边形的边框
+            if (style.stroke.color && style.stroke.width > 0) {
+              dataSource.entities.add({
+                polyline: {
+                  positions: [...hierarchy[0], hierarchy[0][0]], // 确保边框闭合
+                  width: style.stroke.width, // 边框宽度
+                  material: Cesium.Color.fromCssColorString(
+                    this.handleColor(style.stroke.color)
+                  ), // 边框颜色
+                  clampToGround: true, // 贴地显示
+                },
+              });
+            }
+          }
+        } else if (type === "MultiPolygon") {
+          let terrainHeight = await this.getTerrainHeight(coordinates[0][0], viewer);
+          let positions = coordinates[0][0].map((coord, index) => Cesium.Cartesian3.fromDegrees(coord[0], coord[1], terrainHeight[index].height));
+          entity = dataSource.entities.add({
+            polygon: {
+              hierarchy: positions,
+            }
+          });
+          if (style.polygon) {
+            entity.polygon = Object.assign(entity.polygon, style.polygon);
+          }
+          // 多面边框设置在 Cesium 1.95 下无效，改为以下方式模拟多边形的边框
+          if (style.polygon && style.polygon.outline) {
+            // 添加对应的多边形边框
+            dataSource.entities.add({
+              polyline: {
+                positions: [...positions, positions[0]], // 确保边框闭合
+                width: style.polyline.width, // 边框宽度
+                material: style.polyline.material, // 边框颜色
+                clampToGround: true, // 贴地显示
+              },
+            });
+          }
+        }
+      }
+
+      // 将数据源添加到viewer
+      viewer.dataSources.add(dataSource);
+      // 处理fit参数 - 自动定位到图层范围
+      if (options.fit && dataSource.entities.values.length) {
+        // 收集所有实体的位置信息
+        const positions = [];
+        dataSource.entities.values.forEach((entity) => {
+          if (entity.position) {
+            positions.push(entity.position.getValue(Cesium.JulianDate.now()));
+          } else if (entity.polygon) {
+            // 对于多边形，获取其边界
+            const hierarchy = entity.polygon.hierarchy.getValue(
+              Cesium.JulianDate.now()
+            );
+            if (hierarchy && hierarchy.positions) {
+              hierarchy.positions.forEach((pos) => {
+                positions.push(pos);
+              });
+            }
+          } else if (entity.polyline) {
+            // 对于线条，获取其所有点
+            const polylinePositions = entity.polyline.positions.getValue(
+              Cesium.JulianDate.now()
+            );
+            if (polylinePositions) {
+              polylinePositions.forEach((pos) => {
+                positions.push(pos);
+              });
+            }
+          }
+        });
+
+        // 如果有位置信息，则进行自动定位
+        if (positions.length > 0) {
+          const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
+          // 设置fit选项
+          const fitOptions = options.fitOptions || {
+            duration: 2.0,
+            offset: new Cesium.HeadingPitchRange(
+              0,
+              -Math.PI / 4,
+              boundingSphere.radius * 2.5
+            )
+          };
+          // 执行自动定位
+          viewer.camera.flyToBoundingSphere(boundingSphere, fitOptions);
+        }
+      }
+
+      const layerItem = {
+        name: name,
+        entities: dataSource.entities.values,
+        function: options.vectorEventFun,
+        dataSource: dataSource, // 添加数据源引用
+        isHover: params.isHover || false, // 添加悬浮标识
+      };
+      const layerIndex = this.layers.findIndex((l) => l.name === name);
+      if (layerIndex >= 0) {
+        this.layers[layerIndex] = layerItem;
+      } else {
+        this.layers.push(layerItem);
+      }
+      const pixelRange = 45;
+      const minimumClusterSize = 5; //至少5个点才聚合
+
+      const clusterHandler = (clusteredEntities, cluster) => {
+        cluster.label.show = false;
+        cluster.billboard.show = true;
+        if (
+          options.clusterStyle.circle.fill &&
+          options.clusterStyle.circle.fill.color
+        ) {
+          cluster.billboard.image = this.handleClusterColorIcon(
+            options.clusterStyle.circle.fill.color,
+            clusteredEntities.length.toLocaleString(),
+            48,
+            48
+          );
+        } else if (
+          options.clusterStyle.circle.image &&
+          options.clusterStyle.circle.image.src
+        ) {
+          cluster.billboard.image = this.handleClusterImageIcon(
+            options.clusterStyle.circle.image.src,
+            clusteredEntities.length.toLocaleString(),
+            72,
+            72
+          );
+        }
+
+        cluster.billboard.heightReference =
+          Cesium.HeightReference.CLAMP_TO_GROUND;
+        cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.CENTER;
+        cluster.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY;
+        cluster.billboard.id = {
+          entities: clusteredEntities,
+          isCluster: true,
+          callback: options.vectorEventFun,
+        };
+      };
+
+      dataSource.clustering.enabled = options.isCluster;
+      dataSource.clustering.pixelRange = pixelRange;
+      dataSource.clustering.minimumClusterSize = minimumClusterSize;
+      dataSource.clustering.clusterEvent.addEventListener(clusterHandler);
+
+      // console.log('进入wkt图层点击事件', name);
+      if (!this.layerClickHandlerWkt) {
+        // console.log('不存在点击处理程序，创建wkt点击处理程序');
+        this.layerClickHandlerWkt = new Cesium.ScreenSpaceEventHandler(
+          viewer.scene.canvas
+        );
+      }
+
+      // this.layerClickHandlerWkt = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+      this.layerClickHandlerWkt.setInputAction((click) => {
+        let position = { x: click.position.x / this.scale, y: click.position.y / this.scale };
+        const pickedObject = viewer.scene.pick(position);
+        if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
+          if (pickedObject.id.isCluster) {
+            // console.log('聚合点位');
+            this.zoomToCluster(pickedObject.id.entities, viewer);
+          } else {
+            // console.log('单个点位', pickedObject.id);
+
+            // 获取所有自定义属性
+            const properties = pickedObject.id.properties;
+            const propertyNames =
+              properties && properties.propertyNames
+                ? properties.propertyNames
+                : [];
+            // console.log('properties', properties);
+            // console.log('propertyNames', propertyNames);
+
+            const propertyValues = {};
+            propertyNames.forEach((name) => {
+              // 会存在properties比propertyNames字段多的情况，需要判断
+              if (properties["_" + name]) {
+                propertyValues[name] = properties["_" + name].getValue();
+              }
+            });
+
+            // 组成openlayers统一的接收格式
+            const res = {
+              values_: {
+                attr: propertyValues,
+              },
+            };
+
+            // 调用附加在实体上的回调函数（如果存在）
+            if (pickedObject.id.callback) {
+              pickedObject.id.callback(pickedObject.id, res);
+            }
+          }
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    },
+
+    // 删除WKT图层
+    delWktLayer (name, viewer = this.viewer) {
+      // 清理图层的悬浮事件处理器
+      const layerIndex = this.layers.findIndex((l) => l.name === name)
+      if (layerIndex >= 0) {
+        this.layers.splice(layerIndex, 1)
+      }
+
+      const existingDataSources = viewer.dataSources.getByName(name)
+      // 删除已有的数据源
+      if (existingDataSources.length) {
+        existingDataSources.forEach(v => {
+          viewer.dataSources.remove(v)
+        })
+      }
+      delete this.drawLayerObj[name]
+    },
+
+    // 设置WKT图层显示/隐藏
+    setWktLayerVisible (params) {
+      const name = params.type || params.enName || params.name
+      const layer = this.layers.find((l) => l.name === name)
+      if (layer) {
+        layer.entities.forEach((entity) => {
+          entity.show = params.active
+        })
+      }
+    },
+
+    // 获取WMS图层当前点击位置url
+    getFeatureInfoUrl (params, viewer = this.viewer) {
+      const {
+        url,
+        work,
+        name,
+        filterSql,
+        width = 256,
+        height = 256,
+        infoFormat = "application/json",
+      } = params
+
+      const clickPosition = params.position
+      const canvas = viewer.scene.canvas
+
+      // Calculate BBox around click position with a small buffer
+      const buffer = 0.0001 // You can adjust this value as needed
+      const cartographic = Cesium.Cartographic.fromCartesian(
+        viewer.camera.pickEllipsoid(clickPosition, viewer.scene.globe.ellipsoid)
+      )
+      const bbox = [
+        Cesium.Math.toDegrees(cartographic.longitude) - buffer,
+        Cesium.Math.toDegrees(cartographic.latitude) - buffer,
+        Cesium.Math.toDegrees(cartographic.longitude) + buffer,
+        Cesium.Math.toDegrees(cartographic.latitude) + buffer,
+      ].join(",")
+
+      // Calculate i and j using canvas size
+      const i = Math.round((clickPosition.x / canvas.width) * width)
+      const j = Math.round((1 - clickPosition.y / canvas.height) * height)
+
+      let _url = url
+      if (_url == "/geoserver/") {
+        _url = "https://jxbhq.zhlzz.com:8006/geoserver/"
+      }
+
+      let _filterSql = params.filterSql
+        ? `&cql_filter=${encodeURIComponent(filterSql)}`
+        : ""
+
+      const featureInfoUrl = `${_url}${work}/wms?service=WMS&version=1.1.1&request=GetFeatureInfo&layers=${work}:${name}&query_layers=${work}:${name}&bbox=${bbox}&width=${width}&height=${height}&x=${i}&y=${j}&info_format=${infoFormat}&srs=EPSG:4326${_filterSql}`
+
+      return featureInfoUrl
+    },
+
+    // 处理颜色
+    handleColor (color) {
+      // 如果是rgba需将透明调整为不透明，否则会存在图标背景有透明，文字的背景不透明的情况;
+      if (color.includes("rgba")) {
+        color = color.split(",")
+        if (color.length > 0 && color[color.length - 1] != " 1.0)") {
+          color[color.length - 1] = " 1.0)"
+        }
+
+        color = color.join(",")
+        // console.log(color);
+      }
+      return color
+    },
+
+    // 处理样式
+    handleStyle (params) {
+      let paramsDefault = {
+        isCluster: false,
+      }
+
+      // 深拷贝、不改变原对象
+      let res = deepClone(params)
+      res = Object.assign(paramsDefault, res)
+
+      // 处理统一的点、线、面样式
+      if (res.coordsStyle) {
+        res.coordsStyle = this.handleItemStyle(res.coordsStyle)
+      }
+
+      // 处理单个点、线、面的样式
+      if (res.coordsArr && Array.isArray(res.coordsArr)) {
+        res.coordsArr.forEach((item) => {
+          if (item.olstyle) {
+            item.olstyle = this.handleItemStyle(item.olstyle)
+          }
+        })
+      }
+
+      return res
+    },
+
+    // 处理单个样式
+    handleItemStyle (obj) {
+      // 初始参数
+      obj.label = false
+      obj.billboard = false
+      obj.point = false
+      obj.ellipse = false
+      obj.polyline = {
+        material: Cesium.Color.fromCssColorString("rgba(255, 255, 255, 0.5)"),
+      }
+      obj.polygon = {
+        material: Cesium.Color.fromCssColorString("rgba(255, 255, 255, 0.5)"),
+        outline: true,
+        outlineColor: Cesium.Color.fromCssColorString("#ffff00"),
+        outlineWidth: 2,
+      }
+      // 文本
+      if (obj.text) {
+        obj.label = {}
+        obj.label.font = obj.text.font
+        if (obj.text.fill && obj.text.fill.color) {
+          obj.label.fillColor = Cesium.Color.fromCssColorString(
+            this.handleColor(obj.text.fill.color)
+          )
+        }
+        if (obj.text.stroke && obj.text.stroke.color) {
+          obj.label.outlineColor = Cesium.Color.fromCssColorString(
+            this.handleColor(obj.text.stroke.color)
+          )
+          obj.label.outlineWidth = obj.text.stroke.width
+            ? obj.text.stroke.width
+            : 2
+          obj.label.style = Cesium.LabelStyle.FILL_AND_OUTLINE //有填充和边框
+        }
+
+        // 覆盖独有参数
+        if (obj.text.cesiumFont) {
+          obj.label.font = obj.text.cesiumFont
+        }
+        if (obj.text.cesiumFillColor) {
+          obj.label.fillColor = Cesium.Color.fromCssColorString(
+            this.handleColor(obj.text.cesiumColor)
+          )
+        }
+        if (obj.text.cesiumOutlineColor) {
+          obj.label.outlineColor = Cesium.Color.fromCssColorString(
+            this.handleColor(obj.text.cesiumOutlineColor)
+          )
+          obj.label.outlineWidth = obj.text.cesiumOutlineWidth
+            ? obj.text.cesiumOutlineWidth
+            : 2
+          obj.label.style = Cesium.LabelStyle.FILL_AND_OUTLINE //有填充和边框
+        }
+
+        obj.label.showBackground = false // 能不能看见背景，并不是指字体透不透明，而是字体那块板子可不可见
+        // obj.label.showBackground = true;
+        // obj.label.backgroundColor = Cesium.Color.WHITE.withAlpha(0.0);
+        obj.label.verticalOrigin = Cesium.VerticalOrigin.BOTTOM
+        obj.label.horizontalOrigin = Cesium.HorizontalOrigin.CENTER
+        obj.label.pixelOffset = new Cesium.Cartesian2(0, 16) // 调整标签位置
+
+        if (obj.text.cesiumOffsetX || obj.text.cesiumOffsetY) {
+          // console.log('进来了', obj.text.offsetX);
+          obj.label.pixelOffset = new Cesium.Cartesian2(
+            obj.text.cesiumOffsetX,
+            obj.text.cesiumOffsetY
+          ) // 调整标签位置
+        }
+
+        obj.label.disableDepthTestDistance = Number.POSITIVE_INFINITY
+        // obj.text.disableDepthTestDistance = Number.POSITIVE_INFINITY;
+        // obj.label.heightReference: Cesium.HeightReference.CLAMP_TO_GROUND; // 贴地显示
+      }
+      // 图标
+      if (obj.image && obj.image.src) {
+        obj.billboard = {}
+        // obj.billboard.image = Cesium.buildModuleUrl(obj.image.src); // 自定义图标的路径
+        obj.billboard.image = obj.image.src
+        obj.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM
+
+        if (obj.image.scale) {
+          obj.billboard.scale = obj.image.scale
+        }
+
+        if (obj.image.verticalOrigin && obj.image.verticalOrigin == "center") {
+          obj.billboard.verticalOrigin = Cesium.VerticalOrigin.CENTER
+        }
+
+        if (obj.image.cesiumOffsetX || obj.image.cesiumOffsetY) {
+          obj.billboard.pixelOffset = new Cesium.Cartesian2(
+            obj.image.cesiumOffsetX || 0,
+            obj.image.cesiumOffsetY || 0
+          ) // 调整标签位置
+        }
+        // 是否禁用深度检测
+        // if(!obj.image.isDepth){
+        obj.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY // 禁用深度检测
+        // }
+
+        // obj.billboard.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND; // 贴地显示
+      }
+
+      // 自定义，扩散效果
+      if (obj.spread && obj.spread.color) {
+        obj.billboard = false
+        obj.point = {
+          pixelSize: obj.spread.pointSize ? obj.spread.pointSize : 10,
+          // color: Cesium.Color.RED,
+          color: Cesium.Color.fromCssColorString(
+            this.handleColor(obj.spread.color)
+          ),
+          outlineColor: Cesium.Color.fromCssColorString(
+            this.handleColor(obj.spread.color)
+          ),
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        }
+
+        obj.ellipse = {
+          semiMinorAxis: obj.spread.semiMinorAxis
+            ? obj.spread.semiMinorAxis
+            : 10000.0, // 短半轴距离
+          semiMajorAxis: obj.spread.semiMajorAxis
+            ? obj.spread.semiMajorAxis
+            : 10000.0, // 长半轴距离
+          // ! 重点
+          material: new CircularDiffusionMaterialProperty({
+            // color: new Cesium.Color(1.0, 0.0, 0.0, 0.8),
+            color: Cesium.Color.fromCssColorString(
+              this.handleColor(obj.spread.color)
+            ),
+            duration: 3000,
+          }),
+        }
+      }
+
+      // 填充
+      if (obj.fill && obj.fill.color) {
+        // let _color = Cesium.Color.fromCssColorString(
+        //   this.handleColor(obj.fill.color)
+        // );
+        obj.polyline.material = Cesium.Color.fromCssColorString(
+          this.handleColor(obj.fill.color)
+        )
+        obj.polygon.material = Cesium.Color.fromCssColorString(obj.fill.color)
+      }
+
+      if (obj.stroke) {
+        if (obj.stroke.width == 0) {
+          obj.polygon.outline = false
+        } else {
+          // 如果设置了stroke，则启用outline并设置样式
+          obj.polygon.outline = true
+          if (obj.stroke.color) {
+            obj.polygon.outlineColor = Cesium.Color.fromCssColorString(
+              obj.stroke.color
+            )
+          }
+          if (obj.stroke.width) {
+            obj.polygon.outlineWidth = obj.stroke.width
+          }
+        }
+
+        // 多面边框设置在 Cesium 1.95 下无效，改为线条方式模拟多边形的边框，因此增加以下参数
+        if (obj.stroke.color)
+          obj.polyline.material = Cesium.Color.fromCssColorString(
+            this.handleColor(obj.stroke.color)
+          )
+        if (obj.stroke.width) obj.polyline.width = obj.stroke.width
+      }
+      // console.log('style', obj);
+      return obj
+    },
+
+    // 处理聚合图片图标
+    handleClusterImageIcon (url, label, width, height) {
+      // const url = params.url; // 图片地址
+      // const label = params.label; // 文字
+      // const size = params.size; // 画布大小
+
+      // 创建画布对象
+      let canvas = document.createElement("canvas")
+      canvas.width = width
+      canvas.height = height
+
+      let ctx = canvas.getContext("2d")
+
+      let promise = new Cesium.Resource.fetchImage(url).then((image) => {
+        // 异常判断
+        try {
+          ctx.drawImage(image, 0, 0, width, height)
+        } catch (e) {
+          console.log(e)
+        }
+
+        // 渲染字体
+        // font属性设置顺序：font-style, font-variant, font-weight, font-size, line-height, font-family
+        ctx.fillStyle = Cesium.Color.WHITE.toCssColorString()
+        ctx.font = "16px Microsoft YaHei"
+        ctx.textAlign = "center"
+        ctx.textBaseline = "middle"
+        ctx.fillText(label, width / 2, height / 2)
+
+        return canvas
+      })
+
+      return promise
+    },
+
+    // 处理聚合颜色图标
+    handleClusterColorIcon (color, label, size) {
+      // 创建画布对象
+      let canvas = document.createElement("canvas")
+      canvas.width = size
+      canvas.height = size
+
+      let ctx = canvas.getContext("2d")
+
+      // 绘制圆形
+      ctx.beginPath()
+      ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI)
+      ctx.fillStyle = color // 设置不透明红色
+      ctx.fill()
+
+      // 添加文字
+      ctx.font = "16px Arial"
+      ctx.fillStyle = "white"
+      ctx.textAlign = "center"
+      ctx.textBaseline = "middle"
+      ctx.fillText(label, size / 2, size / 2)
+
+      return canvas.toDataURL()
+    },
+
+    // 判断WKT格式
+    isWkt (str) {
+      // 去除字符串前后的空格并转换为大写
+      const trimmedStr = str.trim().toUpperCase()
+
+      // 定义WKT格式的几何类型前缀
+      const wktTypes = [
+        "POINT",
+        "LINESTRING",
+        "POLYGON",
+        "MULTIPOINT",
+        "MULTILINESTRING",
+        "MULTIPOLYGON",
+        "GEOMETRYCOLLECTION",
+      ]
+
+      // 检查字符串是否以任意一个WKT类型开头
+      return wktTypes.some((type) => trimmedStr.startsWith(type))
+    },
+
+    // 显示弹窗
+    addPopup (data) {
+      // console.log('cesium显示弹窗', data);
+      this.selectedEntity = data.coords
+      this.popupVisible = true
+      this.popupData = Object.assign({}, data)
+      this.$nextTick(() => {
+        this.updatePopupPosition(this.selectedEntity)
+      })
+    },
+
+    // 关闭弹窗
+    closePopup () {
+      this.popupVisible = false
+      this.selectedEntity = null
+
+      // 清除点击高亮图层
+      this.delWktLayer("light_layer")
+    },
+
+    // 更新弹窗位置
+    updatePopupPosition (entity, viewer = this.viewer) {
+      // 画布高度
+      const canvasHeight = viewer.scene.canvas.height
+
+      const position = entity.position.getValue(viewer.clock.currentTime)
+
+      // 将 Cesium 世界坐标转换为屏幕坐标。
+      // 这一步是将 3D 世界中的点位转换为 2D 屏幕上的像素位置。
+      const canvasPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+        viewer.scene,
+        position
+      )
+
+        if (Cesium.defined(canvasPosition)) {
+        // 将实体置于视图中心
+        const heading = viewer.camera.heading
+        const pitch = viewer.camera.pitch
+        const range = viewer.camera.positionCartographic.height
+        viewer.camera.flyToBoundingSphere(new Cesium.BoundingSphere(position, 0), {
+          offset: new Cesium.HeadingPitchRange(heading, pitch, range),
+          duration: 1.5
+        })
+
+        const popupElement = this.$refs.cesiumPopupRef.$refs.popupRef
+
+        viewer.cesiumWidget.container.appendChild(popupElement)
+        viewer.scene.postRender.addEventListener(() => {
+          const windowPosition = new Cesium.Cartesian2()
+          Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+            viewer.scene,
+            position,
+            windowPosition
+          )
+          const popupWidth = popupElement.offsetWidth
+          const popupHeight = popupElement.offsetHeight
+
+          this.popupPosition = {
+            x: windowPosition.x - popupWidth / 2,
+            y: canvasHeight - windowPosition.y + 100,
+          }
+        }, this)
+      }
+    },
+
+    // 缩放聚合数据计算
+    zoomToCluster (clusteredEntities, viewer = this.viewer) {
+      const positions = clusteredEntities.map((entity) =>
+        entity.position.getValue(Cesium.JulianDate.now())
+      )
+      const boundingSphere = Cesium.BoundingSphere.fromPoints(positions)
+
+      // 获取当前相机的 heading 和 pitch
+      const currentHeading = viewer.camera.heading
+      const currentPitch = viewer.camera.pitch
+
+      // 定义最小缩放高度，以防止无限放大
+      const minZoomHeight = 2000 // 单位：米，根据实际需求调整
+
+      const targetHeight = Math.max(boundingSphere.radius * 3, minZoomHeight) // 将目标高度增大一些
+      const fovAdjustment = 1.5 // 调整视场角度，视情况增大此值
+
+      viewer.camera.flyToBoundingSphere(boundingSphere, {
+        duration: 2.0, // 缓慢放大的效果
+        // offset: new Cesium.HeadingPitchRange(0, -Math.PI / 2, targetHeight), // 无论当前什么视角，都调整为俯视
+        offset: new Cesium.HeadingPitchRange(
+          currentHeading,
+          currentPitch,
+          targetHeight * fovAdjustment
+        ), // 不改变当前朝向和角度
+        complete: () => {
+          // 限制放大级别
+          const cameraHeight = this.viewer.camera.positionCartographic.height
+          // console.log('cameraHeight', cameraHeight);
+          if (cameraHeight < minZoomHeight) {
+            this.viewer.camera.positionCartographic.height = minZoomHeight
+          }
+        },
+      })
+    },
+
+    // 开始环绕
+    startSurround (params = {}, viewer = this.viewer) {
+      this.stopSurround()
+
+      if (!params.center) {
+        // 默认，以点为中心，向外环绕点位
+        const center = viewer.scene.camera.positionCartographic
+        this.surroundHandler = viewer.clock.onTick.addEventListener(() => {
+          const rotationRate = 0.001 // 控制旋转速度
+          const heading = viewer.scene.camera.heading + rotationRate
+          viewer.scene.camera.setView({
+            destination: Cesium.Cartesian3.fromRadians(
+              center.longitude,
+              center.latitude,
+              center.height
+            ),
+            orientation: {
+              heading: heading,
+              pitch: viewer.scene.camera.pitch,
+              roll: viewer.scene.camera.roll,
+            },
+          })
+        })
+      } else {
+        // 向内环绕点位
+        let heading = 0 // 初始朝向
+        let center = params.center // 中心点
+        let pitch = params.pitch
+          ? Cesium.Math.toRadians(params.pitch)
+          : Cesium.Math.toRadians(-30) // 俯仰角
+        let range = params.range ? params.range : 20000 // 距离，单位米，1000 = 1公里 2万公里
+        let stopAngle = params.stopAngle ? params.stopAngle : 360 // 停止角度，360为转一圈
+
+        this.surroundHandler = () => {
+          // 每次更新的角度
+          heading += 0.1
+
+          // console.log(`Current heading: ${heading}、${stopAngle}`); // 调试日志
+          if (stopAngle && heading >= stopAngle) {
+            // this.stopSurround(viewer);
+            viewer.clock.onTick.removeEventListener(this.surroundHandler)
+            this.surroundHandler = null
+            return
+          }
+
+          // 计算新的相机位置，HeadingPitchRange用于改变相机的姿态，HeadingPitchRange跟HeadingPitchRoll的使用方式差不多，不同的是，HeadingPitchRoll只能在原点进行姿态调整，HeadingPitchRange可以对距离目标点进行远近调整，这里我们设置的是距离，同时有个30度的俯角。
+          var offset = new Cesium.HeadingPitchRange(
+            Cesium.Math.toRadians(heading),
+            pitch,
+            range
+          )
+
+          // 设置相机视图
+          viewer.camera.lookAt(center, offset)
+
+          // 解决在使用camera.lookAt之后，造成问题:cesium内置的鼠标控制相机功能发生改变，例如：鼠标右键的挪移后相机是绕中心点旋转，而不是平移，flyto也会变得很诡异(虽然跳到目标点正常，但是相机飞的非常高
+          viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+        }
+
+        viewer.clock.onTick.addEventListener(this.surroundHandler)
+
+        // 设置点击屏幕停止转动
+        viewer.screenSpaceEventHandler.setInputAction(() => {
+          // console.log('停止');
+          this.stopSurround(viewer)
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+      }
+    },
+
+    // 停止环绕
+    stopSurround (viewer = this.viewer) {
+      if (this.surroundHandler) {
+        this.surroundHandler()
+        viewer.clock.onTick.removeEventListener(this.surroundHandler)
+        this.surroundHandler = null
+      }
+    },
+
+    // 环绕开关
+    toggleSurround (viewer = this.viewer) {
+      if (this.isSurrounding) {
+        this.stopSurround(viewer)
+      } else {
+        this.startSurround({}, viewer)
+      }
+      this.isSurrounding = !this.isSurrounding
+    },
+
+    // 根据图层名称移除图层
+    removeLayerByName (layerName) {
+      this.delWmsLayer(layerName)
+      this.delWktLayer(layerName)
+    },
+
+    // 根据WKT返回几何对象
+    getFeatureByWKT (wkt) {
+      try {
+        // 使用WKT解析器解析WKT字符串
+        const geoJson = WKT.parse(wkt)
+        // 返回一个具有 getCoordinates 方法的对象，以兼容原有的调用方式
+        return {
+          getCoordinates () {
+            return geoJson.coordinates
+          },
+          // 保留原始数据
+          coordinates: geoJson.coordinates,
+          type: geoJson.type,
+          geometry: geoJson,
+        }
+      } catch (error) {
+        console.error("WKT解析失败:", error)
+        return null
+      }
+    },
+
+    // 根据WKT返回坐标数组
+    getCoordinatesByWkt (wkt) {
+      const feature = this.getFeatureByWKT(wkt)
+      if (feature && feature.coordinates) {
+        return feature.coordinates
+      }
+      return null
+    },
+
+    // 根据WKT返回长度或面积单位米
+    getAreaByWkt (wkt, obj = { radius: 6378137, projection: "EPSG:4326" }) {
+      try {
+        // 解析WKT为GeoJSON
+        const geoJson = WKT.parse(wkt)
+        let output = 0
+
+        if (geoJson.type === "Polygon" || geoJson.type === "MultiPolygon") {
+          // 计算面积
+          output = this.calculatePolygonArea(geoJson)
+        } else if (
+          geoJson.type === "LineString" ||
+          geoJson.type === "MultiLineString"
+        ) {
+          // 计算长度
+          output = this.calculateLineLength(geoJson)
+        }
+
+        return output
+      } catch (error) {
+        console.error("WKT解析失败:", error)
+        return 0
+      }
+    },
+
+    // 计算多边形面积（平方米）
+    calculatePolygonArea (geoJson) {
+      let totalArea = 0
+
+      if (geoJson.type === "Polygon") {
+        totalArea = this.calculateSinglePolygonArea(geoJson.coordinates)
+      } else if (geoJson.type === "MultiPolygon") {
+        for (const polygon of geoJson.coordinates) {
+          totalArea += this.calculateSinglePolygonArea(polygon)
+        }
+      }
+
+      return totalArea
+    },
+
+    // 计算单个多边形面积
+    calculateSinglePolygonArea (coordinates) {
+      // 使用球面多边形面积计算公式
+      const rings = coordinates
+      let area = 0
+
+      for (let i = 0; i < rings.length; i++) {
+        const ring = rings[i]
+        const ringArea = this.calculateRingArea(ring)
+        if (i === 0) {
+          area += ringArea
+        } else {
+          area -= ringArea // 内环减去面积
+        }
+      }
+
+      return Math.abs(area)
+    },
+
+    // 计算环的面积
+    calculateRingArea (coordinates) {
+      let area = 0
+      const len = coordinates.length
+
+      for (let i = 0; i < len; i++) {
+        const j = (i + 1) % len
+        const xi = (coordinates[i][0] * Math.PI) / 180
+        const yi = (coordinates[i][1] * Math.PI) / 180
+        const xj = (coordinates[j][0] * Math.PI) / 180
+        const yj = (coordinates[j][1] * Math.PI) / 180
+
+        area += (xj - xi) * (2 + Math.sin(yi) + Math.sin(yj))
+      }
+
+      area = (area * 6378137 * 6378137) / 2
+      return area
+    },
+
+    // 计算线条长度（米）
+    calculateLineLength (geoJson) {
+      let totalLength = 0
+
+      if (geoJson.type === "LineString") {
+        totalLength = this.calculateSingleLineLength(geoJson.coordinates)
+      } else if (geoJson.type === "MultiLineString") {
+        for (const line of geoJson.coordinates) {
+          totalLength += this.calculateSingleLineLength(line)
+        }
+      }
+
+      return totalLength
+    },
+
+    // 计算单条线的长度
+    calculateSingleLineLength (coordinates) {
+      let length = 0
+
+      for (let i = 0; i < coordinates.length - 1; i++) {
+        const p1 = coordinates[i]
+        const p2 = coordinates[i + 1]
+        length += this.calculateDistance(p1, p2)
+      }
+
+      return length
+    },
+
+    // 计算两点间距离（米）
+    calculateDistance (p1, p2) {
+      const lat1 = (p1[1] * Math.PI) / 180
+      const lat2 = (p2[1] * Math.PI) / 180
+      const deltaLat = ((p2[1] - p1[1]) * Math.PI) / 180
+      const deltaLon = ((p2[0] - p1[0]) * Math.PI) / 180
+
+      const a =
+        Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
+        Math.cos(lat1) *
+        Math.cos(lat2) *
+        Math.sin(deltaLon / 2) *
+        Math.sin(deltaLon / 2)
+      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+
+      return 6378137 * c // 地球半径 * c
+    },
+
+    // 获取相机位置到地图中心点距离
+    getCameraDistance () {
+      let ray = this.viewer.camera.getPickRay((new Cesium.Cartesian2(this.viewer.canvas.clientWidth / 2, this.viewer.canvas.clientHeight / 2)))
+      const intersection = this.viewer.scene.globe.pick(ray, this.viewer.scene)
+      let range = 0
+      if (intersection) {
+        const distance = Cesium.Cartesian3.distance(this.viewer.camera.position, intersection)
+        range = parseFloat(distance.toFixed(1))
+      }
+      return range
+    },
+
+    // 三维地图绘制图层方法
+    drawLayer (data, callback) {
+      const { viewer } = this
+      if (!data || !data.type || !data.name) return
+      // 清除测量工具相关的点位
+      if (this.measureTool && this.measureTool._drawLayer) {
+        this.measureTool._drawLayer.entities.removeAll()
+      }
+      // 创建或获取数据源
+      if (!this.drawLayerObj[data.name]) {
+        this.drawLayerObj[data.name] = new Cesium.CustomDataSource(data.name)
+        viewer.dataSources.add(this.drawLayerObj[data.name])
+      }
+
+      // 如果是单一绘制模式，清除之前的要素
+      if (data.single === true) {
+        this.drawLayerObj[data.name].entities.removeAll()
+      }
+
+      // 根据类型进行绘制
+      switch (data.type) {
+        case "Point":
+          this.drawPoint(data, callback)
+          break
+        case "LineString":
+          this.drawLineString(data, callback)
+          break
+        case "Polygon":
+          this.drawPolygon(data, callback)
+          break
+        default:
+          console.warn("不支持的绘制类型:", data.type)
+      }
+    },
+
+     // 绘制点
+    drawPoint: function (data, callback) {
+      const viewer = this.viewer;
+      const _this = this;
+
+      // 设置鼠标样式
+      const style = `url(${require('./imgs/circle.png')}) 8 8, auto`;
+      this.viewer.scene.canvas.style.cursor = style;
+      // 创建点击处理器(场景级)
+      _this.drawHandler = new Cesium.ScreenSpaceEventHandler(
+        viewer.scene.canvas
+      );
+      let heightPoint;
+      _this.drawHandler.setInputAction(async function (click) {
+        let pickedPosition = viewer.scene.pickPosition(click.position);
+        if (!pickedPosition) {
+          pickedPosition = viewer.camera.pickEllipsoid(
+            click.position,
+            viewer.scene.globe.ellipsoid
+          );
+        }
+        if (!heightPoint) {
+          heightPoint = pickedPosition;
+        }
+        if (!pickedPosition) return;
+
+        // 转换为地理坐标
+        const cartographic = Cesium.Cartographic.fromCartesian(pickedPosition);
+        const longitude = Cesium.Math.toDegrees(cartographic.longitude);
+        const latitude = Cesium.Math.toDegrees(cartographic.latitude);
+        // 构造结果
+        const result = {
+          type: "Point",
+          coords: [longitude, latitude],
+          coordinate: `POINT(${longitude} ${latitude})`,
+          layerName: data.name
+        };
+        // 调用回调
+        if (callback && typeof callback === "function") {
+          callback(result);
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    },
+
+    // 绘制线
+    drawLineString: function (data, callback) {
+      const viewer = this.viewer;
+      const _this = this;
+
+      // 使用现有的测距工具，但去掉测量功能
+      const drawStyle = {
+        line: {
+          width: data.style?.stroke?.width || 2,
+          material: data.style?.stroke?.color
+            ? Cesium.Color.fromCssColorString(data.style.stroke.color)
+            : Cesium.Color.fromCssColorString("#0099ff"),
+        },
+        point: {
+          color: data.style?.point?.color ? Cesium.Color.fromCssColorString(data.style.point.color) : Cesium.Color.RED,
+          pixelSize: 10,
+          outlineColor: data.style?.point?.outlineColor ? Cesium.Color.fromCssColorString(data.style.point.outlineColor) : Cesium.Color.WHITE,
+          outlineWidth: 3,
+          show: true,
+        },
+      };
+      this.measureTool.drawLineMeasureGraphics({
+        clampToGround: true,
+        measure: false, // 不显示测量结果
+        layerName: data.name,
+        style: drawStyle,
+        callback: (result) => {
+          if (result && result.points) {
+            // 转换坐标
+            const coordinates = result.points.map((position) => {
+              //将拿到的坐标转换成笛卡尔坐标格式
+              const cartesian = Cesium.Cartesian3.fromDegrees(
+                position.lng,    // 必选：经度（角度制）
+                position.lat,    // 必选：纬度（角度制）
+                position.alt,    // 可选：高程（默认 0 米）
+                Cesium.Ellipsoid.WGS84,  // 可选：参考椭球（默认 WGS84，无需修改）
+                undefined        // 可选：复用结果对象（优化性能，非必需）
+              );
+              // Cesium.Cartographic.fromCartesian接受的格式是笛卡尔坐标格式,转成大地格式
+              const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+              return [
+                //将大地格式转成角度制,大地格式是弧度,转成角度制(如 117.28°、27.58°)
+                Cesium.Math.toDegrees(cartographic.longitude),
+                Cesium.Math.toDegrees(cartographic.latitude),
+              ];
+            });
+            // 构造WKT
+            const coordString = coordinates
+              .map((coord) => `${coord[0]} ${coord[1]}`)
+              .join(",");
+            const wktValue = `LINESTRING(${coordString})`;
+
+            const finalResult = {
+              type: "LineString",
+              coordinates: coordinates,
+              wktValue: wktValue,
+              entity: result.entity,
+              layerName: data.name,
+              length: result.distance || 0,
+            };
+
+            // 如果指定了图层，将实体移动到指定图层
+            if (_this.drawLayerObj[data.name] && result.entity) {
+              // 从测量图层移除
+              _this.measureTool._drawLayer.entities.remove(result.entity);
+              // 添加到指定图层
+              _this.drawLayerObj[data.name].entities.add(result.entity);
+            }
+
+            if (callback && typeof callback === "function") {
+              callback(
+                finalResult,
+                _this.drawLayerObj[data.name].entities.values
+              );
+            }
+          }
+        },
+      });
+    },
+
+     // 绘制面
+    drawPolygon: function (data, callback) {
+      const viewer = this.viewer;
+      const _this = this;
+
+      // 使用现有的测面积工具，但去掉测量功能
+      const drawStyle = {
+        line: {
+          width: data.style?.stroke?.width || 2,
+          material: data.style?.stroke?.color
+            ? Cesium.Color.fromCssColorString(data.style.stroke.color)
+            : Cesium.Color.fromCssColorString("#0099ff"),
+          show: true,
+        },
+        point: {
+          pixelSize: 8,
+          outlineColor: Cesium.Color.WHITE,
+          outlineWidth: 2,
+          show: true,
+        },
+        polygon: {
+          material: data.style?.fill?.color
+            ? Cesium.Color.fromCssColorString(data.style.fill.color)
+            : Cesium.Color.fromCssColorString("rgba(255, 255, 255, 0.2)"),
+        },
+        centerPoint: {
+          pixelSize: 5,
+          outlineColor: Cesium.Color.RED,
+          outlineWidth: 2,
+        },
+      };
+
+      this.measureTool.drawAreaMeasureGraphics({
+        clampToGround: true,
+        measure: false, // 不显示测量结果
+        layerName: data.name,
+        style: drawStyle,
+        callback: (result) => {
+          console.log("拖拽了")
+          if (result && result.points.length) {
+            const coordinates = result.points.map((item) => {
+              return [
+                item.lng, // 经度已经是度数格式
+                item.lat, // 纬度已经是度数格式
+              ];
+            });
+
+            // 构造WKT
+            const coordString = coordinates
+              .map((coord) => `${coord[0]} ${coord[1]}`)
+              .join(",");
+            const wktValue = `POLYGON((${coordString}))`;
+
+            const finalResult = {
+              type: "Polygon",
+              coords: [coordinates], // 多边形需要嵌套数组
+              wktValue: wktValue,
+              entity: result.entity,
+              layerName: data.name,
+              area: result.area || 0,
+            };
+
+            // 如果指定了图层，将实体移动到指定图层
+            if (_this.drawLayerObj[data.name] && result.entity) {
+              // 从测量图层移除
+              _this.measureTool._drawLayer.entities.remove(result.entity);
+              // 添加到指定图层
+              _this.drawLayerObj[data.name].entities.add(result.entity);
+            }
+
+            if (callback && typeof callback === "function") {
+              callback(finalResult);
+            }
+          }
+        },
+      });
+    },
+    // 获取绘制样式
+    getDrawStyle: function (data, type) {
+      const defaultStyles = {
+        point: {
+          pixelSize: 10, //控制点在屏幕上的显示大小，值越大点越大，值越小点越小
+          color:
+            data.style && data.style.color
+              ? Cesium.Color.fromCssColorString(data.style.color)
+              : Cesium.Color.fromCssColorString("rgba(255,255,255,0)"),
+          outlineColor:
+            data.style && data.style.color
+              ? Cesium.Color.fromCssColorString(data.style.outlineColor)
+              : Cesium.Color.fromCssColorString("rgba(255,255,255,0)"), //设置点的外边框颜色，在点的周围绘制一个边框，增强点的可视性和层次感
+          outlineWidth:
+            data.style && data.style.outlineWidth
+              ? data.style.outlineWidth
+              : undefined, //设置点的外边框宽度，默认2
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //设置点的高度参考，默认CLAMP_TO_GROUND
+          disableDepthTestDistance: Number.POSITIVE_INFINITY, //设置点的不进行深度测试的距离，默认无限大
+        },
+        line: {
+          width: 2,
+          material: Cesium.Color.YELLOW,
+          clampToGround: true,
+        },
+        polygon: {
+          material: Cesium.Color.YELLOW.withAlpha(0.3),
+          outline: true,
+          outlineColor: Cesium.Color.YELLOW,
+          outlineWidth: 2,
+        },
+      }
+
+      let style = defaultStyles[type] || {}
+
+      // 应用用户自定义样式
+      if (data.style) {
+        if (type === "point" && data.style.point) {
+          style = Object.assign(style, data.style.point)
+        }
+
+        if (type === "line") {
+          if (data.style.stroke) {
+            if (data.style.stroke.color) {
+              style.material = Cesium.Color.fromCssColorString(
+                data.style.stroke.color
+              )
+            }
+            if (data.style.stroke.width) {
+              style.width = data.style.stroke.width
+            }
+          }
+        }
+
+        if (type === "polygon") {
+          if (data.style.fill && data.style.fill.color) {
+            style.material = Cesium.Color.fromCssColorString(
+              data.style.fill.color
+            )
+          }
+          if (data.style.stroke) {
+            if (data.style.stroke.color) {
+              style.outlineColor = Cesium.Color.fromCssColorString(
+                data.style.stroke.color
+              )
+            }
+            if (data.style.stroke.width) {
+              style.outlineWidth = data.style.stroke.width
+            }
+          }
+        }
+      }
+
+      return style
+    },
+
+    // 清除绘制图层
+    clearDrawLayer (obj) {
+      const name = obj.name
+      this.viewer.scene.canvas.style.cursor = 'default'
+      // 清除指定图层的所有实体和样式
+      if (this.drawLayerObj[name]) {
+        const dataSource = this.drawLayerObj[name]
+        //清除所有实体
+        dataSource.entities.removeAll()
+      }
+      // 清除测量工具相关的点位
+      if (this.measureTool && this.measureTool._drawLayer) {
+        this.measureTool._drawLayer.entities.removeAll()
+      }
+      // 如果有正在进行的绘制，清除对应的handler
+      if (this.drawHandler && !obj.active) {
+        this.drawHandler.destroy()
+        this.drawHandler = null
+      }
+    },
+
+    // 通过WKT获取中心点
+    getCenterByWkt: function (wkt, only = false) {
+      if (!wkt) {
+        return null
+      }
+
+      try {
+        // 解析WKT为GeoJSON
+        const geoJson = WKT.parse(wkt)
+        return this.calculateGeometryCenter(geoJson, only)
+      } catch (error) {
+        console.error("WKT解析失败:", error)
+        return null
+      }
+    },
+
+    // 计算几何图形中心点（三维版本）
+    calculateGeometryCenter: function (geoJson, only = false) {
+      const type = geoJson.type
+      const coordinates = geoJson.coordinates
+
+      switch (type) {
+        case "Point":
+          // 点类型直接返回坐标
+          return coordinates
+
+        case "MultiPoint":
+          // 多点类型
+          if (only) {
+            return this.calculatePointsBoundsCenter(coordinates)
+          } else {
+            return coordinates // 返回所有点坐标
+          }
+
+        case "LineString":
+          // 线类型
+          if (only) {
+            return this.calculatePointsBoundsCenter(coordinates)
+          } else {
+            return [
+              coordinates[0], // 起点
+              coordinates[coordinates.length - 1], // 终点
+            ]
+          }
+
+        case "MultiLineString":
+          // 多线类型
+          const allPoints = []
+          coordinates.forEach((line) => {
+            if (only) {
+              allPoints.push(...line)
+            } else {
+              allPoints.push(line[0]) // 起点
+              allPoints.push(line[line.length - 1]) // 终点
+            }
+          })
+          return only ? this.calculatePointsBoundsCenter(allPoints) : allPoints
+
+        case "Polygon":
+          // 多边形返回内部点或几何中心
+          return this.calculatePolygonCenter(coordinates, only)
+
+        case "MultiPolygon":
+          if (only) {
+            // 返回整体边界框的中心点
+            return this.calculateMultiPolygonBoundsCenter(coordinates)
+          } else {
+            // 返回每个多边形的中心点
+            return coordinates.map((polygon) =>
+              this.calculatePolygonCenter(polygon, true)
+            )
+          }
+
+        default:
+          console.warn("不支持的几何类型:", type)
+          return null
+      }
+    },
+
+    // 计算多边形中心点
+    calculatePolygonCenter: function (coordinates, only = false) {
+      if (only) {
+        // 返回边界框中心点
+        return this.calculatePointsBoundsCenter(coordinates[0]) // 外环
+      } else {
+        // 返回多边形的几何重心
+        return this.calculatePolygonCentroid(coordinates[0]) // 外环
+      }
+    },
+
+    // 计算多多边形边界框中心
+    calculateMultiPolygonBoundsCenter: function (coordinates) {
+      const allPoints = []
+      // 收集所有多边形的所有点
+      coordinates.forEach((polygon) => {
+        polygon[0].forEach((point) => {
+          // 外环
+          allPoints.push(point)
+        })
+      })
+      return this.calculatePointsBoundsCenter(allPoints)
+    },
+
+    // 计算点集的边界框中心点
+    calculatePointsBoundsCenter: function (coordinates) {
+      if (!coordinates || coordinates.length === 0) {
+        return null
+      }
+
+      let minLng = Infinity,
+        minLat = Infinity
+      let maxLng = -Infinity,
+        maxLat = -Infinity
+
+      coordinates.forEach((point) => {
+        const lng = point[0]
+        const lat = point[1]
+        minLng = Math.min(minLng, lng)
+        maxLng = Math.max(maxLng, lng)
+        minLat = Math.min(minLat, lat)
+        maxLat = Math.max(maxLat, lat)
+      })
+
+      return [(minLng + maxLng) / 2, (minLat + maxLat) / 2]
+    },
+
+    // 计算多边形重心（使用面积加权的方法）
+    calculatePolygonCentroid: function (coordinates) {
+      if (!coordinates || coordinates.length < 3) {
+        return this.calculatePointsBoundsCenter(coordinates)
+      }
+
+      let area = 0
+      let centroidX = 0
+      let centroidY = 0
+
+      // 使用shoelace公式计算面积和重心
+      for (let i = 0; i < coordinates.length - 1; i++) {
+        const x0 = coordinates[i][0]
+        const y0 = coordinates[i][1]
+        const x1 = coordinates[i + 1][0]
+        const y1 = coordinates[i + 1][1]
+
+        const cross = x0 * y1 - x1 * y0
+        area += cross
+        centroidX += (x0 + x1) * cross
+        centroidY += (y0 + y1) * cross
+      }
+
+      area = area / 2
+      if (Math.abs(area) < 1e-10) {
+        // 如果面积太小，返回边界框中心
+        return this.calculatePointsBoundsCenter(coordinates)
+      }
+
+      centroidX = centroidX / (6 * area)
+      centroidY = centroidY / (6 * area)
+
+      return [centroidX, centroidY]
+    },
+
+    // 根据坐标生成WKT（三维版本）
+    getWKTByCoordinates: function (coordinates, isArray = false) {
+      // 如果是Cesium.Cartesian3对象（三维笛卡尔坐标）
+      if (
+        coordinates &&
+        coordinates.x !== undefined &&
+        coordinates.y !== undefined &&
+        coordinates.z !== undefined
+      ) {
+        // 转换为地理坐标（弧度）
+        const cartographic = Cesium.Cartographic.fromCartesian(coordinates)
+        // 转换为度数
+        const lng = Cesium.Math.toDegrees(cartographic.longitude)
+        const lat = Cesium.Math.toDegrees(cartographic.latitude)
+        if (isArray) {
+          return [lng, lat]
+        } else {
+          return `POINT(${lng} ${lat})`
+        }
+      }
+
+      // 如果是二维数组格式 [lng, lat]
+      if (Array.isArray(coordinates) && coordinates.length >= 2) {
+        const lng = coordinates[0]
+        const lat = coordinates[1]
+        return `POINT(${lng} ${lat})`
+      }
+
+      console.error("getWKTByCoordinates: 坐标参数格式不正确")
+      return null
+    },
+
+    // 更新地图宽度
+    updateSizeFunction () {
+      setTimeout(() => {
+        if (this.viewer) {
+          // 强制重新计算容器大小
+          this.viewer.container.getBoundingClientRect()
+          // 请求场景重新渲染
+          this.viewer.scene.requestRender()
+          // 刷新相机
+          this.viewer.camera.moveEnd.raiseEvent()
+        }
+      }, 10)
+    },
+
+    // 获取根据wkt值返回缓冲区的wkt
+    getBufferWkt: function (wkt, buffer, mapType) {
+      try {
+        // 解析WKT获取坐标
+        const geoJson = WKT.parse(wkt)
+        const coordinates = geoJson.coordinates
+
+        if (mapType === "circle") {
+          // 如果是圆形，直接返回圆形的WKT
+          const center = coordinates
+          return `CIRCLE(${center[0]} ${center[1]} ${buffer})`
+        } else {
+          // 计算缓冲区的点
+          const bufferPoints = this.calculateBufferPoints(coordinates, buffer)
+
+          // 根据几何类型生成不同的WKT
+          if (geoJson.type === "Point") {
+            // 点的缓冲区是一个圆，返回多边形WKT
+            const polygonCoords = bufferPoints
+              .map((point) => `${point[0]} ${point[1]}`)
+              .join(",")
+            return `POLYGON((${polygonCoords}))`
+          } else if (geoJson.type === "LineString") {
+            // 线的缓冲区是一个带状多边形
+            const leftPoints = bufferPoints.left
+            const rightPoints = bufferPoints.right.reverse()
+            const allPoints = [...leftPoints, ...rightPoints, leftPoints[0]]
+            const polygonCoords = allPoints
+              .map((point) => `${point[0]} ${point[1]}`)
+              .join(",")
+            return `POLYGON((${polygonCoords}))`
+          } else if (geoJson.type === "Polygon") {
+            // 多边形的缓冲区是一个更大的多边形
+            const outerRing = this.calculatePolygonBuffer(
+              coordinates[0],
+              buffer
+            )
+            const polygonCoords = outerRing
+              .map((point) => `${point[0]} ${point[1]}`)
+              .join(",")
+            return `POLYGON((${polygonCoords}))`
+          }
+        }
+      } catch (error) {
+        console.error("计算缓冲区失败:", error)
+        return wkt
+      }
+    },
+
+    // 计算缓冲区的点
+    calculateBufferPoints (coordinates, buffer) {
+      if (Array.isArray(coordinates[0])) {
+        // 线或多边形
+        const points = []
+        const leftPoints = []
+        const rightPoints = []
+
+        for (let i = 0; i < coordinates.length - 1; i++) {
+          const start = coordinates[i]
+          const end = coordinates[i + 1]
+
+          // 计算垂直于线段的向量
+          const dx = end[0] - start[0]
+          const dy = end[1] - start[1]
+          const length = Math.sqrt(dx * dx + dy * dy)
+
+          // 归一化并乘以缓冲区距离
+          const normalX = (-dy / length) * buffer
+          const normalY = (dx / length) * buffer
+
+          // 添加左右两侧的点
+          leftPoints.push([start[0] + normalX, start[1] + normalY])
+          rightPoints.push([start[0] - normalX, start[1] - normalY])
+
+          if (i === coordinates.length - 2) {
+            leftPoints.push([end[0] + normalX, end[1] + normalY])
+            rightPoints.push([end[0] - normalX, end[1] - normalY])
+          }
+        }
+
+        return { left: leftPoints, right: rightPoints }
+      } else {
+        // 单点
+        const points = []
+        const segments = 32 // 圆形的分段数
+
+        for (let i = 0; i <= segments; i++) {
+          const angle = (i / segments) * Math.PI * 2
+          const x = coordinates[0] + Math.cos(angle) * buffer
+          const y = coordinates[1] + Math.sin(angle) * buffer
+          points.push([x, y])
+        }
+
+        return points
+      }
+    },
+
+    // 计算多边形缓冲区
+    calculatePolygonBuffer (ring, buffer) {
+      const bufferPoints = []
+      const segments = 32 // 圆角的分段数
+
+      for (let i = 0; i < ring.length - 1; i++) {
+        const current = ring[i]
+        const next = ring[i + 1]
+        const prev = i > 0 ? ring[i - 1] : ring[ring.length - 2]
+
+        // 计算当前边的方向向量
+        const dx = next[0] - current[0]
+        const dy = next[1] - current[1]
+        const length = Math.sqrt(dx * dx + dy * dy)
+
+        // 计算法向量
+        const normalX = (-dy / length) * buffer
+        const normalY = (dx / length) * buffer
+
+        // 添加缓冲点
+        bufferPoints.push([current[0] + normalX, current[1] + normalY])
+
+        // 在角点添加圆弧
+        if (i < ring.length - 2) {
+          const nextDx = ring[i + 2][0] - next[0]
+          const nextDy = ring[i + 2][1] - next[1]
+          const nextLength = Math.sqrt(nextDx * nextDx + nextDy * nextDy)
+          const nextNormalX = (-nextDy / nextLength) * buffer
+          const nextNormalY = (nextDx / nextLength) * buffer
+
+          // 添加圆弧点
+          for (let j = 1; j < segments; j++) {
+            const t = j / segments
+            const x = next[0] + normalX * (1 - t) + nextNormalX * t
+            const y = next[1] + normalY * (1 - t) + nextNormalY * t
+            bufferPoints.push([x, y])
+          }
+        }
+      }
+
+      // 闭合多边形
+      bufferPoints.push(bufferPoints[0])
+
+      return bufferPoints
+    },
+
+    // 加载轨迹回放  trackData轨迹数据 obj 轨迹回放配置  frustumOption视椎体配置
+    loadTrackPlayBackData (trackData, obj = {}, frustumOption) {
+      const sampledPosition = new Cesium.SampledPositionProperty()  //位置采样
+      const sampledHeading = new Cesium.SampledProperty(Number)     //偏航角采样
+      const sampledPitch = new Cesium.SampledProperty(Number)       //俯仰角
+      const startTime = new Date(trackData[0].receiveTime)
+      const endTime = new Date(trackData[trackData.length - 1].receiveTime)
+      const start = Cesium.JulianDate.fromDate(startTime)
+      const stop = Cesium.JulianDate.fromDate(endTime)
+
+      this.viewer.clock.startTime = start.clone()
+      this.viewer.clock.stopTime = stop.clone()
+      this.viewer.clock.currentTime = start.clone()
+      this.viewer.clock.multiplier = obj.speed || 5
+      this.viewer.clock.shouldAnimate = true
+      this.viewer.clock.clockRange = Cesium.ClockRange.CLAMPED
+      this.viewer.timeline.zoomTo(start, stop)
+
+      // 创建自定义姿态属性，处理垂直运动时的姿态计算
+      const orientationProperty = new Cesium.CallbackProperty((time) => {
+        const position = sampledPosition.getValue(time)
+        if (!position) return
+
+        // 获取当前和前一个时间点的位置来计算速度
+        const currentTime = Cesium.JulianDate.toDate(time)
+        const prevTime = new Date(currentTime.getTime() - 1000) // 1秒前
+        const prevJulianTime = Cesium.JulianDate.fromDate(prevTime)
+        const prevPosition = sampledPosition.getValue(prevJulianTime)
+
+        if (!prevPosition) {
+          // 如果没有前一个位置，使用正北方向
+          return Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(0, 0, 0))
+        }
+        // 计算偏航角
+        let prev = [Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(prevPosition).longitude), Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(prevPosition).latitude)]
+        let cur = [Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(position).longitude), Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(position).latitude)]
+        let heading = Math.round(turf.bearing(prev, cur))
+
+        // 计算速度向量
+        const velocity = Cesium.Cartesian3.subtract(position, prevPosition, new Cesium.Cartesian3())
+        const velocityMagnitude = Cesium.Cartesian3.magnitude(velocity)
+
+        // 计算水平速度和垂直速度
+        const up = Cesium.Cartesian3.normalize(position, new Cesium.Cartesian3())
+        const dotProduct = Cesium.Cartesian3.dot(velocity, up)
+        const verticalComponent = Cesium.Cartesian3.multiplyByScalar(up, dotProduct, new Cesium.Cartesian3())
+        const velocityHorizontal = Cesium.Cartesian3.subtract(velocity, verticalComponent, new Cesium.Cartesian3())
+        const horizontalMagnitude = Cesium.Cartesian3.magnitude(velocityHorizontal)
+
+        // 垂直运动，偏航角设为0（正北）
+        if (horizontalMagnitude < velocityMagnitude * 0.1) {
+          return Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(0, 0, 0))
+        } else {
+          return Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(heading), 0, 0))
+        }
+      }, false)
+      trackData.forEach(point => {
+        const time = Cesium.JulianDate.fromDate(new Date(point.receiveTime))
+        let position = Cesium.Cartesian3.fromDegrees(point.longitude, point.latitude, point.height)
+        sampledPosition.addSample(time, position)
+        sampledHeading.addSample(time, point.gimbalYawDegree)
+        sampledPitch.addSample(time, point.gimbalPitchDegree)
+      })
+      // 创建无人机实体
+      this.droneEntity = this.viewer.entities.add({
+        name: 'uav',
+        position: sampledPosition,
+        orientation: orientationProperty,
+        model: {
+          uri: '/dajiang.glb',
+          minimumPixelSize: 78,
+          maximumScale: 20000,
+          scale: 0.5,
+          color: Cesium.Color.WHITE.withAlpha(1)
+        },
+        path: new Cesium.PathGraphics({
+          material: Cesium.Color.fromCssColorString('#16f8a7'),
+          width: 3,
+          leadTime: 0,
+          trailTime: Infinity,
+        })
+      })
+      const range = 150
+      this.droneEntity.viewFrom = new Cesium.Cartesian3(0, -range, range)
+      this.viewer.trackedEntity = this.droneEntity
+      this.viewer.clock.onTick.addEventListener(() => {
+        let { currentTime } = this.viewer.clock
+        // 回放完成
+        if (Cesium.JulianDate.greaterThan(currentTime, stop)) return
+        if (frustumOption) {
+          const position = this.droneEntity.position.getValue(currentTime)
+          const cartographic = Cesium.Cartographic.fromCartesian(position)
+          const longitude = Cesium.Math.toDegrees(cartographic.longitude)
+          const latitude = Cesium.Math.toDegrees(cartographic.latitude)
+          const height = cartographic.height
+          let option = {
+            ...frustumOption,
+            longitude,
+            latitude,
+            height,
+            heading: sampledHeading.getValue(currentTime),
+            pitch: sampledPitch.getValue(currentTime)
+          }
+          this.addFrustum(option)
+        }
+      })
+    },
+    clearTrackPlayback () {
+      this.clearFrustum()
+      this.viewer.trackedEntity = null
+      this.viewer.entities.remove(this.droneEntity)
+    },
+    // 设置时钟当前时间
+    setClockTime (time) {
+      const currentTime = Cesium.JulianDate.fromDate(new Date(time))
+      this.viewer.clock.currentTime = currentTime
+    },
+    // 开启时钟
+    startClock () {
+      this.viewer.clock.shouldAnimate = true
+      this.viewer.trackedEntity = this.droneEntity
+    },
+    // 暂停时钟
+    stopClock () {
+      this.viewer.clock.shouldAnimate = false
+      this.viewer.trackedEntity = null
+    },
+    async loadGeoJson (geojson) {
+      if (this.geoDataSource) this.viewer.dataSources.remove(this.geoDataSource)
+      this.geoDataSource = await Cesium.GeoJsonDataSource.load(geojson, {
+        stroke: Cesium.Color.BLUE,
+        strokeWidth: 2,
+        fill: Cesium.Color.RED.withAlpha(0.5),
+        clampToGround: true
+      })
+      this.viewer.dataSources.add(this.geoDataSource)
+    },
+    // 绘制视椎体
+    addFrustum ({ longitude, latitude, height, heading, pitch, roll = 0, fov, near = 0.001, far = 150, aspectRatio }) {
+      let position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
+      // 转换角度
+      let radYaw = Cesium.Math.toRadians(90 + heading)
+      let radPitch = -Cesium.Math.toRadians(pitch)
+      let radRoll = Cesium.Math.toRadians(roll)
+      let hpr = new Cesium.HeadingPitchRoll(radYaw, radPitch, radRoll)
+      const hprq = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)
+      // 创建修正旋转：绕 Y 轴 (北) 旋转 -90度 (-π/2)，将默认前向从 -Z(下) 转向 +Y(北)
+      const correctionQuaternion = Cesium.Quaternion.fromAxisAngle(
+        Cesium.Cartesian3.UNIT_Y, // Y轴 (北)
+        -Cesium.Math.PI_OVER_TWO // -90 degrees
+      )
+      let orientation = Cesium.Quaternion.multiply(hprq, correctionQuaternion, new Cesium.Quaternion())
+      if (this.frustumPrimitive) this.clearFrustum()
+      let frustum = new Cesium.PerspectiveFrustum({
+        fov: Cesium.Math.toRadians(fov),
+        // 视锥体的宽度/高度
+        aspectRatio: 1 / aspectRatio,
+        // 近面距视点的距离
+        near,
+        // 远面距视点的距离
+        far,
+      })
+
+      let frustumGeo = new Cesium.GeometryInstance({
+        geometry: new Cesium.FrustumGeometry({
+          frustum: frustum,
+          origin: position,
+          orientation: orientation,
+          vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
+        }),
+        attributes: {
+          color: Cesium.ColorGeometryInstanceAttribute.fromColor(
+            new Cesium.Color(0.0, 1.0, 0.0, 0.2)
+          ),
+        },
+      })
+      let frustumLineGeo = new Cesium.GeometryInstance({
+        geometry: new Cesium.FrustumOutlineGeometry({
+          frustum: frustum,
+          origin: position,
+          orientation: orientation,
+        }),
+        attributes: {
+          color: Cesium.ColorGeometryInstanceAttribute.fromColor(
+            new Cesium.Color(0.0, 1.0, 0.0, 0.5)
+          ),
+        },
+      })
+
+      const frustumPrimitive = new Cesium.Primitive({
+        geometryInstances: [frustumGeo],
+        appearance: new Cesium.PerInstanceColorAppearance({
+          closed: true,
+          flat: true,
+        }),
+        asynchronous: false,
+      })
+
+      const frustumLinPrimitive = new Cesium.Primitive({
+        geometryInstances: [frustumLineGeo],
+        appearance: new Cesium.PerInstanceColorAppearance({
+          closed: true,
+          flat: true,
+        }),
+        asynchronous: false,
+      })
+      this.frustumPrimitive = this.viewer.scene.primitives.add(frustumPrimitive)
+      this.frustumLinPrimitive = this.viewer.scene.primitives.add(frustumLinPrimitive)
+    },
+    // 清除视椎体
+    clearFrustum () {
+      this.viewer.scene.primitives.remove(this.frustumPrimitive)
+      this.viewer.scene.primitives.remove(this.frustumLinPrimitive)
+    },
+    // 修改实体位置
+    updatePosition (heading, key, step) {
+      const position = this.selectedEntity.position.getValue(Cesium.JulianDate.now())
+      const hpr = new Cesium.HeadingPitchRoll(
+        Cesium.Math.toRadians(heading),
+        Cesium.Math.toRadians(0),
+        Cesium.Math.toRadians(0)
+      )
+      const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)
+      // 从四元数转换为旋转矩阵
+      const rotationMatrix = Cesium.Matrix3.fromQuaternion(orientation)
+      const forward = Cesium.Matrix3.getColumn(rotationMatrix, 0, new Cesium.Cartesian3()) // +X 前
+      const right = Cesium.Matrix3.getColumn(rotationMatrix, 1, new Cesium.Cartesian3()) // +Y 右
+      const up = Cesium.Matrix3.getColumn(rotationMatrix, 2, new Cesium.Cartesian3()) // +Z 上
+      let newPosition
+      switch (key) {
+        case 'W':
+          newPosition = Cesium.Cartesian3.add(
+            position,
+            Cesium.Cartesian3.multiplyByScalar(right, step, new Cesium.Cartesian3()),
+            new Cesium.Cartesian3()
+          )
+          break
+        case 'A':
+          newPosition = Cesium.Cartesian3.add(
+            position,
+            Cesium.Cartesian3.multiplyByScalar(forward, -step, new Cesium.Cartesian3()),
+            new Cesium.Cartesian3()
+          )
+          break
+        case 'S':
+          newPosition = Cesium.Cartesian3.add(
+            position,
+            Cesium.Cartesian3.multiplyByScalar(right, -step, new Cesium.Cartesian3()),
+            new Cesium.Cartesian3()
+          )
+          break
+        case 'D':
+          newPosition = Cesium.Cartesian3.add(
+            position,
+            Cesium.Cartesian3.multiplyByScalar(forward, step, new Cesium.Cartesian3()),
+            new Cesium.Cartesian3()
+          )
+          break
+        case 'C':
+          newPosition = Cesium.Cartesian3.add(
+            position,
+            Cesium.Cartesian3.multiplyByScalar(up, step, new Cesium.Cartesian3()),
+            new Cesium.Cartesian3()
+          )
+          break
+        case 'Z':
+          newPosition = Cesium.Cartesian3.add(
+            position,
+            Cesium.Cartesian3.multiplyByScalar(up, -step, new Cesium.Cartesian3()),
+            new Cesium.Cartesian3()
+          )
+          break
+      }
+      this.selectedEntity.position.setValue(newPosition)
+      const cartographic = Cesium.Cartographic.fromCartesian(newPosition)
+      // 获取经纬度和高度
+      const longitude = Cesium.Math.toDegrees(cartographic.longitude)
+      const latitude = Cesium.Math.toDegrees(cartographic.latitude)
+      const terrainHeight = this.viewer.scene.globe.getHeight(cartographic)
+      const height = cartographic.height
+      return {
+        longitude, latitude, height, terrainHeight
+      }
+    },
+
+    drawBtnClick(index) {
+      this.btnSelectIndex = index;
+      this.mangAddLayer({ state: 'add' });
+    },
+     //管理后台绘制
+    mangAddLayer(obj) {
+      // this.change3D();
+      const _this = this;
+      this.initDrawBtn();
+      this.dataState = obj.state;
+      if (obj.state == "add") {
+        // this.dataState = 'add';
+        let style = {};
+        style.name = this.mangDrawLayerName;
+        style.type = this.mangDrawType;
+        style.single = true;
+        style.style = {};
+        if (this.mangDrawType == 'LineString' || this.mangDrawType == 'Polygon') {
+          style.style.stroke = {
+            width: 2,
+            color: "#03A2FF",
+          };
+          style.style.point = {
+            color: "#03A2FF",
+            outlineColor: "white"
+          };
+        }
+        if (this.mangDrawType == 'Polygon') {
+          style.style.fill = {
+            color: "rgba(232, 232, 232,0.2)"
+          };
+        }
+
+        this.drawLayer(style, (params, value) => {
+          if(this.mangDrawType == 'Point'){
+            params.wktValue = params.coordinate;
+          }
+          //将拿到的坐标数据传给管理后台
+          this.$emit("mapCallback", params);
+          //对经纬度赋值
+          this.setPositioningData(params, value);
+           [{ boundaryLine: params.coordinate }]
+          if (this.mangDrawType == 'Point') {
+            let obj = [{ boundaryLine: params.coordinate }];
+            this.mangDefaultLayer(obj);
+          }
+        });
+        return;
+      }
+
+      let list = [{ boundaryLine: obj.wktString }];
+      if(list){
+        this.mangDefaultLayer(list);
+        //计算绘制图层的四至范围
+        if(this.mangDrawType == 'Point'){
+          let point = this.formatWktToPoint(obj.wktString)
+          this.positioningData.longitude = point[0];
+          this.positioningData.latitude = point[1];
+        }else{
+          let bounds = this.extentFromWkt(obj.wktString);
+          this.positioningData.longitude = bounds.west;
+          this.positioningData.longitudeEnd = bounds.east;
+          this.positioningData.latitude = bounds.south;
+          this.positioningData.latitudeEnd = bounds.north;
+        }
+      }
+    },
+
+    //绘制管理后台默认的图层
+    async mangDefaultLayer(params) {
+      //先清理其他所有点线面实体
+      let pbj = {
+        name: this.mangDrawLayerName,
+        type: this.mangDrawLayerName,
+        clampToGround:true,//贴地
+        single:true,//单一绘制
+        getData: (type, active) => {
+          this.changeMap(type, active);
+        },
+        list: params,
+        coordField: "boundaryLine",
+        coordsStyle: {
+          image: {
+            src: require("./imgs/icon-position-blue.png"),
+            scale: 1,
+            anchor: [0.5, 1],
+            cesiumOffsetX: 0,
+            cesiumOffsetY: 10,
+          },
+          stroke:{
+            width: 2,
+            color: "#03A2FF",
+          },
+          fill : {
+            width:5,
+            color: "rgba(232, 232, 232,0.2)"
+          }
+        },
+        active: true,
+      };
+      await this.addWktLayer(pbj);
+      //添加到drawLayerObj中,drawLayerObj是用来存储绘制的图层对象的
+      //this.viewer.dataSources.getByName返回的是数组,即使只有一个图层,也是数组,所以需要取[0]
+      this.drawLayerObj[this.mangDrawLayerName] = this.viewer.dataSources.getByName(this.mangDrawLayerName)[0]
+      console.log(this.drawLayerObj[this.mangDrawLayerName],'drawLayerObj',this.viewer)
+    },
+    // 处理经纬度精度
+    handleCoordinateLength(data) {
+      if (data) {
+        return data.toFixed(8);
+      }
+    },
+    //给管理后台的经纬度赋值
+    setPositioningData(params, Entity) {
+      console.log(params,'params',this.viewer)
+      if (this.dratTypeArr.includes("Point")) {
+        this.positioningData.longitude = params.coords[0];
+        this.positioningData.latitude = params.coords[1];
+      } else {
+        //拿到实体的所有点,以此来算出四至
+        let position;
+        if (this.dratTypeArr.includes("LineString")) {
+          position = Entity[0].polyline.positions.getValue(Cesium.JulianDate.now());
+        } else {
+          let en = params.entity?params.entity:this.viewer.dataSources.getByName(this.mangDrawLayerName)[0].entities.values[0]
+          position = en.polyline.positions.getValue(Cesium.JulianDate.now());
+        }
+        const rectangle = Cesium.Rectangle.fromCartesianArray(position);
+        // 获取四至信息
+        const bounds = {
+          west: Cesium.Math.toDegrees(rectangle.west),   // 最西经度
+          east: Cesium.Math.toDegrees(rectangle.east),   // 最东经度
+          south: Cesium.Math.toDegrees(rectangle.south), // 最南纬度
+          north: Cesium.Math.toDegrees(rectangle.north)  // 最北纬度
+        };
+        this.positioningData.longitude = bounds.west;
+        this.positioningData.longitudeEnd = bounds.east;
+        this.positioningData.latitude = bounds.south;
+        this.positioningData.latitudeEnd = bounds.north;
+      }
+    },
+    //删除管理后台当前绘制的图层
+    deleteMangLayerClick() {
+      this.positioningData = {
+        // 坐标采集的经纬度
+        longitude: undefined,
+        latitude: undefined,
+        longitudeEnd: undefined,
+        latitudeEnd: undefined,
+      };
+      let obj;
+      if (this.btnSelectIndex == 3) {
+        this.btnSelectIndex = -1;
+        return;
+      } else {
+        this.btnSelectIndex = 3;
+        obj = this.drawLayerObj[this.mangDrawLayerName]
+        if(obj) this.clearDrawLayer(obj)
+        let dataSource = this.viewer.dataSources.getByName(this.mangDrawLayerName)
+        if(dataSource && dataSource.length > 0){
+          dataSource[0].entities.removeAll();
+        }
+      }
+    },
+
+    // 初始化绘制按钮状态
+    initDrawBtn() {
+      if (this.dataState != "details") {
+        if (this.dratTypeArr.includes("Point")) {
+          this.btnSelectIndex = 0;
+        }
+        if (this.dratTypeArr.includes("LineString")) {
+          this.btnSelectIndex = 1;
+        }
+        if (this.dratTypeArr.includes("Polygon")) {
+          this.btnSelectIndex = 2;
+        }
+      }
+    },
+
+    //修改管理后台点图层的坐标,只修改管理后台的点实体
+    async updateMapBtn(){
+      const { longitude: lon, latitude: lat } = this.positioningData || {};
+      if (lon == null || lat == null) return;
+
+      const pointWkt = `POINT(${lon} ${lat})`;
+
+      let cart; // 目标笛卡尔坐标
+      try {
+        const positions = await this.getTerrainHeight([[lon, lat]]);
+        console.log(positions,'positions')
+        const p0 = positions?.[0];
+        if (p0) {
+          cart = Cesium.Cartesian3.fromRadians(p0.longitude, p0.latitude, p0.height ?? 0);
+        }
+      } catch (e) {
+        // 获取地形高程失败时不更新位置，但照常发事件与渲染
+      }
+
+      const layer = this.drawLayerObj?.[this.mangDrawLayerName];
+      const entity = layer?.entities?.values?.[0];
+
+      if (entity && cart) {
+        if (entity.position && typeof entity.position.setValue === 'function') {
+          entity.position.setValue(cart);
+        } else {
+          entity.position = cart;
+        }
+      } else if (!entity) {
+        this.mangDefaultLayer([{ boundaryLine: pointWkt }]);
+      }
+
+      this.$emit('mapCallback', {wktValue:pointWkt});
+      this.viewer?.scene?.requestRender?.();
+    },
+    //根据wkt格式数据计算四至范围
+    extentFromWkt(wkt) {
+        if (!wkt || typeof wkt !== "string") return null;
+        const clean = wkt.trim().replace(/^SRID=\d+;/i, "");
+        let geom;
+        try {
+          geom = WKT.parse(clean); // 得到 GeoJSON Geometry 或 GeometryCollection
+        } catch (e) {
+          console.error("WKT 解析失败:", e);
+          return null;
+        }
+        // 扁平化提取所有 [x,y,(z)] 坐标
+        const flattenCoords = (input, out) => {
+          if (!input) return;
+          if (Array.isArray(input)) {
+            if (typeof input[0] === "number") {
+              out.push(input); // [x,y,(z)]
+            } else {
+              input.forEach(i => flattenCoords(i, out));
+            }
+          }
+        };
+        const coords = [];
+        const collect = (g) => {
+          if (!g) return;
+          if (g.type === "GeometryCollection") {
+            (g.geometries || []).forEach(collect);
+          } else {
+            flattenCoords(g.coordinates, coords);
+          }
+        };
+        collect(geom);
+        if (!coords.length) return null;
+        let west = Infinity, south = Infinity, east = -Infinity, north = -Infinity;
+        for (const c of coords) {
+          const x = c[0]; // lon
+          const y = c[1]; // lat
+          if (x < west)  west  = x;
+          if (y < south) south = y;
+          if (x > east)  east  = x;
+          if (y > north) north = y;
+        }
+        return { west, south, east, north, width: east - west, height: north - south };
+    },
+    // 转化格式，如：POINT(114.191176383988 26.527678043101847)，转化为：['114.191176383988', '26.527678043101847']
+    formatWktToPoint: function (wkt) {
+      if (!wkt) return [];
+      if (wkt.includes("POINT")) {
+        const modifiedString = wkt
+          .replace("POINT", "")
+          .slice(0, -1)
+          .split("(")[1];
+        const specialArray = modifiedString.split(" ");
+        return specialArray;
+      } else {
+        return [];
+      }
+    },
+    //转化格式,将度分秒格式的经纬度坐标[117° 47' 16.85",26° 53' 4.84"]转换为角格式['114.191176383988', '26.527678043101847']
+    dmsToDegrees(dmsStr) {
+      // 判断是否已经是角度格式（纯数字或可转换为数字的字符串）
+      if (typeof dmsStr === 'number') {
+        return dmsStr;
+      }
+      if (typeof dmsStr === 'string') {
+        // 移除了不必要的空格并检查是否为有效的数字字符串
+        const trimmedStr = dmsStr.trim();
+        if (!isNaN(parseFloat(trimmedStr)) && isFinite(trimmedStr)) {
+          return parseFloat(trimmedStr);
+        }
+      }
+
+      // 正则匹配度分秒（支持°、′、″符号或d、m、s，支持空格分隔）
+      const regex = /(\d+)\s*[°d]\s*(\d+)\s*['′m]\s*(\d+\.?\d*)\s*["″s]?\s*([EWNS])?/i;
+      const match = dmsStr.match(regex);
+
+      if (!match) {
+        // 如果正则不匹配，但仍然可以解析为数字，则返回该数字，以增加容错性
+        const parsed = parseFloat(dmsStr);
+        if (!isNaN(parsed) && isFinite(parsed)) {
+          return parsed;
+        }
+        console.error(`无效的度分秒格式或十进制度格式：${dmsStr}`);
+        return 0; // 或者返回 null, NaN 等表示无效
+      }
+
+      // 提取度、分、秒和方向
+      const degrees = parseInt(match[1], 10);
+      const minutes = parseInt(match[2], 10);
+      const seconds = parseFloat(match[3]);
+      const direction = match[4]?.toUpperCase();
+
+      // 计算十进制度
+      let decimal = degrees + minutes / 60 + seconds / 3600;
+
+      // 根据方向调整正负（西经W和南纬S为负）
+      if (direction === 'W' || direction === 'S') {
+        decimal = -decimal;
+      }
+
+      return decimal;
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$app-list-primary-color: #0052d9;
+
+.cesium {
+  width: 100%;
+  height: 100%;
+  position: relative;
+    .coordinate-collection {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 268px;
+    // height: 196px;
+    border-radius: 8px;
+    background-color: #fff;
+    padding: 12px 16px 2px 16px;
+    max-height: 300px;
+    .title {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.9);
+      font-weight: 600;
+    }
+    .btn-box {
+      display: flex;
+      margin-top: 12px;
+      .btn-item {
+        width: 32px;
+        height: 32px;
+        background-color: rgba(231, 231, 231, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 12px;
+        border-radius: 3px;
+        cursor: pointer;
+      }
+      .btn-item-click {
+        background-color: $app-list-primary-color;
+        color: #fff;
+      }
+    }
+    .coordinate-form {
+      margin-top: 12px;
+      ::v-deep .el-form-item {
+        margin-bottom: 5px;
+      }
+    }
+  }
+  .navigation-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    position: absolute;
+    bottom: 60px;
+    right: 30px;
+  }
+
+  .navigation-item {
+
+    .compass-outer {
+      background-image: url('./imgs/orientation.svg');
+      background-position: 50%;
+      background-repeat: no-repeat;
+      background-size: contain;
+      border-radius: 50%;
+      width: 56px;
+      height: 56px;
+      box-shadow: 0 0 8px rgba(0, 0, 0, .5);
+    }
+
+    .compass-inner {
+      cursor: pointer;
+      text-align: center;
+      background: url('./imgs/orientation-bg.svg') 50% / contain no-repeat;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 42px;
+      height: 42px;
+      font-weight: 700;
+      display: flex;
+      position: absolute;
+      top: 6px;
+      left: 7px;
+
+      .compass-orientation {
+        color: #595959;
+        margin-top: 6px;
+        font-size: 16px;
+        line-height: 18px;
+      }
+
+      .compass-angle {
+        color: #595959;
+        font-size: 12px;
+        line-height: 14px;
+        position: relative;
+      }
+    }
+  }
+
+  .map-action-container {
+    cursor: pointer;
+    background: #fff;
+    color: #4e4e4e;
+    font-weight: 600;
+    justify-content: center;
+    align-items: center;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    box-sizing: border-box;
+    border-radius: 2px;
+    position: relative;
+    box-shadow: 0 0 4px rgba(0, 0, 0, .6);
+
+    &:first-child {
+      border-top-left-radius: 2px;
+      border-top-right-radius: 2px;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
+    }
+
+    &:not(:last-child) {
+      border-bottom: 1px solid #dcdee2;
+    }
+  }
+
+  .widget-zoom {
+    border-radius: 2px;
+    box-shadow: 0 0 4px rgba(0, 0, 0, .6);
+    font-size: 22px;
+
+    .map-action-container {
+      box-shadow: none;
+      box-sizing: border-box;
+      border-radius: 0;
+      position: relative;
+
+      img {
+        width: 16px;
+      }
+    }
+  }
+
+  .map-switch {
+    box-sizing: border-box;
+    background: #fff;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    margin-top: 10px;
+    padding: 3px;
+    position: relative;
+    box-shadow: 0 0 4px rgba(0, 0, 0, .6);
+
+    .img-satellite {
+      cursor: pointer;
+      border-radius: 50%;
+      justify-content: center;
+      align-items: center;
+      width: 34px;
+      height: 34px;
+      display: flex;
+      box-shadow: 0 0 1px #000;
+      background: url('./imgs/map.png') 50% no-repeat;
+    }
+  }
+
+  .base-maps {
+    .base-map-tdt {
+      position: relative;
+      cursor: pointer;
+      border: 2px solid #2d8cf0;
+      width: 122px;
+      height: 80px;
+      margin: 2px;
+      background: url('./imgs/map.png') 50% no-repeat;
+
+      .street-selector {
+        background: rgba(0, 0, 0, .5);
+        width: 100%;
+        padding: 0 4px;
+        line-height: 20px;
+
+        ::v-deep .el-checkbox__label {
+          color: #fff;
+          font-size: 12px;
+          padding-left: 4px;
+        }
+      }
+
+      .base-map-txt {
+        height: 20px;
+        line-height: 20px;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        padding: 0 4px;
+        background-color: #2d8cf0;
+        color: #fff;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+::v-deep .cesium-timeline-bar {
+  .cesium-timeline-ticLabel {
+    display: none;
+  }
+}
+</style>