增加弹窗，修改点击逻辑

src/components/Edge.vue

@@ -6,8 +6,7 @@
         :key="index"
         :value="'' + index + 1"
         @change="change(item)"
-        >{{ item.label }}</el-radio
-      >
+      >{{ item.label }}</el-radio>
     </el-radio-group>
     <el-switch
       v-model="elSwitchValue"
@@ -15,12 +14,7 @@
       style="--el-switch-on-color: #409eff; --el-switch-off-color: #ff4949"
       @change="elSwitchChange"
     />
-    <el-dialog
-      v-if="from != null"
-      v-model="dialogFormVisible"
-      title="详细信息"
-      width="500"
-    >
+    <el-dialog v-if="from != null" v-model="dialogFormVisible" title="详细信息" width="500">
       <div class="info_container">
         <el-form :model="form">
           <el-form-item
@@ -28,8 +22,7 @@
             :key="key"
             :label="key"
             :label-width="'120px'"
-            >{{ value }}</el-form-item
-          >
+          >{{ value }}</el-form-item>
         </el-form>
       </div>
 
@@ -40,8 +33,7 @@
               dialogFormVisible = false;
               from = null;
             "
-            >关闭</el-button
-          >
+          >关闭</el-button>
         </div>
       </template>
     </el-dialog>
@@ -62,9 +54,9 @@ export default {
               outerColor: "#ffee00",
               outerWidth: 5,
               innerColor: "#00c4ff",
-              alpha: 0.5,
-            },
-          },
+              alpha: 0.5
+            }
+          }
         },
         {
           label: "村居",
@@ -74,9 +66,9 @@ export default {
               outerColor: "#ffee00",
               outerWidth: 3,
               innerColor: "#00c4ff",
-              alpha: 0.5,
-            },
-          },
+              alpha: 0.5
+            }
+          }
         },
         {
           label: "责任网格",
@@ -86,9 +78,9 @@ export default {
               outerColor: "#ffee00",
               outerWidth: 3,
               innerColor: "#00c4ff",
-              alpha: 0.5,
-            },
-          },
+              alpha: 0.5
+            }
+          }
         },
         {
           label: "微网格",
@@ -98,21 +90,21 @@ export default {
               outerColor: "#ffee00",
               outerWidth: 3,
               innerColor: "#00c4ff",
-              alpha: 0.5,
-            },
-          },
-        },
+              alpha: 0.5
+            }
+          }
+        }
       ],
       elSwitchValue: false,
 
       from: null,
-      dialogFormVisible: false,
+      dialogFormVisible: false
     };
   },
   mounted() {
     window.edgeQJ = {
       geojsonDataSource: null,
-      edgeEntity: null,
+      edgeEntity: null
     };
   },
   methods: {
@@ -126,10 +118,10 @@ export default {
       this.radio == "0";
       if (status) {
         this.show();
-        this.openClick();
+        // this.openClick();
       } else {
         this.hide();
-        this.closeClick();
+        // this.closeClick();
       }
     },
 
@@ -162,24 +154,35 @@ export default {
       if (edgeQJ.handler) return;
       // 绑定点击事件
       edgeQJ.handler = new SkyScenery.ScreenSpaceEventHandler(viewer.canvas);
-      edgeQJ.handler.setInputAction(function (movement) {
+      edgeQJ.handler.setInputAction(function(movement) {
         var pick = viewer.scene.pick(movement.position); // 拾取鼠标所在的entity
         if (SkyScenery.defined(pick)) {
           let entity = pick.id;
           if (!entity) return;
           if (entity.type && entity.type == "edge") {
-            let properties = entity.properties.getValue();
-            console.log(properties);
-            that.from = properties;
-            that.dialogFormVisible = true;
-            // openEntityPropertiesDialog(properties, entity.layerId);
+            let cartesian = viewer.camera.pickEllipsoid(
+              movement.position,
+              viewer.scene.globe.ellipsoid
+            );
+            // 空间坐标转世界坐标(弧度)
+            if (!cartesian) return;
+            let cartographic = SkyScenery.Cartographic.fromCartesian(cartesian);
+            if (!cartographic) return;
+            // 弧度转为角度（经纬度）
+            let lon = SkyScenery.Math.toDegrees(cartographic.longitude); // 经度值
+            let lat = SkyScenery.Math.toDegrees(cartographic.latitude); // 纬度值
+            let showEntity = SkyScenery.Cartesian3.fromDegrees(lon, lat);
+            showEntity.data = entity.properties.getValue();
+            that.$store.state.showEntity = showEntity;
           }
         }
       }, SkyScenery.ScreenSpaceEventType.LEFT_CLICK);
     },
     closeClick() {
       if (edgeQJ.handler) {
-        edgeQJ.handler.removeInputAction(SkyScenery.ScreenSpaceEventType.LEFT_CLICK);
+        edgeQJ.handler.removeInputAction(
+          SkyScenery.ScreenSpaceEventType.LEFT_CLICK
+        );
         edgeQJ.handler = null;
       }
       this.dialogFormVisible = false;
@@ -269,13 +272,13 @@ export default {
     addWall() {
       let that = this;
       fetch("./static/data/bianjie/西虹桥边界数据.geojson")
-        .then((resp) => resp.json())
-        .then((data) => {
+        .then(resp => resp.json())
+        .then(data => {
           let positions = data.features[0].geometry.coordinates[0];
           edgeQJ.edgeEntity = that.addDynamicWall(positions, {
             maxH: 150,
             color: "#0060fc",
-            duration: 3000,
+            duration: 3000
           });
         });
     },
@@ -292,7 +295,7 @@ export default {
       return viewer.entities.add({
         name: "立体墙效果",
         wall: {
-          positions: positions.map(function (item) {
+          positions: positions.map(function(item) {
             return SkyScenery.Cartesian3.fromDegrees(item[0], item[1]);
           }),
           // 设置高度
@@ -301,12 +304,12 @@ export default {
           material: new SkyScenery.DynamicWallMaterialProperty({
             color: SkyScenery.Color.fromCssColorString(options.color), // "#"
             trailImage: "/static/image/color.png",
-            duration: options.duration || 3000, // 3000
-          }),
-        },
+            duration: options.duration || 3000 // 3000
+          })
+        }
       });
-    },
-  },
+    }
+  }
 };
 </script>
 

src/components/Layers.vue

@@ -3,11 +3,7 @@
     <div class="title">重点图层</div>
     <div>
       <el-row v-for="(item, index) in arr" :key="index">
-        <el-checkbox
-          v-model="item.added"
-          :label="item.label"
-          @change="addedChange(item)"
-        />
+        <el-checkbox v-model="item.added" :label="item.label" @change="addedChange(item)" />
         <el-switch
           v-model="item.show"
           class="ml-2"
@@ -31,8 +27,7 @@
             :key="key"
             :label="key"
             :label-width="'120px'"
-            >{{ value }}</el-form-item
-          >
+          >{{ value }}</el-form-item>
         </el-form>
       </div>
 
@@ -43,8 +38,7 @@
               dialogFormVisible = false;
               from = null;
             "
-            >关闭</el-button
-          >
+          >关闭</el-button>
         </div>
       </template>
     </el-dialog>
@@ -60,48 +54,48 @@ export default {
         url: "./static/data/西虹桥公立学校.geojson",
         style: {
           point: {
-            imgUrl: "/static/image/layer/point.png",
-          },
-        },
+            imgUrl: "/static/image/layer/point.png"
+          }
+        }
       },
       {
         label: "私立学校",
         url: "./static/data/西虹桥私立学校.geojson",
         style: {
           point: {
-            imgUrl: "/static/image/layer/point.png",
-          },
-        },
+            imgUrl: "/static/image/layer/point.png"
+          }
+        }
       },
       {
         label: "公立医院",
         url: "./static/data/西虹桥公立医疗.geojson",
         style: {
           point: {
-            imgUrl: "/static/image/layer/point.png",
-          },
-        },
+            imgUrl: "/static/image/layer/point.png"
+          }
+        }
       },
       {
         label: "私立医院",
         url: "./static/data/西虹区民营医疗.geojson",
         style: {
           point: {
-            imgUrl: "/static/image/layer/point.png",
-          },
-        },
+            imgUrl: "/static/image/layer/point.png"
+          }
+        }
       },
       {
         label: "养老机构",
         url: "./static/data/西虹桥养老机构.geojson",
         style: {
           point: {
-            imgUrl: "/static/image/layer/point.png",
-          },
-        },
-      },
+            imgUrl: "/static/image/layer/point.png"
+          }
+        }
+      }
     ];
-    arr = arr.map(function (item, index) {
+    arr = arr.map(function(item, index) {
       item.id = "layer" + index;
       item.added = false;
       item.show = true;
@@ -110,12 +104,12 @@ export default {
     return {
       arr: arr,
       from: null,
-      dialogFormVisible: false,
+      dialogFormVisible: false
     };
   },
   mounted() {
     window.layerQJ = {
-      geojsonDataSource: {},
+      geojsonDataSource: {}
     };
   },
   methods: {
@@ -150,16 +144,17 @@ export default {
       if (layerQJ.handler) return;
       // 绑定点击事件
       layerQJ.handler = new SkyScenery.ScreenSpaceEventHandler(viewer.canvas);
-      layerQJ.handler.setInputAction(function (movement) {
+      layerQJ.handler.setInputAction(function(movement) {
         var pick = viewer.scene.pick(movement.position); // 拾取鼠标所在的entity
         if (SkyScenery.defined(pick)) {
           let entity = pick.id;
           if (!entity) return;
           if (entity.type && entity.type == "layers") {
-            let properties = entity.properties.getValue();
-            console.log(properties);
-            that.from = properties;
-            that.dialogFormVisible = true;
+            // let properties = entity.properties.getValue();
+            that.$store.state.showEntity = entity;
+            // console.log(properties);
+            // that.from = properties;
+            // that.dialogFormVisible = true;
             // openEntityPropertiesDialog(properties, entity.layerId);
           }
         }
@@ -195,7 +190,7 @@ export default {
       //     alpha: 0.7
       //   }
       // };
-      SkyScenery.GeoJsonDataSource.load(url).then(function (dataSource) {
+      SkyScenery.GeoJsonDataSource.load(url).then(function(dataSource) {
         viewer.dataSources.add(dataSource);
         layerQJ.geojsonDataSource[id] = dataSource;
         var entities = dataSource.entities.values;
@@ -208,7 +203,7 @@ export default {
               width: 48,
               height: 48,
               pixelOffset: new SkyScenery.Cartesian2(0, -25),
-              heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND,
+              heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND
             });
           }
           if (entity.polyline) {
@@ -232,24 +227,24 @@ export default {
             entity.polygon.height = 5;
             entity.polygon.material = new SkyScenery.ImageMaterialProperty({
               image: "/static/image/b2.png", // 图片路径
-              transparent: true, // 是否透明
+              transparent: true // 是否透明
             });
           }
           entity.type = "layers";
         }
       });
-    },
+    }
   },
   computed: {
     mapStatus() {
       return this.$store.state.initMap;
-    },
+    }
   },
   watch: {
     mapStatus(newVal, oldVal) {
-      if (newVal) this.openClick();
-    },
-  },
+      // if (newVal) this.openClick();
+    }
+  }
 };
 </script>
 

src/components/Map.vue

@@ -1,10 +1,16 @@
 <template>
-  <div id="skysceneryContainer"></div>
+  <div id="skysceneryContainer">
+    <Popup />
+  </div>
 </template>
 
 <script>
+import Popup from "@/components/Popup.vue";
 export default {
   name: "Map",
+  components: {
+    Popup
+  },
   data() {
     return {
       // viewer3DTiles实例《systemConfig.data3DTiles keys,tile》
@@ -156,105 +162,44 @@ export default {
           });
 
           this.$store.commit("createdMap", true);
+
+          // 绑定点击事件
+          let handler = new SkyScenery.ScreenSpaceEventHandler(viewer.canvas);
+          handler.setInputAction(function(movement) {
+            var pick = viewer.scene.pick(movement.position); // 拾取鼠标所在的entity
+            if (SkyScenery.defined(pick)) {
+              let entity = pick.id;
+              if (!entity) return;
+              if (
+                entity.type &&
+                (entity.type == "layers" || entity.type == "edge")
+              ) {
+                let cartesian = viewer.camera.pickEllipsoid(
+                  movement.position,
+                  viewer.scene.globe.ellipsoid
+                );
+                // 空间坐标转世界坐标(弧度)
+                if (!cartesian) return;
+                let cartographic = SkyScenery.Cartographic.fromCartesian(
+                  cartesian
+                );
+                if (!cartographic) return;
+                // 弧度转为角度（经纬度）
+                let lon = SkyScenery.Math.toDegrees(cartographic.longitude); // 经度值
+                let lat = SkyScenery.Math.toDegrees(cartographic.latitude); // 纬度值
+                let showEntity = SkyScenery.Cartesian3.fromDegrees(lon, lat);
+                showEntity.data = entity.properties.getValue();
+                that.$store.state.showEntity = showEntity;
+              } else {
+              }
+            } else {
+              that.$store.state.showEntity = null;
+            }
+          }, SkyScenery.ScreenSpaceEventType.LEFT_CLICK);
+
           return;
         }, 0);
-        // viewer.entities.add({
-        //   name: "点",
-        //   position: SkyScenery.Cartesian3.fromDegrees(121.1, 31), //经纬度转世界坐标
-        //   point: {
-        //     show: true,
-        //     color: SkyScenery.Color.GREEN,
-        //     pixelSize: 20,
-        //     outlineColor: SkyScenery.Color.YELLOW,
-        //     outlineWidth: 3,
-        //   },
-        //   label: {
-        //     text: "这里是标签", //设置文字内容
-        //     font: "normal 18px 楷体", //设置文字大小和字体
-        //     fillColor: SkyScenery.Color.fromCssColorString("#00ff00"), //设置文字填充的颜色
-        //     horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
-        //     verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
-        //     pixelOffset: new SkyScenery.Cartesian2(0, -20),
-        //   },
-        // });
-        // viewer.entities.add({
-        //   position: SkyScenery.Cartesian3.fromDegrees(121.2, 31),
-        //   billboard: {
-        //     image: "/static/image/point.png",
-        //     width: 48, // default: undefined
-        //     height: 48, // default: undefined
-        //     scale: 1.0, // default: 1.0
-        //     show: true, // default
-        //     horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER, // default
-        //     verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM, // default: CENTER
-        //   },
-        //   label: {
-        //     text: "这是自定义图片", // 设置文字内容
-        //     font: "normal 18px 楷体", // 设置文字大小和字体
-        //     fillColor: SkyScenery.Color.fromCssColorString("#00ff00"), //设置文字填充的颜色
-        //     horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
-        //     verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
-        //     pixelOffset: new SkyScenery.Cartesian2(0, -50),
-        //   },
-        // });
-        // let positions = [
-        //   [121.04829640102727, 31.12735759260756],
-        //   [121.05219953077487, 31.126058264888133],
-        //   [121.0556573133586, 31.125143117515066],
-        //   [121.0585577885634, 31.12489903339664],
-        //   [121.05855842602281, 31.117437091290032],
-        //   [121.05755469646111, 31.116865171387122],
-        //   [121.05855867110577, 31.114567660254956],
-        //   [121.05716503781966, 31.111412856109656],
-        //   [121.05169919616742, 31.109414349328368],
-        //   [121.04846566530048, 31.10731617798831],
-        //   [121.04523257218045, 31.105074455848328],
-        //   [121.04372646220537, 31.108713847196935],
-        //   [121.04238895034425, 31.11239990163383],
-        //   [121.04216536839769, 31.11503097997496],
-        //   [121.03965751482633, 31.117141773623022],
-        //   [121.0392664980893, 31.119247569299414],
-        //   [121.0401584271992, 31.124267692010815],
-        //   [121.04534263782213, 31.124207732078528],
-        //   [121.04813004860797, 31.124919266167907],
-        //   [121.04829640102727, 31.12735759260756],
-        // ];
-        // viewer.entities.add({
-        //   name: "立体墙效果",
-        //   wall: {
-        //     positions: positions.map(function (item) {
-        //       return SkyScenery.Cartesian3.fromDegrees(item[0], item[1]);
-        //     }),
-        //     // 设置高度
-        //     maximumHeights: new Array(positions.length).fill(100),
-        //     minimumHeights: new Array(positions.length).fill(0),
-        //     material: new SkyScenery.DynamicWallMaterialProperty({
-        //       color: SkyScenery.Color.fromCssColorString("#00c4ff80"),
-        //       trailImage: "/static/image/color.png",
-        //       duration: 3000,
-        //     }),
-        //   },
-        // });
-        // viewer.entities.add({
-        //   name: " 面",
-        //   polygon: {
-        //     hierarchy: {
-        //       positions: SkyScenery.Cartesian3.fromDegreesArray(
-        //         positions
-        //           .join(",")
-        //           .split(",")
-        //           .map(function (num) {
-        //             return Number(num);
-        //           })
-        //       ),
-        //     },
-        //     material: new SkyScenery.ImageMaterialProperty({
-        //       image: "/static/image/b2.png", // 图片路径
-        //       transparent: true, // 是否透明
-        //     }),
-        //   },
-        // });
-      } catch (error) { 
+      } catch (error) {
         console.log("createMap error:", error);
         window.location.reload();
       }

src/components/Popup.vue

@@ -0,0 +1,212 @@
+
+<template>
+  <div class="divlabel-container" id="stateShow" v-show="isShow">
+    <div class="animate-maker-border">
+      <div class="animate-marker__text" id="popup_content" v-html="desc"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isShow: false,
+      desc: "",
+      first: true,
+      gisPosition: null
+    };
+  },
+  // props: {
+  //   // entity: {
+  //   //   type: Object
+  //   // },
+  //   // data: {
+  //   //   type: Object
+  //   // }
+  // },
+  methods: {
+    openPopup(entity, data) {
+      // console.log(new Date().getTime());
+
+      let that = this;
+      //经纬度转为世界坐标
+      this.gisPosition = entity;
+      // if (entity.position) {
+      //   // gisPosition = entity.position.getValue();
+      //   gisPosition = entity;
+      // } else {
+      //   // let point1 = d(entity.polyline.positions._value[0]);
+      //   // let point2 = d(entity.polyline.positions._value[1]);
+      //   // gisPosition = SkyScenery.Cartesian3.fromDegrees(
+      //   //   (point1.lng + point2.lng) / 2,
+      //   //   (point1.lat + point2.lat) / 2,
+      //   //   0
+      //   // );
+      //   function d(cartesian3) {
+      //     var cartographic =
+      //       viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3);
+      //     var lat = SkyScenery.Math.toDegrees(cartographic.latitude);
+      //     var lng = SkyScenery.Math.toDegrees(cartographic.longitude);
+      //     return {
+      //       lng: lng,
+      //       lat: lat,
+      //     };
+      //   }
+      // }
+      if (that.gisPosition == null) throw new Error("popup location is error");
+
+      //   document.getElementById("stateShow").style.display = "block"; //弹出信息框
+      // document.getElementById("popup_title").innerHTML = data.name;
+      //   document.getElementById("popup_content").innerHTML = data.html || "";
+      this.isShow = true;
+      let html = "";
+      let properties = entity.data
+      for (const key in properties) {
+        if (Object.prototype.hasOwnProperty.call(properties, key)) {
+          html += `<div>${key}: ${properties[key]}</div>`;
+        }
+      }
+      this.desc = html;
+
+      if (this.first) {
+        //实时更新位置
+        viewer.scene.postRender.addEventListener(() => {
+          if (!that.isShow) return;
+          // console.log(new Date().getTime());
+          //转化为屏幕坐标
+          var windowPosition = SkyScenery.SceneTransforms.wgs84ToWindowCoordinates(
+            viewer.scene,
+            that.gisPosition
+          );
+          if (windowPosition == undefined) {
+            document.getElementById("stateShow").style.display = "none";
+            return;
+          }
+          document.getElementById("stateShow").style.left =
+            windowPosition.x - 150 + "px";
+          document.getElementById("stateShow").style.top =
+            windowPosition.y - 260 + "px";
+          document.getElementById("stateShow").style.display = "block";
+          //解决滚动不隐藏问题
+          const camerPosition = viewer.camera.position;
+          let height = viewer.scene.globe.ellipsoid.cartesianToCartographic(
+            camerPosition
+          ).height;
+          height += viewer.scene.globe.ellipsoid.maximumRadius;
+          if (
+            !(
+              SkyScenery.Cartesian3.distance(camerPosition, that.gisPosition) >
+              height
+            ) &&
+            viewer.camera.positionCartographic.height < 50000000
+          ) {
+            // document.getElementById("stateShow").style.display = "block";
+            that.isShow = true;
+          } else {
+            // document.getElementById("stateShow").style.display = "none";
+            that.isShow = false;
+          }
+        });
+        this.first = false;
+      }
+    },
+    closePopup() {
+      this.isShow = false;
+      this.desc = "";
+      this.gisPosition = null;
+      this.$store.state.showEntity = null;
+      // document.getElementById("popup_content").innerHTML = "";
+    }
+  },
+  computed: {
+    entity() {
+      return this.$store.state.showEntity;
+    }
+  },
+  watch: {
+    entity(newVal, oldVal) {
+      if (newVal == null) {
+        this.closePopup();
+      } else {
+        this.openPopup(newVal);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+#stateShow {
+  position: absolute;
+  z-index: 1;
+  background: #ffffff;
+  left: -1000px;
+  top: -1000px;
+  .animate-maker-border,
+  .animate-maker-border::before,
+  .animate-maker-border::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  .animate-maker-border {
+    width: 300px;
+    height: 200px;
+
+    margin: 0;
+    color: #69ca62;
+    box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
+    padding: 5px;
+    box-sizing: border-box;
+    // background: rgba(0, 173, 181, 0.32);
+    background: #343c2fb3;
+  }
+  .animate-maker-border::before,
+  .animate-maker-border::after {
+    content: "";
+    z-index: 10;
+    margin: -5%;
+    box-shadow: inset 0 0 0 2px;
+    animation: clipMe 8s linear infinite;
+  }
+  .animate-maker-border::before {
+    animation-delay: -4s;
+  }
+  @keyframes clipMe {
+    0%,
+    100% {
+      clip-path: inset(0 0 98% 0);
+    }
+    25% {
+      clip-path: inset(0 98% 0 0);
+    }
+    50% {
+      clip-path: inset(98% 0 0 0);
+    }
+    75% {
+      clip-path: inset(0 0 0 98%);
+    }
+  }
+  .animate-marker__text {
+    color: #fff;
+    font-size: 14px;
+    // display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    font-weight: bolder;
+    user-select: none;
+    cursor: pointer;
+    overflow: hidden;
+    overflow-y: auto;
+    padding: 0px 20px;
+    box-sizing: border-box;
+    :deep(div) {
+      line-height: 30px;
+    }
+  }
+}
+</style>