代码迁移

src/Obj/Base/GroundSvg/_element.js

@@ -0,0 +1,113 @@
+import { attributeElm } from '../../Element/elm_html'
+
+function html(that) {
+    return `
+    <span class="custom-divider"></span>
+    <div class="div-item">
+        <div class="row">
+            <div class="col">
+                <span class="label">名称</span>
+                <input class="input" maxlength="40" type="text" @model="name">
+            </div>
+            <div class="col">
+                <span class="label">颜色</span>
+                <div class="color"></div>
+            </div>
+        </div>
+    </div>
+    <span class="custom-divider"></span>
+    <div class="div-item">
+        <div class="row">
+            <div class="col">
+                <span class="label">旋转角度</span>
+                <input type="range" max="360" min="0" step="0.1" @model="angle">
+                <div class="input-number input-number-unit" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
+                    <input class="input" type="number" title="" min="0" max="360" step="0.1" @model="angle">
+                    <span class="unit">°</span>
+                    <span class="arrow"></span>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col x-scale">
+                <span class="label">X 轴大小</span>
+                <input type="range" max="200" min="0.001" step="0.001">
+                <div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
+                    <input class="input" type="number" title="" min="0.001" max="200" step="0.001">
+                    <span class="arrow"></span>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col y-scale">
+                <span class="label">Y 轴大小</span>
+                <input type="range" max="200" min="0.001" step="0.001">
+                <div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
+                    <input class="input" type="number" title="" min="0.001" max="200" step="0.001">
+                    <span class="arrow"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <span class="custom-divider"></span>
+    <div class="div-item">
+        <div class="row">
+            <div class="col" style="flex: 5;">
+                <span class="label">文字内容</span>
+                <input class="input" type="text" @model="textValue">
+            </div>
+            <div class="col">
+                <button class="btn" @click="textPosPick">设置位置</span>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <span class="label">文字开关</span>
+                <input class="btn-switch" type="checkbox" @model="textShow">
+            </div>
+            <div class="col">
+                <span class="label">字体颜色</span>
+                <div class="textColor"></div>
+            </div>
+            <div class="col">
+                <span class="label">字体大小</span>
+                <div class="input-number input-number-unit-2">
+                    <input class="input" type="number" title="" min="1" max="99" @model="textFontSize">
+                    <span class="unit">px</span>
+                    <span class="arrow"></span>
+                </div>
+            </div>
+            </div>
+            <div class="row">
+            <div class="col">
+                <span class="label">视野缩放</span>
+                <input class="btn-switch" type="checkbox" @model="textScaleByDistance">
+            </div>
+            <div class="col">
+                <span class="label">最近距离</span>
+                <div class="input-number input-number-unit-1">
+                    <input class="input" type="number" title="" min="1" max="99999999" @model="textNear">
+                    <span class="unit">m</span>
+                    <span class="arrow"></span>
+                </div>
+            </div>
+            <div class="col">
+                <span class="label">最远距离</span>
+                <div class="input-number input-number-unit-1">
+                    <input class="input" type="number" title="" min="1" max="99999999" @model="textFar">
+                    <span class="unit">m</span>
+                    <span class="arrow"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <span class="custom-divider"></span>
+    <div class="div-item attribute-info">
+        <div class="row">
+        ${attributeElm(that)}
+        </div>
+    </div>
+    `
+}
+
+export { html }

src/Obj/Base/GroundSvg/index-2.js

@@ -0,0 +1,792 @@
+import Base from "../index";
+import * as THREE from '../../../../static/3rdparty/three/three.module.min.js';
+import { SVGLoader } from '../../../../static/3rdparty/three/jsm/loaders/SVGLoader.js';
+
+// 合并图形，统一颜色
+class GroundSvg extends Base {
+  #loadEvent=void 0
+  constructor(sdk, options = {}) {
+    super(sdk, options);
+    this.options.angle = this.options.angle || 0
+    this.options.color = this.options.color || '#ff0000'
+
+    this.loaded = false;
+
+    if (this.options.position.lat > 83.5) {
+      this.options.position.lat = 83.5
+    }
+    if (this.options.position.lat < -83.5) {
+      this.options.position.lat = -83.5
+    }
+
+    this.hierarchys = []
+
+    this.options.scale = options.scale || {}
+    this.options.scale.x = (this.options.scale.x || this.options.scale.x === 0) ? this.options.scale.x : 1
+    this.options.scale.y = (this.options.scale.y || this.options.scale.y === 0) ? this.options.scale.y : 1
+
+    this.init()
+  }
+
+  get position() {
+    return this.options.position
+  }
+
+  set position(v) {
+    this.options.position = v
+    if (this.options.position.lat > 83.5) {
+      this.options.position.lat = 83.5
+    }
+    if (this.options.position.lat < -83.5) {
+      this.options.position.lat = -83.5
+    }
+    this.update()
+  }
+
+  get color() {
+    return this.options.color
+  }
+
+  set color(v) {
+    this.options.color = v
+    for (let i = 0; i < this.entity.values.length; i++) {
+      this.entity.values[i].polygon.material = Cesium.Color.fromCssColorString(this.options.color || '#ff0000')
+    }
+  }
+
+  get angle() {
+    return this.options.angle
+  }
+
+  set angle(v) {
+    this.options.angle = v
+    this.update()
+  }
+
+  get scale() {
+    return this.options.scale
+  }
+
+  set scale(scale) {
+    this.options.scale.x = scale.x
+    this.options.scale.y = scale.y
+    this.update()
+  }
+
+  init() {
+    this.hierarchys = []
+    let geometryArray = []
+    const loader = new SVGLoader();
+    loader.load(this.options.url, (data) => {
+      data.xml.style.width = '0'
+      data.xml.style.height = '0'
+      document.body.appendChild(data.xml)
+      for (const path of data.paths) {
+        const fillColor = path.userData.style.fill;
+        let style = window.getComputedStyle(path.userData.node)
+        if (style.strokeWidth) {
+          path.userData.style.strokeWidth = Number(style.strokeWidth.replace(/[a-zA-Z]/g, ''))
+        }
+        if (fillColor !== undefined && fillColor !== 'none') {
+          const shapes = SVGLoader.createShapes(path);
+          for (const shape of shapes) {
+            const geometry = new THREE.ShapeGeometry(shape);
+            const mesh = new THREE.Mesh(geometry);
+            geometryArray.push(mesh.geometry)
+          }
+        }
+        const strokeColor = path.userData.style.stroke;
+        if (strokeColor !== undefined && strokeColor !== 'none') {
+          for (const subPath of path.subPaths) {
+            const geometry = SVGLoader.pointsToStroke(subPath.getPoints(), path.userData.style);
+            if (geometry) {
+              const mesh = new THREE.Mesh(geometry);
+              geometryArray.push(mesh.geometry)
+            }
+          }
+        }
+      }
+      document.body.removeChild(data.xml)
+
+      let min = 0
+      let max = 0
+      let geojson
+      for (let key = 0; key < geometryArray.length; key++) {
+        let geometry = geometryArray[key];
+        let array = geometry.attributes.position.array
+
+        for (let i = 0; i < array.length; i++) {
+          if (min > array[i]) {
+            min = array[i]
+          }
+          if (max < array[i]) {
+            max = array[i]
+          }
+        }
+      }
+      min = Math.abs(min)
+      max = Math.abs(max)
+
+      if (min > max) {
+        max = min
+      }
+      let max2 = max
+      max = max * (10 / 3) * 100
+      let scale = (4000 / max) / 5
+      max2 = max2 * scale
+      for (let key = 0; key < geometryArray.length; key++) {
+        let positions = []
+        let position = []
+        geometryArray[key].scale(scale, scale, 1)
+
+        geometryArray[key].rotateX(THREE.MathUtils.degToRad(180))
+        let geometry = geometryArray[key];
+        let array = geometry.attributes.position.array
+
+        for (let i = 0; i < array.length; i += 3) {
+          let x = array[i] - (max2 / 2)
+          let y = array[i + 1] + (max2 / 2)
+          position.push([x, y, array[i + 1]])
+        }
+        if (geometry.index && geometry.index.array) {
+          let index = geometry.index.array
+          for (let i = 0; i < index.length; i += 3) {
+            positions.push([position[index[i]], position[index[i + 1]], position[index[i + 2]]])
+          }
+        }
+        else {
+          for (let i = 0; i < position.length; i += 3) {
+            positions.push([position[i], position[i + 1], position[i + 2]])
+          }
+        }
+
+
+        let polygons = []
+        // 组合多边形
+        for (let i = 0; i < positions.length; i++) {
+          let polygon = turf.polygon([[
+            ...positions[i],
+            positions[i][0]
+          ]]);
+          polygons.push(polygon)
+
+          if (geojson) {
+            geojson = turf.union(geojson, polygon);
+          }
+          else {
+            geojson = polygon
+          }
+        }
+      }
+
+      this.geojson = JSON.parse(JSON.stringify(geojson))
+
+      // 计算边界框
+      let bbox = turf.bbox(geojson);
+      let width = Math.abs(bbox[2] - bbox[0])
+      let height = Math.abs(bbox[3] - bbox[1])
+
+      // 获取最小正方形
+      let square = turf.square(bbox);
+      // 控制点界限
+      square[0] = square[0] + this.options.position.lng - (width / 5)
+      square[1] = square[1] + this.options.position.lat - (height / 5)
+      square[2] = square[2] + this.options.position.lng + (width / 5)
+      square[3] = square[3] + this.options.position.lat + (height / 5)
+
+      this.bbox = square
+
+
+
+      geojson = JSON.parse(JSON.stringify(this.geojson))
+
+      geojson.properties.directionDistance = []
+
+
+      if (geojson.geometry.type === 'MultiPolygon') {
+        for (let i = 0; i < geojson.geometry.coordinates.length; i++) {
+          let array = []
+          for (let m = 0; m < geojson.geometry.coordinates[i].length; m++) {
+            let array2 = []
+            for (let n = 0; n < geojson.geometry.coordinates[i][m].length; n++) {
+              let point1 = turf.point([0, geojson.geometry.coordinates[i][m][n][1]])
+              let point2 = turf.point([...geojson.geometry.coordinates[i][m][n]])
+              let distance = turf.distance(point1, point2, { units: 'kilometers' });
+              let angle = turf.rhumbBearing(point1, point2);
+              array2.push(
+                {
+                  origin: geojson.geometry.coordinates[i][m][n],
+                  distance: distance,
+                  angle: angle
+                }
+              )
+            }
+            array.push(array2)
+          }
+          geojson.properties.directionDistance.push(array)
+        }
+      }
+      else {
+        for (let i = 0; i < geojson.geometry.coordinates.length; i++) {
+          let array = []
+          for (let m = 0; m < geojson.geometry.coordinates[i].length; m++) {
+            let point1 = turf.point([0, geojson.geometry.coordinates[i][m][1]])
+            let point2 = turf.point([...geojson.geometry.coordinates[i][m]])
+            let distance = turf.distance(point1, point2, { units: 'kilometers' });
+            let angle = turf.rhumbBearing(point1, point2);
+            array.push(
+              {
+                origin: geojson.geometry.coordinates[i][m],
+                distance: distance,
+                angle: angle
+              }
+            )
+          }
+          geojson.properties.directionDistance.push(array)
+        }
+      }
+
+      if (geojson.geometry.type === 'MultiPolygon') {
+        for (let i = 0; i < geojson.geometry.coordinates.length; i++) {
+          let hierarchy = this.getHierarchyPolygon(geojson, i)
+          this.hierarchys.push(hierarchy)
+        }
+      }
+      else {
+        let hierarchy = this.getHierarchyPolygon(geojson)
+        this.hierarchys.push(hierarchy)
+      }
+      this.entity = new Cesium.EntityCollection()
+      for (let i = 0; i < this.hierarchys.length; i++) {
+        this.entity.add(this.sdk.viewer.entities.add({
+          polygon: {
+            hierarchy: new Cesium.CallbackProperty(() => {
+              let hierarchy = this.hierarchys[i]
+              let holes = []
+              for (let m = 0; m < hierarchy.holes.length; m++) {
+                holes.push({
+                  positions: hierarchy.holes[m]
+                })
+              }
+              return {
+                positions: hierarchy.positions,
+                holes: holes
+              }
+            }, false),
+            material: Cesium.Color.fromCssColorString(this.color),
+            zIndex: 1
+          }
+        }))
+      }
+
+      this.scale = this.scale
+
+      this.loaded = true
+      if (this.#loadEvent) {
+        this.#loadEvent()
+      }
+    })
+  }
+
+  drag() {
+    this.createControlPoints()
+    this.update()
+  }
+
+  getHierarchyPolygon(geojson, key) {
+    let hierarchy = {}
+    let holes = []
+    let directionDistance = geojson.properties.directionDistance
+    if (key !== undefined) {
+      directionDistance = geojson.properties.directionDistance[key]
+    }
+
+    for (let i = 0; i < directionDistance.length; i++) {
+      let positions = []
+      for (let m = 0; m < directionDistance[i].length; m++) {
+        let lng = this.options.position.lng
+        let lat = directionDistance[i][m].origin[1] + this.options.position.lat
+        if (lat > 90) {
+          lng += 180
+        }
+        let origin = [lng, lat]
+        let pt = turf.point(origin);
+        let destination = turf.rhumbDestination(pt, directionDistance[i][m].distance, directionDistance[i][m].angle, { units: 'kilometers' });
+        positions.push(Cesium.Cartesian3.fromDegrees(...destination.geometry.coordinates))
+      }
+      if (i === 0) {
+
+        hierarchy.positions = positions
+      }
+      else {
+        holes.push(positions)
+      }
+    }
+    hierarchy.holes = holes
+    return hierarchy
+  }
+
+  createControlPoints() {
+    if (this.ScreenSpaceEventHandler) {
+      this.ScreenSpaceEventHandler.destroy()
+      this.ScreenSpaceEventHandler = null
+    }
+    this.ScreenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(
+      sdk.viewer.canvas
+    )
+    let width = Math.abs(this.bbox[0] - this.bbox[2])
+    let height = Math.abs(this.bbox[1] - this.bbox[3])
+    this.ScreenSpaceEventHandler.setInputAction(async (movement) => {
+      if (this.pickPoint) {
+        let sCartesian = this.pickPoint.position.getValue()
+        let eCartesian = sdk.viewer.scene.pickPosition(movement.endPosition)
+        if (!eCartesian) {
+          const ray = sdk.viewer.camera.getPickRay(movement.endPosition);
+          eCartesian = sdk.viewer.scene.globe.pick(ray, sdk.viewer.scene);
+        }
+        if (!sCartesian || !eCartesian) {
+          return
+        }
+        let position1 = this.cartesian3Towgs84(sCartesian, sdk.viewer)
+        let position2 = this.cartesian3Towgs84(eCartesian, sdk.viewer)
+        let x = 0
+        let y = 0
+
+        let radians, radiansW, radiansH
+
+        let w = 3.5 * this.scale.x
+        let h = 3.5 * this.scale.y
+        let wh = Math.sqrt(((w / 2) ** 2) + ((h / 2) ** 2))
+        let angle = Math.atan((w / 2) / (h / 2)) * (180 / Math.PI)
+        let angleW, angleH;
+
+        let point = turf.point([this.position.lng, this.position.lat]);
+        let options = { units: 'kilometers' };
+        let controlPoints = []
+        controlPoints[0] = turf.destination(point, h / 2 * 1.5, 0 + this.options.angle, options).geometry.coordinates
+        controlPoints[1] = turf.destination(point, wh, 180 + angle + this.options.angle, options).geometry.coordinates
+        controlPoints[2] = turf.destination(point, h / 2, 180 + this.options.angle, options).geometry.coordinates
+        controlPoints[3] = turf.destination(point, wh, 180 - angle + this.options.angle, options).geometry.coordinates
+        controlPoints[4] = turf.destination(point, w / 2, 270 + this.options.angle, options).geometry.coordinates
+        controlPoints[5] = [this.position.lng, this.position.lat]
+        controlPoints[6] = turf.destination(point, w / 2, 90 + this.options.angle, options).geometry.coordinates
+        controlPoints[7] = turf.destination(point, wh, 360 - angle + this.options.angle, options).geometry.coordinates
+        controlPoints[8] = turf.destination(point, h / 2, 0 + this.options.angle, options).geometry.coordinates
+        controlPoints[9] = turf.destination(point, wh, 0 + angle + this.options.angle, options).geometry.coordinates
+
+        let point1 = turf.point([position1.lng, position1.lat]);
+        let point2 = turf.point([position2.lng, position2.lat]);
+        let pointC = turf.point([this.position.lng, this.position.lat]);
+        let bearing1 = turf.rhumbBearing(pointC, point1);
+        let bearing2_0 = turf.rhumbBearing(pointC, point2);
+        let bearing2 = (((bearing2_0 + 360) - this.angle) % 360)
+        let bearingH
+        let bearingW
+        // 中心点到鼠标的距离
+        let distance = turf.rhumbDistance(pointC, point2, options);
+
+        switch (this.pickPoint.id) {
+          case 'svg-control-points_0':
+            angle = bearing2_0 - bearing1
+            this.angle += angle
+            break
+          case 'svg-control-points_1':
+          case 'svg-control-points_7':
+            bearingW = (((turf.rhumbBearing(pointC, turf.point(controlPoints[4])) + 360) - this.angle) % 360)
+            bearingH = (((turf.rhumbBearing(pointC, turf.point(controlPoints[2])) + 360) - this.angle) % 360)
+            angleW = bearing2 - bearingW
+            angleH = bearing2 - bearingH
+
+            if ((angleW > -360 && angleW < -90) || (angleW < 360 && angleW > 90)) {
+              angleW = angleW + 180
+            }
+            if ((angleH > -360 && angleH < -90) || (angleH < 360 && angleH > 90)) {
+              angleH = angleH + 180
+            }
+
+            radiansW = (Math.PI / 180) * angleW
+            radiansH = (Math.PI / 180) * angleH
+            // 矩形高度
+            w = (Math.cos(radiansW) * distance) * 2
+            h = (Math.cos(radiansH) * distance) * 2
+            // scaleY值
+            this.scale.x = w / 3.5
+            this.scale.y = h / 3.5
+            break
+          case 'svg-control-points_2':
+          case 'svg-control-points_8':
+            bearingH = (((turf.rhumbBearing(pointC, turf.point(controlPoints[2])) + 360) - this.angle) % 360)
+            angleH = bearing2 - bearingH
+
+            if ((angleH > -360 && angleH < -90) || (angleH < 360 && angleH > 90)) {
+              angleH = angleH + 180
+            }
+
+            radiansH = (Math.PI / 180) * angleH
+            // 矩形高度
+            h = (Math.cos(radiansH) * distance) * 2
+            // scaleY值
+            this.scale.y = h / 3.5
+            break
+          case 'svg-control-points_3':
+          case 'svg-control-points_9':
+            bearingW = (((turf.rhumbBearing(pointC, turf.point(controlPoints[6])) + 360) - this.angle) % 360)
+            bearingH = (((turf.rhumbBearing(pointC, turf.point(controlPoints[2])) + 360) - this.angle) % 360)
+            angleW = bearing2 - bearingW
+            angleH = bearing2 - bearingH
+
+            if ((angleW > -360 && angleW < -90) || (angleW < 360 && angleW > 90)) {
+              angleW = angleW + 180
+            }
+            if ((angleH > -360 && angleH < -90) || (angleH < 360 && angleH > 90)) {
+              angleH = angleH + 180
+            }
+
+            radiansW = (Math.PI / 180) * angleW
+            radiansH = (Math.PI / 180) * angleH
+            // 矩形高度
+            w = (Math.cos(radiansW) * distance) * 2
+            h = (Math.cos(radiansH) * distance) * 2
+            // scaleY值
+            this.scale.x = w / 3.5
+            this.scale.y = h / 3.5
+            break
+          case 'svg-control-points_4':
+            bearingW = (((turf.rhumbBearing(pointC, turf.point(controlPoints[4])) + 360) - this.angle) % 360)
+            angleW = bearing2 - bearingW
+
+            if ((angleW > -360 && angleW < -90) || (angleW < 360 && angleW > 90)) {
+              angleW = angleW + 180
+            }
+
+            radiansW = (Math.PI / 180) * angleW
+            // 矩形宽度
+            w = (Math.cos(radiansW) * distance) * 2
+            // scaleY值
+            this.scale.x = w / 3.5
+
+            break
+          case 'svg-control-points_5':
+            if (position2.lat > 83.5) {
+              position2.lat = 83.5
+            }
+            if (position2.lat < -83.5) {
+              position2.lat = -83.5
+            }
+            this.position = {lng: position2.lng, lat: position2.lat}
+            let cx = position2.lng - position1.lng
+            let cy = position2.lat - position1.lat
+            this.bbox[0] = this.bbox[0] + cx
+            this.bbox[1] = this.bbox[1] + cy
+            this.bbox[2] = this.bbox[2] + cx
+            this.bbox[3] = this.bbox[3] + cy
+            break
+          case 'svg-control-points_6':
+            bearingW = (((turf.rhumbBearing(pointC, turf.point(controlPoints[6])) + 360) - this.angle) % 360)
+            angleW = bearing2 - bearingW
+
+            if ((angleW > -360 && angleW < -90) || (angleW < 360 && angleW > 90)) {
+              angleW = angleW + 180
+            }
+
+            radiansW = (Math.PI / 180) * angleW
+            // 矩形高度
+            w = (Math.cos(radiansW) * distance) * 2
+            this.scale.x = w / 3.5
+
+            break
+          default:
+        }
+
+        // let radians = (Math.PI / 180) * this.options.angle
+        // x = x*Math.cos(radians)
+        // y = y*Math.cos(radians)
+
+
+        // let bbox = turf.bbox(geojson);
+        // let square = turf.square(bbox);
+
+        x = x / (width / 2) * 100
+        y = y / (height / 2) * 100
+
+        let scale = { ...this.scale }
+        scale.x = scale.x + x
+        scale.y = scale.y - y
+
+        // let pt = turf.point(this.center);
+        // let destination1 = turf.rhumbDestination(pt, 220, 45, { units: 'kilometers' });
+        // let destination2 = turf.rhumbDestination(pt, 220, 225, { units: 'kilometers' });
+
+        // width = Math.abs(destination2.geometry.coordinates[0] - destination1.geometry.coordinates[0])
+        // height = Math.abs(destination2.geometry.coordinates[1] - destination1.geometry.coordinates[1])
+
+        if (scale.y > 200) {
+          scale.y = 200
+        }
+        if (scale.y < 0) {
+          scale.y = 0
+        }
+
+        if (scale.x > 200) {
+          scale.x = 200
+        }
+        if (scale.x < 0) {
+          scale.x = 0
+        }
+
+        this.scale = { ...scale }
+
+      }
+      else {
+        let pickedObjectArray = sdk.viewer.scene.drillPick(movement.endPosition);
+        let pickPoint
+        for (let i = 0; i < pickedObjectArray.length; i++) {
+          let pickedObject = pickedObjectArray[i]
+          if (pickedObject && pickedObject.primitive && pickedObject.primitive._id &&
+            (pickedObject.primitive._id.id && pickedObject.primitive._id.id.indexOf('svg-control-points_') !== -1)
+          ) {
+            pickPoint = pickedObject.primitive._id
+            break
+          }
+        }
+        for (let i = 0; i < this.pointEntityCollection.values.length; i++) {
+          if (pickPoint && this.pointEntityCollection.values[i].id === pickPoint.id) {
+            pickPoint.point.color = Cesium.Color.fromCssColorString('#ffff00')
+          }
+          else {
+            switch (this.pointEntityCollection.values[i].id) {
+              case 'svg-control-points_5':
+                this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#ffff00')
+                break
+              case 'svg-control-points_0':
+                this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#ff0000')
+                break
+              default:
+                this.pointEntityCollection.values[i].point.color = Cesium.Color.fromCssColorString('#00ff0a')
+            }
+          }
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+    this.ScreenSpaceEventHandler.setInputAction((movement) => {
+      let pickedObjectArray = sdk.viewer.scene.drillPick(movement.position);
+      for (let i = 0; i < pickedObjectArray.length; i++) {
+        let pickedObject = pickedObjectArray[i]
+        if (pickedObject && pickedObject.primitive && pickedObject.primitive._id && pickedObject.primitive._id.objectId === this.options.id &&
+          (pickedObject.primitive._id.id && pickedObject.primitive._id.id.indexOf('svg-control-points_') !== -1)
+        ) {
+          YJ.Global.CameraController(sdk, false)
+          this.pickPoint = pickedObject.primitive._id
+          this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ff0000')
+          break
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
+    this.ScreenSpaceEventHandler.setInputAction((movement) => {
+      if (this.pickPoint) {
+        YJ.Global.CameraController(sdk, true)
+        switch (this.pickPoint.id) {
+          case 'svg-control-points_4':
+            this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ffff00')
+            break
+          case 'svg-control-points_9':
+            this.pickPoint.point.color = Cesium.Color.fromCssColorString('#ff0000')
+            break
+          default:
+            this.pickPoint.point.color = Cesium.Color.fromCssColorString('#00ff0a')
+        }
+        this.pickPoint = null
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_UP)
+
+
+
+
+    this.pointEntityCollection = new Cesium.EntityCollection()
+    let w = 3.5 * this.scale.x
+    let h = 3.5 * this.scale.y
+    let wh = Math.sqrt(((w / 2) ** 2) + ((h / 2) ** 2))
+    let angle = Math.atan((w / 2) / (h / 2)) * (180 / Math.PI)
+
+    let point = turf.point([this.position.lng, this.position.lat]);
+    let options = { units: 'kilometers' };
+    let controlPoints = []
+    controlPoints[0] = turf.destination(point, h / 2 * 1.5, 0, options).geometry.coordinates
+    controlPoints[1] = turf.destination(point, wh, 180 + angle, options).geometry.coordinates
+    controlPoints[2] = turf.destination(point, h / 2, 180, options).geometry.coordinates
+    controlPoints[3] = turf.destination(point, wh, 180 - angle, options).geometry.coordinates
+    controlPoints[4] = turf.destination(point, w / 2, 270, options).geometry.coordinates
+    controlPoints[5] = [this.position.lng, this.position.lat]
+    controlPoints[6] = turf.destination(point, w / 2, 90, options).geometry.coordinates
+    controlPoints[7] = turf.destination(point, wh, 360 - angle, options).geometry.coordinates
+    controlPoints[8] = turf.destination(point, h / 2, 0, options).geometry.coordinates
+    controlPoints[9] = turf.destination(point, wh, 0 + angle, options).geometry.coordinates
+
+    this.controlPoints = controlPoints
+    for (let i = 0; i < this.controlPoints.length; i++) {
+      let color = '#00ff0a'
+      if (i === 5) {
+        color = '#ffff00'
+      }
+      if (i === 0) {
+        color = '#ff0000'
+      }
+      let entity = sdk.viewer.entities.getOrCreateEntity('svg-control-points_' + i)
+      entity.objectId = this.options.id
+      entity.position = new Cesium.CallbackProperty(() => {
+        return Cesium.Cartesian3.fromDegrees(...this.controlPoints[i])
+      })
+      entity.point = new Cesium.PointGraphics({
+        color: Cesium.Color.fromCssColorString(color), // 点的颜色
+        pixelSize: 10, // 点的大小
+        disableDepthTestDistance: Number.POSITIVE_INFINITY  // 不应用深度测试
+      })
+      this.pointEntityCollection.add(entity)
+    }
+  }
+
+  _updateGeojson(data, x, y) {
+    let width = Math.abs(this.bbox[0] - this.bbox[2])
+    let height = Math.abs(this.bbox[1] - this.bbox[3])
+    if (typeof data[0] === 'object') {
+      for (let i = 0; i < data.length; i++) {
+        this._updateGeojson(data[i], x, y)
+      }
+    }
+    else {
+      for (let i = 0; i < data.length; i += 2) {
+        data[i] = data[i] + ((data[i] / (width / 2)) * x)
+      }
+      for (let i = 1; i < data.length; i += 2) {
+        data[i] = data[i] - ((data[i] / (height / 2)) * y)
+      }
+    }
+  }
+
+  update() {
+    let point = turf.point([this.position.lng, this.position.lat]);
+    let options = { units: 'kilometers' };
+
+    let hierarchys = []
+    let interimBbox = [...this.bbox]
+    let width = Math.abs(interimBbox[2] - interimBbox[0])
+    let height = Math.abs(interimBbox[3] - interimBbox[1])
+    let x = ((width / 2) * this.options.scale.x) / 100 - (width / 2)
+    let y = (height / 2) * (-(this.options.scale.y)) / 100 + (height / 2)
+
+    interimBbox[0] = interimBbox[0] - x
+    interimBbox[1] = interimBbox[1] + y
+    interimBbox[2] = interimBbox[2] + x
+    interimBbox[3] = interimBbox[3] - y
+
+    let interim
+
+    if (interimBbox[0] > interimBbox[2]) {
+      interim = interimBbox[0]
+      interimBbox[0] = interimBbox[2]
+      interimBbox[2] = interim
+    }
+    if (interimBbox[1] > interimBbox[3]) {
+      interim = interimBbox[1]
+      interimBbox[1] = interimBbox[3]
+      interimBbox[3] = interim
+    }
+
+    let geojson = JSON.parse(JSON.stringify(this.geojson))
+    this._updateGeojson(geojson.geometry.coordinates, x, y)
+    geojson = turf.transformRotate(geojson, this.angle, { pivot: [0, 0] });
+    let directionDistance = []
+    if (geojson.geometry.type === 'MultiPolygon') {
+      for (let i = 0; i < geojson.geometry.coordinates.length; i++) {
+        let array = []
+        for (let m = 0; m < geojson.geometry.coordinates[i].length; m++) {
+          let array2 = []
+          for (let n = 0; n < geojson.geometry.coordinates[i][m].length; n++) {
+            let point1 = turf.point([0, geojson.geometry.coordinates[i][m][n][1]])
+            let point2 = turf.point([...geojson.geometry.coordinates[i][m][n]])
+            let distance = turf.distance(point1, point2, { units: 'kilometers' });
+            let angle2 = turf.rhumbBearing(point1, point2);
+            array2.push(
+              {
+                origin: geojson.geometry.coordinates[i][m][n],
+                distance: distance,
+                angle: angle2
+              }
+            )
+          }
+          array.push(array2)
+        }
+        directionDistance.push(array)
+      }
+    }
+    else {
+      for (let i = 0; i < geojson.geometry.coordinates.length; i++) {
+        let array = []
+        for (let m = 0; m < geojson.geometry.coordinates[i].length; m++) {
+          let array2 = []
+          let point1 = turf.point([0, geojson.geometry.coordinates[i][m][1]])
+          let point2 = turf.point([...geojson.geometry.coordinates[i][m]])
+          let distance = turf.distance(point1, point2, { units: 'kilometers' });
+          let angle2 = turf.rhumbBearing(point1, point2);
+          array.push({
+            origin: geojson.geometry.coordinates[i][m],
+            distance: distance,
+            angle: angle2
+          })
+        }
+        directionDistance.push(array)
+      }
+    }
+
+    geojson.properties.directionDistance = directionDistance
+
+    // this.bbox = [...interimBbox]
+
+
+    let w = 3.5 * this.scale.x
+    let h = 3.5 * this.scale.y
+    let wh = Math.sqrt(((w / 2) ** 2) + ((h / 2) ** 2))
+    let angle = Math.atan((w / 2) / (h / 2)) * (180 / Math.PI)
+    let controlPoints = []
+    controlPoints[0] = turf.destination(point, h / 2 * 1.5, 0 + this.options.angle, options).geometry.coordinates
+    controlPoints[1] = turf.destination(point, wh, 180 + angle + this.options.angle, options).geometry.coordinates
+    controlPoints[2] = turf.destination(point, h / 2, 180 + this.options.angle, options).geometry.coordinates
+    controlPoints[3] = turf.destination(point, wh, 180 - angle + this.options.angle, options).geometry.coordinates
+    controlPoints[4] = turf.destination(point, w / 2, 270 + this.options.angle, options).geometry.coordinates
+    controlPoints[5] = [this.position.lng, this.position.lat]
+    controlPoints[6] = turf.destination(point, w / 2, 90 + this.options.angle, options).geometry.coordinates
+    controlPoints[7] = turf.destination(point, wh, 360 - angle + this.options.angle, options).geometry.coordinates
+    controlPoints[8] = turf.destination(point, h / 2, 0 + this.options.angle, options).geometry.coordinates
+    controlPoints[9] = turf.destination(point, wh, 0 + angle + this.options.angle, options).geometry.coordinates
+
+    let points = turf.points(controlPoints);
+    controlPoints = []
+    for (let i = 0; i < points.features.length; i++) {
+      controlPoints.push(points.features[i].geometry.coordinates)
+    }
+    this.controlPoints = controlPoints
+
+    if (geojson.geometry.type === 'MultiPolygon') {
+      for (let i = 0; i < geojson.geometry.coordinates.length; i++) {
+        let hierarchy = this.getHierarchyPolygon(geojson, i)
+        hierarchys.push(hierarchy)
+      }
+    }
+    else {
+      let hierarchy = this.getHierarchyPolygon(geojson)
+      hierarchys.push(hierarchy)
+    }
+    this.hierarchys = hierarchys
+  }
+
+  load(callback) {
+    if(this.loaded) {
+      callback();
+    }
+    else {
+      this.#loadEvent = callback
+    }
+  }
+}
+
+export default GroundSvg