From aec00ecc093be803860c8675cbe1c4c776a7cb4e Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Tue, 19 Mar 2024 17:49:21 +0800
Subject: [PATCH] update： 新建航线、事件编辑、kmz文件问题修改
---
src/hooks/use-cesium-tsa.ts | 82 +++++++++++++++++++++++++++++++++++-----
1 files changed, 71 insertions(+), 11 deletions(-)
diff --git a/src/hooks/use-cesium-tsa.ts b/src/hooks/use-cesium-tsa.ts
index 95176b8..a25ff3b 100644
--- a/src/hooks/use-cesium-tsa.ts
+++ b/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({
@@ -146,8 +146,12 @@
}
}
+ function removeAllDataSource () {
+ viewer?.dataSources.removeAll()
+ }
+
// 清除所有标记点
- function removeAllPoint() {
+ function removeAllPoint () {
if (viewer) {
viewer?.entities?.removeAll()
}
@@ -175,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)
}
// 添加线段
@@ -190,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) {
@@ -198,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)
@@ -271,6 +309,22 @@
viewer?.imageryLayers.addImageryProvider(annotation)
}
}
+
+ // 加载json文件
+ const loadGeoJson = (url: string) => {
+ const option = {
+ 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)
+ })
+ }
+
// 切换不同背景图层
const patternMap = () => {
const imageryLayers = viewer?.scene.imageryLayers
@@ -314,6 +368,12 @@
getEntityById,
updateEntityPosition,
addPolyline,
- addEllipse
+ addEllipse,
+ loadGeoJson,
+ removeAllDataSource,
+ addClickEvent,
+ removeClickEvent,
+ addRightClick,
+ removeRightClickEvent
}
}
--
Gitblit v1.9.3