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 | 147 ++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 120 insertions(+), 27 deletions(-)
diff --git a/src/hooks/use-cesium-tsa.ts b/src/hooks/use-cesium-tsa.ts
index bbf48af..a25ff3b 100644
--- a/src/hooks/use-cesium-tsa.ts
+++ b/src/hooks/use-cesium-tsa.ts
@@ -20,17 +20,29 @@
outlineWidth: number,
[key: string]: any
}
+interface polyline {
+ width?: number
+ material?: Cesium.Color
+ [key: string]: any
+}
interface pointOption {
- longitude: number
- latitude: number
+ longitude?: number
+ latitude?: number
point?: pointSetting
billboard?: billboardSetting
+ polyline?: polyline
label?: labelSetting
id?: string
heading?: number
pitch?: number
roll?: number
}
+
+interface ellipseOption {
+ longitude: number
+ latitude: number
+}
+
// 定义全局的viewer变量防止重复生成
// eslint-disable-next-line no-var
var viewer: Cesium.Viewer | null = null
@@ -40,16 +52,16 @@
// 天地图Key
// 天地图地图
const TDT_IMG_C = 'https://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
- '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
- '&style=default&format=tiles&tk=' + TDT_Token
+ '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
+ '&style=default&format=tiles&tk=' + TDT_Token
// 天地图注记
const TDT_ZJ = 'https://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
- '&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
- '&style=default&format=tiles&tk=' + TDT_Token
+ '&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
+ '&style=default&format=tiles&tk=' + TDT_Token
// 标准地图注记
const TID_STAND = 'https://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0' +
- '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
- '&style=default&format=tiles&tk=' + TDT_Token
+ '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
+ '&style=default&format=tiles&tk=' + TDT_Token
// 天地图图层变量
const imageryProvider_tdt = new Cesium.WebMapTileServiceImageryProvider({
url: TDT_IMG_C,
@@ -60,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({
@@ -134,6 +146,10 @@
}
}
+ function removeAllDataSource () {
+ viewer?.dataSources.removeAll()
+ }
+
// 清除所有标记点
function removeAllPoint () {
if (viewer) {
@@ -144,19 +160,75 @@
const addPoint = (pointOption: pointOption) => {
if (!pointOption.longitude && !pointOption.latitude) return
const position = Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude)
- const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(pointOption.heading, pointOption.pitch, pointOption.roll))
viewer?.entities.add({
- position: Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude),
+ position,
billboard: pointOption.billboard,
point: pointOption.point,
label: pointOption.label,
id: pointOption.id,
- orientation
+ })
+ }
+ // 添加半径为7公里的范围的圆
+ const addEllipse = ({ longitude, latitude }: ellipseOption) => {
+ if (!longitude && !latitude) return
+ const position = Cesium.Cartesian3.fromDegrees(longitude, latitude)
+ viewer?.entities.add({
+ position,
+ id: 'rangeEllipse',
+ name: 'rangeEllipse',
+ ellipse: {
+ semiMinorAxis: 7000.0,
+ semiMajorAxis: 7000.0,
+ outline: true,
+ material: Cesium.Color.CORNFLOWERBLUE.withAlpha(0.3)
+ }
+ })
+ }
+ // 添加左键点击事件
+ 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)
+ }
+
+ // 添加线段
+ const addPolyline = (pointOption: pointOption) => {
+ viewer?.entities.add({
+ polyline: pointOption.polyline,
+ id: pointOption.id,
})
}
// 通过点ID删除
- function removeById (id:string) {
+ function removeById (id: string) {
viewer?.entities.removeById(id)
const pointEntity = viewer?.entities.getById(id)
if (pointEntity && pointEntity !== undefined) {
@@ -164,27 +236,24 @@
}
}
// 通过点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)
- const pitch = Cesium.Math.toRadians(params.pitch)
- const roll = Cesium.Math.toRadians(params.roll)
- const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, pitch, roll))
+ const heading = Cesium.Math.toRadians(-params.heading)
if (Cesium.defined(entity)) {
entity.position = position
- entity.orientation = orientation
+ entity.billboard.rotation = heading
}
}
// 飞行 flyto
- const flyTo = (pointOption: pointOption, time: number = 4) => {
+ const flyTo = (pointOption: pointOption, time: number = 4, height: number = 3000) => {
if (!pointOption.longitude && !pointOption.latitude) return
- const destination = Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude, 3000)
+ const destination = Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude, height)
const duration = time
viewer?.camera.flyTo({
destination,
@@ -217,20 +286,20 @@
}
// 地图放大
- const zoonIn = (range:number) => {
+ const zoonIn = (range: number) => {
// 获取当前视角的高度
const cameraHeight = viewer?.camera.positionCartographic.height
const amout = Cesium.Math.sign(range) * cameraHeight / Math.log(cameraHeight)
viewer?.camera.zoomIn(amout)
}
// 地图缩小
- const zoonOut = (range:number) => {
+ const zoonOut = (range: number) => {
const cameraHeight = viewer?.camera.positionCartographic.height
const amout = Cesium.Math.sign(range) * cameraHeight / Math.log(cameraHeight)
viewer?.camera.zoomOut(amout)
}
// 生成或删除路网图层
- const roadPattern = (flag:boolean) => {
+ const roadPattern = (flag: boolean) => {
if (store.state.common.mapSetting.mode === 0) return
const imageryLayers = viewer?.scene.imageryLayers
const tdtZwImg_c = imageryLayers?._layers.find(v => v.imageryProvider._layer === 'tdtZwImg_c')
@@ -240,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
@@ -281,6 +366,14 @@
roadPattern,
patternMap,
getEntityById,
- updateEntityPosition
+ updateEntityPosition,
+ addPolyline,
+ addEllipse,
+ loadGeoJson,
+ removeAllDataSource,
+ addClickEvent,
+ removeClickEvent,
+ addRightClick,
+ removeRightClickEvent
}
}
--
Gitblit v1.9.3