Cesium地图上POI点上方添加站点名称标签

WebVue/TaiHufenglang/src/components/Cesium.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="cesiumContainer" style="height: 100%;width: 100%;"></div>
-  <!-- <addEntityPoint /> -->
 </template>
 
 <script setup>
@@ -11,59 +10,73 @@ import JYLData from '@/assets/Data/THJYL.json'
 
 const TDTTK = "d9e7aa2ad204aba6aeedea6f5ab48ed9";
 
-
-
 onMounted(() => {
   const viewer = new Cesium.Viewer('cesiumContainer', {
     timeline: false,
   });
 
-
-// 创建点图元集合
-// const pointCollection = new Cesium.PointPrimitiveCollection();
-const billboardCollection = new Cesium.BillboardCollection();
-// 遍历数据并添加点
-JYLData.forEach((item)  => {
-    const position = Cesium.Cartesian3.fromDegrees( 
-        parseFloat(item.LGTD), // 经度 
-        parseFloat(item.LTTD)  // 纬度
+    // 定义距离显示条件和缩放属性
+  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)  // 纬度
     );
 
-    // 创建图标并添加到集合中
-    billboardCollection.add({ 
-        position: position,
-        image: '/src/assets/icon/blue.png',  // 替换为你的图标路径 
-        scale: 0.3, // 图标缩放比例（可选）
-        // color: Cesium.Color.BLUE,
+    // 创建组合了图标和标签的实体
+    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,
-
-        // 可选：设置图标旋转角度
-        // rotation: 0,
-        // 可选：设置图标透明度
-        // color: new Cesium.Color(1.0, 1.0, 1.0, 0.8)
+        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
+      },
     });
- 
-    // 创建点图元并添加到集合中
-    // pointCollection.add({ 
-    //     position: position,
-    //     color: Cesium.Color.YELLOW,
-    //     pixelSize: 10,
-    //     outlineColor: Cesium.Color.BLACK,
-    //     outlineWidth: 2,
-    // });
-});
- 
-// 将点集合添加到场景中
-viewer.scene.primitives.add(billboardCollection); 
-
-    // // 模拟 JSON 数据 
-    // const pointsData = [ 
-    //     { longitude: 100, latitude: 25, color: 'yellow', pixelSize: 20, outlineColor: 'black', outlineWidth: 2 }, 
-    //     { longitude: 103, latitude: 28, color: 'purple', pixelSize: 25, outlineColor: 'white', outlineWidth: 3 }, 
-    // ]; 
- 
-
+  });
 
   // 天地图影像
   const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({
@@ -76,6 +89,7 @@ viewer.scene.primitives.add(billboardCollection);
     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}`,
@@ -87,8 +101,8 @@ viewer.scene.primitives.add(billboardCollection);
     show: false,
   });
 
-   // 移除默认水印（新增）
-   viewer.cesiumWidget.creditContainer.style.display = "none";
+  // 移除默认水印
+  viewer.cesiumWidget.creditContainer.style.display = "none";
 
   // 设置初始镜头位置（太湖）
   viewer.camera.setView({
@@ -101,31 +115,11 @@ viewer.scene.primitives.add(billboardCollection);
 
   viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);
 
-  // function addPrimitivePoint() {
-  //   // 创建点集合 - 使用 PointPrimitiveCollection
-  //   const pointCollection = new Cesium.PointPrimitiveCollection();
-  //   // 添加黄色点
-  //   pointCollection.add({
-  //     position: Cesium.Cartesian3.fromDegrees(100, 25), // 广州附近
-  //     color: Cesium.Color.YELLOW,
-  //     pixelSize: 20,
-  //     outlineColor: Cesium.Color.BLACK,
-  //     outlineWidth: 2,
-  //     id: "primitive-point-1",
-  //   });
-   
-  //   // 添加紫色点
-  //   pointCollection.add({
-  //     position: Cesium.Cartesian3.fromDegrees(103, 28), // 成都附近
-  //     color: Cesium.Color.PURPLE,
-  //     pixelSize: 25,
-  //     outlineColor: Cesium.Color.WHITE,
-  //     outlineWidth: 3,
-  //     id: "primitive-point-2",
-  //   });
-  //   // 将点集合添加到场景
-  //   viewer.scene.primitives.add(pointCollection);
-  // }
-
+  // 清理函数
+  onUnmounted(() => {
+    if (viewer && !viewer.isDestroyed()) {
+      viewer.destroy();
+    }
+  });
 })
-</script>
+</script>