追随鼠标的点位详情弹窗——Cesium3+Vue3实现方案

2023-11-19 17:34:42

Cesium3+Vue3：构建动态交互式的点位详情弹窗

前言

地理信息系统（GIS）应用程序中，交互式点位详情弹窗至关重要，可帮助用户快速获取特定地物的信息。传统的弹窗通常固定位置，随着点位密集度的增加，操作不便。本文将介绍如何利用Cesium3和Vue3构建一个跟随鼠标的动态点位详情弹窗，提升GIS应用的交互体验。

技术栈

Cesium3：强大的3D地球可视化库
Vue3：高效的数据绑定和组件化前端框架

实现步骤

1. 初始化Cesium3和Vue3

import Cesium from "cesium";
import Vue from "vue";

Vue.component("cesium-viewer", {
  template: `<div id="cesium-viewer"></div>`,
  mounted() {
    this.viewer = new Cesium.Viewer("cesium-viewer");
  },
  beforeDestroy() {
    this.viewer.destroy();
  },
});

const app = new Vue({
  el: "#app",
  data: {
    pointFeatures: [],
  },
});

2. 创建点位要素

const pointFeatures = [
  {
    id: "feature1",
    position: Cesium.Cartesian3.fromDegrees(-122.4194, 37.7749),
    properties: {
      name: "San Francisco",
      population: 860000,
    },
  },
  {
    id: "feature2",
    position: Cesium.Cartesian3.fromDegrees(-118.2437, 34.0522),
    properties: {
      name: "Los Angeles",
      population: 3900000,
    },
  },
];

3. 将点位要素添加到场景中

for (let i = 0; i < pointFeatures.length; i++) {
  const feature = pointFeatures[i];
  const entity = this.viewer.entities.add({
    id: feature.id,
    position: feature.position,
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED,
    },
    label: {
      text: feature.properties.name,
      font: "14px Arial",
      color: Cesium.Color.WHITE,
      showBackground: true,
      backgroundColor: Cesium.Color.BLACK,
    },
  });
}

4. 创建动态弹窗

const tooltip = document.createElement("div");
tooltip.classList.add("tooltip");
tooltip.style.position = "absolute";
tooltip.style.left = "0px";
tooltip.style.top = "0px";
tooltip.style.padding = "10px";
tooltip.style.backgroundColor = "white";
tooltip.style.border = "1px solid black";
document.body.appendChild(tooltip);

this.viewer.scene.postRender.addEventListener(() => {
  const pickedFeature = this.viewer.scene.pick(Cesium.Mouse.getPosition());
  if (pickedFeature && pickedFeature.id) {
    const pointFeature = pointFeatures.find(f => f.id === pickedFeature.id);
    if (pointFeature) {
      tooltip.style.display = "block";
      tooltip.style.left = Cesium.Mouse.getPosition().x + 10 + "px";
      tooltip.style.top = Cesium.Mouse.getPosition().y + 10 + "px";
      tooltip.innerHTML = `
        <p><strong>Name:</strong> ${pointFeature.properties.name}</p>
        <p><strong>Population:</strong> ${pointFeature.properties.population}</p>
      `;
    } else {
      tooltip.style.display = "none";
    }
  } else {
    tooltip.style.display = "none";
  }
});