超强跟踪弹窗：Cesium跟随弹窗终极开发指南

2024-01-21 11:38:25

利用 Cesium 和 Vue3 构建令人惊叹的跟随式弹出窗口

地理空间数据可视化已成为当今数字时代的关键方面，因为它使我们能够以三维方式探索和理解复杂的信息。Cesium，作为地理信息系统 (GIS) 库的先驱，提供了强大的功能，可以创建逼真的 3D 地图和场景。

本文将深入探讨如何使用 Cesium 和 Vue3 构建一个交互式且响应迅速的跟随式弹出窗口。跟随式弹出窗口是一种常见的用户界面元素，它紧跟鼠标或指针的移动，显示与地图上特定位置或特征相关的信息。我们将从基本概念开始，逐步深入了解 Cesium 和 Vue3 的集成，以及如何利用它们来实现一个功能全面的跟随式弹出窗口。

什么是 Cesium？

Cesium 是一个开源且免费的 JavaScript 库，专门用于创建交互式 3D 地图和场景。它提供了一套广泛的 API 和工具，使开发人员能够轻松地构建沉浸式可视化体验。Cesium 以其高性能、跨平台支持和易用性而闻名。

什么是 Vue3？

Vue3 是一种渐进式 JavaScript 框架，用于构建用户界面。它基于响应式编程范例，这意味着当数据发生变化时，UI 会自动更新。Vue3 以其易于学习、组件化和高性能而著称。

Cesium 和 Vue3 的整合

Cesium 和 Vue3 可以通过多种方式进行整合。最常见的方法是使用 Cesium 的 Vue3 插件。此插件提供了大量有用的功能，例如 Cesium 组件、指令和过滤器。另一种方法是直接使用 Cesium 的 API，这提供了更大的灵活性，但需要对 Cesium 有更深入的了解。

构建一个简单的跟随式弹出窗口

第一步是创建一个 Vue3 组件来表示弹出窗口。此组件包含一个基本的 HTML 结构，例如 <div> 元素来容纳弹出窗口的内容。

<template>
  <div class="popup">
    {{ content }}
  </div>
</template>

接下来，我们需要创建一个 Vue3 实例来渲染这个组件。此实例将包含一个 <cesium-viewer> 元素和一个引用弹出窗口组件的 <popup> 元素。

<template>
  <cesium-viewer>
    <popup :content="content"></popup>
  </cesium-viewer>
</template>

<script>
import { createApp } from 'vue'
import CesiumViewer from 'cesium-viewer'
import Popup from './Popup.vue'

const app = createApp({
  components: {
    CesiumViewer,
    Popup
  },
  data() {
    return {
      content: 'Hello World!'
    }
  }
})

app.mount('#app')
</script>

最后，我们需要将此 Vue3 实例挂载到一个 DOM 元素，例如 <div> 元素。

<div id="app"></div>

现在，我们已经创建了一个基本跟随式弹出窗口。此弹出窗口将跟随鼠标移动，并显示指定的文本内容。

扩展弹出窗口的功能

我们可以通过添加额外的功能来扩展弹出窗口，例如关闭按钮、内容动态加载或根据鼠标位置调整位置。

添加关闭按钮

<template>
  <div class="popup">
    <div class="content">
      {{ content }}
    </div>
    <button @click="close">关闭</button>
  </div>
</template>

<script>
import { createApp } from 'vue'
import CesiumViewer from 'cesium-viewer'
import Popup from './Popup.vue'

const app = createApp({
  components: {
    CesiumViewer,
    Popup
  },
  data() {
    return {
      content: 'Hello World!'
    }
  },
  methods: {
    close() {
      this.$refs.popup.visible = false
    }
  }
})

app.mount('#app')
</script>

动态加载内容

<template>
  <div class="popup">
    <div class="content">
      <div v-if="isLoading">Loading...</div>
      <div v-else>{{ content }}</div>
    </div>
    <button @click="loadContent">加载内容</button>
  </div>
</template>

<script>
import { createApp } from 'vue'
import CesiumViewer from 'cesium-viewer'
import Popup from './Popup.vue'

const app = createApp({
  components: {
    CesiumViewer,
    Popup
  },
  data() {
    return {
      content: null,
      isLoading: false
    }
  },
  methods: {
    loadContent() {
      this.isLoading = true
      setTimeout(() => {
        this.content = '新内容已加载！'
        this.isLoading = false
      }, 1000)
    }
  }
})

app.mount('#app')
</script>

调整位置

<template>
  <div class="popup">
    <div class="content">
      {{ content }}
    </div>
  </div>
</template>

<script>
import { createApp } from 'vue'
import CesiumViewer from 'cesium-viewer'
import Popup from './Popup.vue'

const app = createApp({
  components: {
    CesiumViewer,
    Popup
  },
  data() {
    return {
      content: 'Hello World!'
    }
  },
  mounted() {
    const popupElement = this.$refs.popup.$el
    const viewer = this.$refs.cesiumViewer.cesiumViewer

    // 侦听鼠标移动事件
    viewer.scene.canvas.addEventListener('mousemove', (e) => {
      // 获取鼠标位置
      const position = {
        x: e.clientX,
        y: e.clientY
      }

      // 根据鼠标位置调整弹出窗口位置
      popupElement.style.left = `${position.x + 10}px`
      popupElement.style.top = `${position.y + 10}px`
    })
  }
})

app.mount('#app')
</script>