ceisum 圖表 拖拽實現

<template>
  <div>
    <div id="cesiumContainer" style="width: 100%; height: 70vh;"></div>
    <canvas id="myChart" style="width: 100%; height: 30vh; cursor: move;"></canvas>
  </div>
</template>

<script>
import { Viewer } from 'cesium';
import Chart from 'chart.js';

export default {
  name: 'CesiumMapWithDraggableChart',
  mounted() {
    // 初始化 Cesium Viewer
    this.viewer = new Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain(),
      imageryProvider: Cesium.IonImageryProvider,
      accessToken: 'token' // token
    });

    // 創建圖表
    this.createChart();

    // 添加拖拽功能
    this.addDragFunctionality();
  },
  beforeDestroy() {
    // 清理 Cesium Viewer
    if (this.viewer) {
      this.viewer.destroy();
    }
  },
  methods: {
    createChart() {
      const ctx = document.getElementById('myChart').getContext('2d');
      this.myChart = new Chart(ctx, {
        type: 'bar', // 圖表類型
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    },
    addDragFunctionality() {
      const chartCanvas = document.getElementById('myChart');
      let isDragging = false;
      let startX, startY;

      chartCanvas.addEventListener('mousedown', (e) => {
        isDragging = true;
        startX = e.clientX - chartCanvas.offsetLeft;
        startY = e.clientY - chartCanvas.offsetTop;
      });

      chartCanvas.addEventListener('mousemove', (e) => {
        if (isDragging) {
          const x = e.clientX - startX;
          const y = e.clientY - startY;
          chartCanvas.style.transform = `translate(${x}px, ${y}px)`;
        }
      });

      chartCanvas.addEventListener('mouseup', () => {
        isDragging = false;
      });

      chartCanvas.addEventListener('mouseleave', () => {
        isDragging = false;
      });
    }
  }
};
</script>

<style>
#cesiumContainer {
  position: relative;
}
</style>