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 | 384 +++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 348 insertions(+), 36 deletions(-)
diff --git a/src/hooks/use-cesium-tsa.ts b/src/hooks/use-cesium-tsa.ts
index 4ad2d7a..a25ff3b 100644
--- a/src/hooks/use-cesium-tsa.ts
+++ b/src/hooks/use-cesium-tsa.ts
@@ -1,67 +1,379 @@
import { ELocalStorageKey, EDeviceTypeName } from '/@/types'
-import dockIcon from '/@/assets/icons/dock.png'
-import rcIcon from '/@/assets/icons/rc.png'
-import droneIcon from '/@/assets/icons/drone.png'
import * as Cesium from 'cesium'
+import { useMyStore } from '/@/store'
+import {
+ getCurrentInstance,
+} from 'vue'
interface billboardSetting {
- image: string,
- scale?: number,
- [key: string]: any
+ image: string,
+ scale?: number,
+ [key: string]: any
}
interface pointSetting {
- pixelSize: number,
- outlineWidth: number,
- [key: string]: any
+ pixelSize: number,
+ outlineWidth: number,
+ [key: string]: any
}
interface labelSetting {
- text: string,
- font: string,
- outlineWidth: number,
- [key: string]: any
+ text: string | undefined,
+ font: string,
+ outlineWidth: number,
+ [key: string]: any
+}
+interface polyline {
+ width?: number
+ material?: Cesium.Color
+ [key: string]: any
}
interface pointOption {
- longitude: number
- latitude: number
- point?: pointSetting
- billboard?: billboardSetting
- label?: labelSetting
+ longitude?: number
+ latitude?: number
+ point?: pointSetting
+ billboard?: billboardSetting
+ polyline?: polyline
+ label?: labelSetting
+ id?: string
+ heading?: number
+ pitch?: number
+ roll?: number
}
-export function cesiumOperation (viewer: any) {
- const cesiumExample = viewer
- const icons = new Map([
- [EDeviceTypeName.Aircraft, droneIcon],
- [EDeviceTypeName.Gateway, rcIcon],
- [EDeviceTypeName.Dock, dockIcon]
- ])
+interface ellipseOption {
+ longitude: number
+ latitude: number
+}
+
+// 定义全局的viewer变量防止重复生成
+// eslint-disable-next-line no-var
+var viewer: Cesium.Viewer | null = null
+export function cesiumOperation () {
+ let handler: Cesium.ScreenSpaceEventHandler
+ const TDT_Token = 'c6eea7dad4fa1e2d1e32ec0e7c9735db'
+ // 天地图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
+ // 天地图注记
+ 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
+ // 标准地图注记
+ 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
+ // 天地图图层变量
+ const imageryProvider_tdt = new Cesium.WebMapTileServiceImageryProvider({
+ url: TDT_IMG_C,
+ layer: 'tdtImg_c',
+ style: 'default',
+ format: 'tiles',
+ tileMatrixSetID: 'c',
+ 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: 17,
+ })
+ // 标准地图图层变量
+ const imageryProvider_stand = new Cesium.UrlTemplateImageryProvider({
+ url: 'https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
+ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ // format: 'image/jpeg',
+ // show: true,
+ maximumLevel: 18,
+ credit: 'stand_tc'
+ })
+ // 标准地图图层注解
+ const imageryProvider_standZh = new Cesium.UrlTemplateImageryProvider({
+ url: 'https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
+ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ maximumLevel: 18,
+ credit: 'stand_zj'
+ })
+ // 天地图中文注记加载
+ const annotation = new Cesium.WebMapTileServiceImageryProvider({
+ url: TDT_ZJ,
+ layer: 'tdtZwImg_c',
+ style: 'default',
+ format: 'tiles',
+ tileMatrixSetID: 'c',
+ 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,
+ })
+ const dimension = ref(3)
+ const store = useMyStore()
+ const _init = () => {
+ // Cesium Token
+ const cesiumToken = import.meta.env.VITE_CESIUM_TOKEN
+ Cesium.Ion.defaultAccessToken = cesiumToken
+ Cesium.Camera.DEFAULT_VIEW_FACTOR = -0.45
+ // 西南东北，默认显示中国
+ Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(110, -25, 110, 90)
+ viewer = new Cesium.Viewer('cesiumContainer', {
+ infoBox: false, // 禁用沙箱，解决控制台报错
+ animation: false, // 左下角的动画仪表盘
+ baseLayerPicker: false, // 右上角的图层选择按钮
+ geocoder: false, // 搜索框
+ homeButton: false, // home按钮
+ sceneModePicker: false, // 模式切换按钮
+ timeline: false, // 底部的时间轴
+ navigationHelpButton: false, // 右上角的帮助按钮，
+ selectionIndicator: false, // 是否显示选择指示器
+ baseLayer: false,
+ })
+ handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+ viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK) // 禁用双击
+ // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100
+ viewer.scene.screenSpaceCameraController.maximumZoomDistance = 4500000
+ loadLAYER()
+ }
+ // 加载图层、注解方法
+ const loadLAYER = () => {
+ // 天地图图层加载
+ if (store.state.common.mapSetting.mode === 1) {
+ viewer?.imageryLayers.addImageryProvider(imageryProvider_tdt)
+ }
+ // 标准地图加载
+ if (store.state.common.mapSetting.mode === 0) {
+ viewer?.imageryLayers.addImageryProvider(imageryProvider_stand)
+ viewer?.imageryLayers.addImageryProvider(imageryProvider_standZh)
+ }
+ // 路线图加载
+ if (store.state.common.mapSetting.roadLine === true && store.state.common.mapSetting.mode === 1) {
+ viewer?.imageryLayers.addImageryProvider(annotation)
+ }
+ }
+
+ function removeAllDataSource () {
+ viewer?.dataSources.removeAll()
+ }
+
// 清除所有标记点
function removeAllPoint () {
- console.log(cesiumExample, 'cesiumExample')
- if (cesiumExample) {
- cesiumExample.entities.removeAll()
+ if (viewer) {
+ viewer?.entities?.removeAll()
}
}
// 添加标记点
- function addPoint (pointOption:pointOption) {
- cesiumExample.entities.add({
- position: Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude),
+ const addPoint = (pointOption: pointOption) => {
+ if (!pointOption.longitude && !pointOption.latitude) return
+ const position = Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude)
+ viewer?.entities.add({
+ position,
billboard: pointOption.billboard,
- point: pointOption.point
+ point: pointOption.point,
+ label: pointOption.label,
+ id: pointOption.id,
})
}
+ // 添加半径为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) {
+ viewer?.entities.removeById(id)
+ const pointEntity = viewer?.entities.getById(id)
+ if (pointEntity && pointEntity !== undefined) {
+ viewer?.entities.remove(pointEntity)
+ }
+ }
+ // 通过点ID获取实体
+ function getEntityById (id: string) {
+ const pointEntity = viewer?.entities.getById(id)
+ return pointEntity
+ }
+ // 更新图片实体位置
+ 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)
+ if (Cesium.defined(entity)) {
+ entity.position = position
+ entity.billboard.rotation = heading
+ }
+ }
// 飞行 flyto
- function flyTo (pointOption:pointOption, time: number = 3) {
- const destination = Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude, 1000)
+ 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, height)
const duration = time
- cesiumExample.camera.flyTo({
+ viewer?.camera.flyTo({
destination,
duration
})
}
+ // 二维三维切换
+ // 切换为二三维模式
+ const switchModel = (type: string) => {
+ switch (type) {
+ case '2D':
+ viewer?.scene.camera.setView({
+ orientation: {
+ pitch: Cesium.Math.toRadians(-60),
+ heading: Cesium.Math.toRadians(0),
+ }
+ })
+ dimension.value = 2
+ break
+ case '3D':
+ viewer?.scene.camera.setView({
+ orientation: {
+ pitch: Cesium.Math.toRadians(-90),
+ heading: Cesium.Math.toRadians(0),
+ }
+ })
+ dimension.value = 3
+ }
+ }
+
+ // 地图放大
+ 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 cameraHeight = viewer?.camera.positionCartographic.height
+ const amout = Cesium.Math.sign(range) * cameraHeight / Math.log(cameraHeight)
+ viewer?.camera.zoomOut(amout)
+ }
+ // 生成或删除路网图层
+ 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')
+ if (!flag) {
+ viewer?.imageryLayers.remove(tdtZwImg_c)
+ } else {
+ 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
+ // 切换为标准图层
+ if (store.state.common.mapSetting.mode === 0) {
+ const tdtImg_c = imageryLayers?._layers.find(v => v.imageryProvider._layer === 'tdtImg_c')
+ const tdtZwImg_c = imageryLayers?._layers.find(v => v.imageryProvider._layer === 'tdtZwImg_c')
+ viewer?.imageryLayers.remove(tdtImg_c)
+ viewer?.imageryLayers.remove(tdtZwImg_c)
+ } else {
+ const tdtStand_c = imageryLayers?._layers.find(v => v.imageryProvider.credit.html === 'stand_tc')
+ const tdtStand_zj = imageryLayers?._layers.find(v => v.imageryProvider.credit.html === 'stand_zj')
+ viewer?.imageryLayers.remove(tdtStand_c)
+ viewer?.imageryLayers.remove(tdtStand_zj)
+ }
+ loadLAYER()
+ }
+ onMounted(() => {
+ if (viewer) return
+ _init()
+ const { appContext } = getCurrentInstance()
+ const global = appContext.config.globalProperties
+ global.$viewer = viewer
+ })
+
+ // 销毁地图模型
+ // onUnmounted(() => {
+ // // viewer = null
+ // })
return {
addPoint,
removeAllPoint,
- flyTo
+ flyTo,
+ removeById,
+ switchModel,
+ dimension,
+ zoonIn,
+ zoonOut,
+ roadPattern,
+ patternMap,
+ getEntityById,
+ updateEntityPosition,
+ addPolyline,
+ addEllipse,
+ loadGeoJson,
+ removeAllDataSource,
+ addClickEvent,
+ removeClickEvent,
+ addRightClick,
+ removeRightClickEvent
}
}
--
Gitblit v1.9.3