From 09f3e998cb200323fc9ac12aca0f4198a5083244 Mon Sep 17 00:00:00 2001 From: cbwu <504-wuchengbo@htsdfp.com> Date: Wed, 10 Apr 2024 16:31:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9EMarker=E5=9B=BE?= =?UTF-8?q?=E5=B1=82=E5=AD=98=E5=82=A8=E6=89=80=E6=9C=89Marker=E5=AF=B9?= =?UTF-8?q?=E8=B1=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map/SceneViewer.vue | 10 +++++++--- src/global.d.ts | 7 +++++++ src/utils/map/draw/drawPoint.ts | 9 +++++---- src/utils/map/geometry/billboard.ts | 10 ++++++++-- 4 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/components/map/SceneViewer.vue b/src/components/map/SceneViewer.vue index 34baaba..31d3364 100644 --- a/src/components/map/SceneViewer.vue +++ b/src/components/map/SceneViewer.vue @@ -2,7 +2,7 @@ * @Author: cbwu 504-wuchengbo@htsdfp.com * @Date: 2024-03-07 14:15:35 * @LastEditors: cbwu - * @LastEditTime: 2024-04-10 13:59:42 + * @LastEditTime: 2024-04-10 16:30:23 * @Description: --> <template> @@ -11,7 +11,7 @@ <script setup lang="ts"> import { onMounted, ref } from 'vue' -import { Viewer, Ion, Cartesian3 } from 'cesium' +import { Viewer, Ion, Cartesian3, CustomDataSource, Color } from 'cesium' import 'cesium/Build/Cesium/Widgets/widgets.css' import { TDTLayerType, @@ -22,6 +22,7 @@ import { import { initViewer, perfViewer, showNavigator } from '@/utils/map/sceneViewer' import { flyToChina } from '@/utils/map/camera' import CreatePolyline from '@/utils/map/draw/drawPolyline' +import DrawPoint from '@/utils/map/draw/drawPoint' const viewerDivRef = ref<HTMLDivElement>() let viewer: Viewer window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/' @@ -38,7 +39,7 @@ Ion.defaultAccessToken = // 60.0, // 北纬 // ) -onMounted(() => { +onMounted(async () => { //初始化 viewer = initViewer(viewerDivRef.value as HTMLElement) // 性能优化 @@ -58,6 +59,9 @@ onMounted(() => { ) // 添加三维地形服务 viewer.terrainProvider = getTDTTerrainProvider() + // 标记点图层,存储所有地标点 + const markerLayer = new CustomDataSource('Marker') + await viewer.dataSources.add(markerLayer) // 挂载在window,供全局组件共享 window.viewer = viewer diff --git a/src/global.d.ts b/src/global.d.ts index 6e464e5..e004482 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -1,3 +1,10 @@ +/* + * @Author: cbwu 504-wuchengbo@htsdfp.com + * @Date: 2024-03-07 13:57:05 + * @LastEditors: cbwu + * @LastEditTime: 2024-04-10 15:47:36 + * @Description: + */ // import * as Cesium from 'cesium' import type { Cesium, Viewer } from 'cesium' diff --git a/src/utils/map/draw/drawPoint.ts b/src/utils/map/draw/drawPoint.ts index b5b3164..37ad10d 100644 --- a/src/utils/map/draw/drawPoint.ts +++ b/src/utils/map/draw/drawPoint.ts @@ -2,7 +2,7 @@ * @Author: cbwu 504-wuchengbo@htsdfp.com * @Date: 2024-03-27 09:51:04 * @LastEditors: cbwu - * @LastEditTime: 2024-04-10 13:53:42 + * @LastEditTime: 2024-04-10 15:54:02 * @Description: 绘制点类 */ import { @@ -12,17 +12,18 @@ import { Color, ScreenSpaceEventType, Entity, - CallbackProperty, - PolylineDashMaterialProperty, + DataSource, } from 'cesium' import { BillBoard } from '../geometry/billboard' import { cartesian2ToCartesian3 } from '../coordinate' export default class DrawPoint { viewer: Viewer handler: ScreenSpaceEventHandler + markerLayer: DataSource constructor(viewer: Viewer) { this.viewer = viewer this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas) + this.markerLayer = viewer.dataSources.getByName('Marker')[0] } //开始绘制 public start() { @@ -42,7 +43,7 @@ export default class DrawPoint { ) => { const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position) if (cartesian3) { - this.viewer.entities.add(new BillBoard(cartesian3)) + this.markerLayer.entities.add(new BillBoard(cartesian3)) this.viewer.scene.requestRender() } } diff --git a/src/utils/map/geometry/billboard.ts b/src/utils/map/geometry/billboard.ts index a6a1465..4e16f69 100644 --- a/src/utils/map/geometry/billboard.ts +++ b/src/utils/map/geometry/billboard.ts @@ -2,10 +2,10 @@ * @Author: cbwu 504-wuchengbo@htsdfp.com * @Date: 2024-04-10 08:53:12 * @LastEditors: cbwu - * @LastEditTime: 2024-04-10 13:55:27 + * @LastEditTime: 2024-04-10 16:29:56 * @Description: 广告牌对象 */ -import { Entity, Cartesian3, Color, HeightReference } from 'cesium' +import { Entity, Cartesian3, Cartesian2, Color, HeightReference } from 'cesium' import { getMapAssetsFile } from '@/utils/getAssets' export class BillBoard extends Entity { static ID: number = 0 @@ -23,6 +23,12 @@ export class BillBoard extends Entity { heightReference: HeightReference.CLAMP_TO_GROUND, // disableDepthTestDistance: Number.POSITIVE_INFINITY, // 可能会提高在不同角度下的清晰度 }, + // label: { + // text: 'Maker1', + // font: '16px sans-serif', + // scale: 1, + // pixelOffset: new Cartesian2(5, 0), + // }, }) } }