update： 新建航线、事件编辑、kmz文件问题修改

GuLiMmo

2024-03-19 aec00ecc093be803860c8675cbe1c4c776a7cb4e

 src/hooks/use-cesium-tsa.ts

@@ -26,8 +26,8 @@
  [key: string]: any
}
interface pointOption {
  longitude: number
  latitude: number
  longitude?: number
  latitude?: number
  point?: pointSetting
  billboard?: billboardSetting
  polyline?: polyline
@@ -46,7 +46,7 @@
// 定义全局的viewer变量防止重复生成
// eslint-disable-next-line no-var
var viewer: Cesium.Viewer | null = null
export function cesiumOperation() {
export function cesiumOperation () {
  let handler: Cesium.ScreenSpaceEventHandler
  const TDT_Token = 'c6eea7dad4fa1e2d1e32ec0e7c9735db'
  // 天地图Key
@@ -72,7 +72,7 @@
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    tilingScheme: new Cesium.GeographicTilingScheme(),
    tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
    maximumLevel: 50,
    maximumLevel: 17,
  })
  // 标准地图图层变量
  const imageryProvider_stand = new Cesium.UrlTemplateImageryProvider({
@@ -147,11 +147,11 @@
  }

  function removeAllDataSource () {
    viewer.dataSources.removeAll()
    viewer?.dataSources.removeAll()
  }

  // 清除所有标记点
  function removeAllPoint() {
  function removeAllPoint () {
    if (viewer) {
      viewer?.entities?.removeAll()
    }
@@ -179,10 +179,44 @@
      ellipse: {
        semiMinorAxis: 7000.0,
        semiMajorAxis: 7000.0,
        material: Cesium.Color.CORNFLOWERBLUE.withAlpha(0.3),
        outline: true,
        material: Cesium.Color.CORNFLOWERBLUE.withAlpha(0.3)
      }
    })
    console.log(viewer?.entities)
  }
  // 添加左键点击事件
  let leftClickHandler: Cesium.ScreenSpaceEventHandler
  const addClickEvent = (sid: string, cb: Function) => {
    if (leftClickHandler) {
      removeClickEvent()
    }
    leftClickHandler = new Cesium.ScreenSpaceEventHandler(viewer?.scene.canvas)
    leftClickHandler.setInputAction(function (click: { position: Cesium.Cartesian2 }) {
      const pick = viewer?.scene.pick(click.position)
      if (pick && (pick.id._id === sid || pick.id._id.includes(sid))) {
        cb(click, pick, viewer, handler)
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
  }
  // 移除左键事件
  const removeClickEvent = () => {
    leftClickHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
  }

  let rightClickHandler: Cesium.ScreenSpaceEventHandler
  const addRightClick = (sid: string, cb: Function) => {
    if (leftClickHandler) {
      removeRightClickEvent()
    }
    rightClickHandler = new Cesium.ScreenSpaceEventHandler(viewer?.scene.canvas)
    rightClickHandler.setInputAction(function (click: { position: Cesium.Cartesian2 }) {
      const pick = viewer?.scene.pick(click.position)
      cb(click, pick, viewer, handler)
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
  }
  // 移除右键事件
  const removeRightClickEvent = () => {
    rightClickHandler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
  }

  // 添加线段
@@ -194,7 +228,7 @@
  }

  // 通过点ID删除
  function removeById(id: string) {
  function removeById (id: string) {
    viewer?.entities.removeById(id)
    const pointEntity = viewer?.entities.getById(id)
    if (pointEntity && pointEntity !== undefined) {
@@ -202,12 +236,12 @@
    }
  }
  // 通过点ID获取实体
  function getEntityById(id: string) {
  function getEntityById (id: string) {
    const pointEntity = viewer?.entities.getById(id)
    return pointEntity
  }
  // 更新图片实体位置
  function updateEntityPosition(longitude: number, latitude: number, id: string, params?: any) {
  function updateEntityPosition (longitude: number, latitude: number, id: string, params?: any) {
    const entity = getEntityById(id) as Cesium.Entity
    const position = Cesium.Cartesian3.fromDegrees(longitude, latitude)
    const heading = Cesium.Math.toRadians(-params.heading)
@@ -277,17 +311,17 @@
  }

  // 加载json文件
  const loadGeoJson = (url:string) => {
  const loadGeoJson = (url: string) => {
    const option = {
      stroke: Cesium.Color.HOTPINK,
      fill: Cesium.Color.PINK,
      stroke: Cesium.Color.HOTPINK.withAlpha(0.5),
      fill: Cesium.Color.PINK.withAlpha(0.3),
      strokeWidth: 3,
    }
    const promise = Cesium.GeoJsonDataSource.load(url, option)

    promise.then(dataSource => {
      console.log(dataSource)
      viewer.dataSources.add(dataSource)
      viewer?.dataSources.add(dataSource)
    })
  }

@@ -336,6 +370,10 @@
    addPolyline,
    addEllipse,
    loadGeoJson,
    removeAllDataSource
    removeAllDataSource,
    addClickEvent,
    removeClickEvent,
    addRightClick,
    removeRightClickEvent
  }
}