BAIWebCS/WebVue/TaiHufenglang/src/components/Cesium.vue

<template>
  <div id="cesiumContainer" style="height: 100%;width: 100%;"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as Cesium from 'cesium';
import "cesium/Build/CesiumUnminified/Widgets/widgets.css";
import JYLData from '@/assets/Data/THJYL.json'

const TDTTK = "d9e7aa2ad204aba6aeedea6f5ab48ed9";

onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    timeline: false,
  });

    // 定义距离显示条件和缩放属性
  const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(
    0,  // 最小显示距离（0表示始终显示）
    10000000  // 最大显示距离（1000公里外不显示）
  );
  
  const pointNearFarScalar = new Cesium.NearFarScalar(
    10000, 1.0,     // 近点距离和缩放比例
    1000000, 0.3    // 远点距离和缩放比例
  );
  
  const labelNearFarScalar = new Cesium.NearFarScalar(
    10000, 1.0,     // 近点距离和缩放比例
    400000, 0     // 远点距离和缩放比例（50公里外完全隐藏）
  );

  //   const entitiesNearFarScalar = new Cesium.NearFarScalar(
  //   10000, 1.0,     // 近点距离和缩放比例
  //   1000000, 0.1     // 远点距离和缩放比例（50公里外完全隐藏）
  // );

  
  // 遍历数据并添加点和标签
  JYLData.forEach((item) => {
    const position = Cesium.Cartesian3.fromDegrees(
      parseFloat(item.LGTD), // 经度 
      parseFloat(item.LTTD)  // 纬度
    );

    // 创建组合了图标和标签的实体
    viewer.entities.add({
      position: position,
      // scaleByDistance:entitiesNearFarScalar,
      billboard: {
        image: '/src/assets/icon/blue.png',  // 图标路径
        scale: 0.4,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        distanceDisplayCondition: distanceDisplayCondition,
        scaleByDistance: pointNearFarScalar
      },
      label: {
        text: item.STNM || '未知点',
        font: '16px 微软雅黑',
        fillColor: Cesium.Color.WHITE,
        backgroundColor: new Cesium.Color(0.1, 0.1, 0.1, 0.7),
        backgroundPadding: new Cesium.Cartesian2(8, 4),
        showBackground: true,
        cornerRadius: 4,
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -32),
        scale: 1.0,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        distanceDisplayCondition: distanceDisplayCondition,
        scaleByDistance: labelNearFarScalar
      },
    });
  });

  // 天地图影像
  const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({
    url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
    layer: "tdt",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "w",
    maximumLevel: 18,
    show: false,
  });
  viewer.imageryLayers.addImageryProvider(tdtLayer);
  
  // 天地图注记
  const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({
    url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
    layer: "tdtAnno",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "w",
    maximumLevel: 18,
    show: false,
  });

  // 移除默认水印
  viewer.cesiumWidget.creditContainer.style.display = "none";

  // 设置初始镜头位置（太湖）
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(120.169103, 31.226174, 500000),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
    },
  });

  viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);

  // 清理函数
  onUnmounted(() => {
    if (viewer && !viewer.isDestroyed()) {
      viewer.destroy();
    }
  });
})
</script>