n-cesium-pointermove

组件介绍

依赖

navie-ui

使用示例

点我查看代码

cesium-viewer-wrapper.vue

<script lang="ts" setup>
import { CesiumViewer } from '@summeruse/cesium'

defineOptions({
  name: 'CesiumViewerWrapper',
})
</script>

<template>
  <CesiumViewer class="w-100% h-300px">
    <template #default="{ viewer }">
      <slot :viewer="viewer" />
    </template>
  </CesiumViewer>
</template>

demo.vue

<script lang="ts" setup>
import type { CreateOptions } from '@summeruse/cesium'
import type { Property } from 'cesium'
import { getOSMLayer, NCesiumPointermove, useCesiumViewer } from '@summeruse/cesium'

import {
  Cartesian3,
  Color,
  Entity,
  HeightReference,
} from 'cesium'

const viewer = useCesiumViewer()!

const layer = getOSMLayer()
viewer.imageryLayers.add(layer)

const entity = new Entity({
  position: Cartesian3.fromDegrees(116.397428, 39.90923, 50.0),
  ellipsoid: {
    radii: new Cartesian3(100.0, 100.0, 100.0),
    innerRadii: new Cartesian3(1.0, 1.0, 1.0),
    material: Color.DARKCYAN.withAlpha(0.1),
    outline: true,
    heightReference: HeightReference.NONE,
  },
  properties: {
    name: '圆',
    data: {
      xx: '123',
    },
  },
})

entity.addProperty('data')

const createOptions: CreateOptions = ({ feature }) => {
  if (feature) {
    if (feature instanceof Entity) {
      const properties = feature.properties
      if (properties) {
        const data = properties.data as Property
        const name = properties.name as Property
        return {
          content: `${data.getValue().xx} - ${name}`,
          showArrow: false,
        }
      }
    }
  }
}

viewer.entities.add(entity)
viewer.flyTo(entity)
</script>

<template>
  <NCesiumPointermove :viewer :create-options />
</template>

组件代码

点我查看代码

<script setup lang="ts">
import type { PopoverPlacement } from 'naive-ui'
import type { VNodeChild } from 'vue'
import type { NCesiumPointermoveProps } from './props'
import { RenderVNode } from '@summeruse/common'
import { Cesium3DTileFeature, ScreenSpaceEventHandler, ScreenSpaceEventType } from 'cesium'
import { NPopover } from 'naive-ui'
import { ref, shallowRef, watchEffect } from 'vue'

const props = defineProps<NCesiumPointermoveProps>()

const popoverConfig = ref({
  visible: false,
  x: 0,
  y: 0,
})

const child = shallowRef<(() => VNodeChild) | VNodeChild | string>()

const placement = ref<PopoverPlacement>('bottom-start')

const raw = ref(false)

const showArrow = ref(false)

let handler: ScreenSpaceEventHandler | null = null

watchEffect(() => {
  const viewer = props.viewer
  if (viewer) {
    handler = new ScreenSpaceEventHandler(viewer.scene.canvas)
    handler.setInputAction((movement: ScreenSpaceEventHandler.MotionEvent) => {
      popoverConfig.value.visible = false
      const pick = viewer.scene.pick(movement.endPosition)
      const _3DTileFeature = pick instanceof Cesium3DTileFeature ? pick : undefined
      const entity = (pick && !_3DTileFeature) ? viewer.entities.getById(pick.id.id) : undefined
      const options = props.createOptions({
        movement,
        feature: _3DTileFeature || entity,
      })
      if (options) {
        const offset = viewer.container.getBoundingClientRect()
        const clientX = movement.startPosition.x + offset.left
        const clientY = movement.startPosition.y + offset.top
        child.value = options.content
        placement.value = options.placement || 'bottom-start'
        showArrow.value = options.showArrow || false
        raw.value = options.raw || false
        popoverConfig.value.visible = true
        popoverConfig.value.x = clientX
        popoverConfig.value.y = clientY
      }
    }, ScreenSpaceEventType.MOUSE_MOVE)
  }
})
</script>

<template>
  <NPopover
    style="pointer-events: none;"
    :show-arrow :raw :placement :show="popoverConfig.visible" :x="popoverConfig.x" :y="popoverConfig.y"
    trigger="manual" :theme-overrides="{
      boxShadow: 'none',
    }"
  >
    <RenderVNode :dynamic-v-node="child" />
  </NPopover>
</template>

Props

点我查看代码

import type { Cesium3DTileFeature, Entity, ScreenSpaceEventHandler, Viewer } from 'cesium'
import type { PopoverPlacement } from 'naive-ui'

import type { VNodeChild } from 'vue'

export interface NCesiumPointermoveOptions {
  movement: ScreenSpaceEventHandler.MotionEvent
  feature?: Cesium3DTileFeature | Entity
}

export type CreateOptions = (data: NCesiumPointermoveOptions) =>
  | {
    content: (() => VNodeChild) | VNodeChild | string
    raw?: boolean
    showArrow?: boolean
    placement?: PopoverPlacement
  }
  | undefined

export interface NCesiumPointermoveProps {
  viewer?: Viewer
  createOptions: CreateOptions
}