Bläddra i källkod

添加模型,label和点击事件

sunzehao 3 månader sedan
förälder
incheckning
c1bec77c40
1 ändrade filer med 32 tillägg och 8 borttagningar
  1. 32 8
      src/views/cesiumComponents/topographicMap.vue

+ 32 - 8
src/views/cesiumComponents/topographicMap.vue

@@ -103,7 +103,8 @@ export default {
                     "风机",
                     e.longitude,
                     e.latitude,
-                    0.5
+                    0.5,
+                    e
                 );
             });
             //添加3D光伏模型
@@ -113,7 +114,8 @@ export default {
                 "光伏",
                 106.797343,
                 37.546013,
-                20
+                20,
+                null
             );
 
             // 创建一个方向光
@@ -132,24 +134,46 @@ export default {
             this.viewer = viewer
             
         },
-        addModel(viewer, uri, name, lon, lat, scale) {
+        addModel(viewer, uri, name, lon, lat, scale, val) {
             const hpRoll = new Cesium.HeadingPitchRoll(90.0, 0.0, 0.0);
             const position = Cesium.Cartesian3.fromDegrees(lon, lat);
             const orientation = Cesium.Transforms.headingPitchRollQuaternion(
                 position,
                 hpRoll
             );
-            viewer.entities.add({
+            const entity = viewer.entities.add({
                 name, // 模型名称
                 position, // 模型位置
                 orientation, // 模型朝向
                 model: {
-                uri,
-                scale,
-                // 模型贴地
-                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+                    uri,
+                    scale,
+                    // 模型贴地
+                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                 },
+                //添加标签
+                label: {
+                    text: val ? val.name : name,                     // 标签文字
+                    font: '14px sans-serif',                // 字体
+                    fillColor: Cesium.Color.YELLOW,         // 填充颜色
+                    outlineColor: Cesium.Color.BLACK,       // 描边颜色
+                    outlineWidth: 2,                        // 描边宽度
+                    style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 填充+描边
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,  // 文本在模型上方
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中
+                    eyeOffset: new Cesium.Cartesian3(50, 1150, 5), // 向上 15 米
+                    translucencyByDistance: new Cesium.NearFarScalar(1.0e6, 1.0, 6.0e6, 0.0)
+                }
             });
+            // 创建事件处理器
+            const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+            handler.setInputAction(function(click) {
+                const picked = viewer.scene.pick(click.position);
+                if (picked && picked.id === entity) {
+                    console.log('你点击了标签或模型!');
+                    alert('你点击了: ' + entity.label.text.getValue());
+                }
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
         },
         csceneElliposid(viewer) {
             let that = this