2、3层叫号配置完善

叫号闪屏优化
解决 解决闪屏问题后导致的漫游卡顿

public/index.html

@@ -35,8 +35,11 @@
   <div id="app"></div>
   <script type="text/javascript" src="./static/plugins/js/cesiumPlugins/keyboard.js"></script>
   <script type="text/javascript" src="./static/plugins/js/cesiumPlugins/SkyBoxOnGround.js"></script>
-  <script type="text/javascript" src="./static/plugins/js/cesiumPlugins/materialDynamicImage.js"></script>
+  <script type="text/javascript" src="./static/plugins/js/turf/turf.min.js"></script>
+
+  <!-- <script type="text/javascript" src="./static/plugins/js/cesiumPlugins/materialDynamicImage.js"></script> -->
   <!-- <script type="text/javascript" src="./static/plugins/js/gifler.min.js"></script> -->
+
   <link rel="stylesheet" href="./static/plugins/js/swiper/swiper.min.css">
   <script type="text/javascript" src="./static/plugins/js/swiper/swiper-bundle.min.js"></script>
   <script type="text/javascript" src="./static/plugins/js/jquery/jquery.min.js"></script>

public/static/config/globalVariable.js

@@ -3,4 +3,5 @@ let globalVariable = {
     hotMarkerArr: [],
     jumpPointArr: [],
     tilesArr: {},
+    JHEntityObj: {},
 }

src/components2/LTool.vue

@@ -2,7 +2,8 @@
   <div
     class="leftpanel"
     v-show="$store.state.fenceng"
-  > 
+  >
+    <!-- $store.state.fenceng -->
     <div class="container">
       <div class="slider_container">
         <van-slider

src/components2/MainMap.vue

@@ -19,7 +19,6 @@
       </div>
     </van-popup> -->
     </div>
-    <canvas id="canvas-b" class="canvas" width="500" height="180"></canvas>
     <Tool></Tool>
   </div>
 </template>
@@ -33,7 +32,8 @@ import api from "@/api/content";
 export default {
   data() {
     return {
-      JHEntityObj: {},
+      loopJHObj: null,
+
       dialogVisible: false,
       dialogInfoStr: "",
       clipboard: null,
@@ -148,34 +148,6 @@ export default {
         this.showInfoDailog(result.info);
       });
     };
-
-    // window.addImage = this.addImage;
-    // window.changeImage = this.changeImage;
-    // addImage(globalVariable.viewer, {
-    //   arr: [
-    //     121.12273519090121, 31.153827313511016, 3.280499471365055,
-    //     121.12273815983032, 31.153814774429165, 3.281036567079009,
-    //   ],
-    //   minH: [2.807028457880749, 2.807028457880749],
-    // });
-    // window.tp =
-    // this.addImage(globalVariable.viewer, {
-    //   arr: [
-    //     121.12273519090121, 31.153826679130416, 3.280499471365055,
-    //     121.12273833983032, 31.153813096263634, 3.281036567079009,
-    //   ],
-    //   minH: [2.807028457880749, 2.807028457880749]
-    // }, '../static/images/ceshi.png');
-    // changeImage(tp,'../static/images/jinru.png')
-
-    // this.addImage(globalVariable.viewer, {
-    //   arr: [
-    //     121.12273884192843, 31.153811497621240, 3.2435919391164383,
-    //     121.12274206014264, 31.153797613000965, 3.2321212783392600,
-    //   ],
-    //   minH: [2.8569308025328994, 2.8529680784118310]
-    // }, '../static/images/ceshi.png');
-    this.initJH();
     return;
   },
 
@@ -291,7 +263,9 @@ export default {
       //     }
       //   );
       // }
-      // window.changeImage = this.changeImage;
+
+      // 叫号
+      this.initJH();
 
       // 水面加载
       setTimeout(() => {
@@ -299,15 +273,13 @@ export default {
       }, 10000);
     },
 
+    // 延迟加载模型
     yanchiAdd3DTiles(index, keyArr) {
       let that = this;
       if (index >= keyArr.length) return;
       const str = keyArr[index];
       globalVariable.tilesArr[str] = this.add3DTilesData(
-        systemConfig.tilesConfig[str].dataUrl + str + "/tileset.json" //
-        // {
-        //   light: systemConfig.tilesConfig[str].light,
-        // }
+        systemConfig.tilesConfig[str].dataUrl + str + "/tileset.json"
       );
       setTimeout(() => {
         that.yanchiAdd3DTiles(++index, keyArr);
@@ -678,50 +650,168 @@ export default {
 
     initJH() {
       let that = this;
+      this.initWindowBackground();
+      window.openJH = this.openJH;
+      window.closeJH = this.closeJH;
+      window.showJH = this.showJH;
+      window.hideJH = this.hideJH;
       window.getToken = function () {
         return that.$store.getters.getToken;
       };
-      this.getToken().then(() => {
-        serviceWindow.map(function (item, index) {
-          let pointArr = item.topPoint
-            .map(function (item_) {
-              return [item_.lon, item_.lat, item_.height];
-            })
-            .join()
-            .split(",")
-            .map((num) => Number(num));
-          that.getWindowInfo(item).then((info) => {
-            let image;
-            if (item.type == 1) {
-              image = that.createJHImage1(item, info);
-            } else if (item.type == 2) {
-              image = that.createJHImage2(item, info);
-            } else {
-              image = that.createJHImage1(item, info);
-            }
-            let entity = globalVariable.viewer.entities.add({
-              wall: {
-                positions: Cesium.Cartesian3.fromDegreesArrayHeights(pointArr),
-                minimumHeights: item.endHeight,
-                material: new Cesium.ImageMaterialProperty({
-                  image: image,
-                  transparent: true,
-                }),
-              },
-            });
-            that.JHEntityObj[item.id] = {
+      // this.getToken().then(() => {
+      serviceWindow.map(function (item, index) {
+        let pointArr = item.topPoint
+          .map(function (item_) {
+            return [item_.lon, item_.lat, item_.height];
+          })
+          .join()
+          .split(",")
+          .map((num) => Number(num));
+        if (item.type == 1) {
+          // that.getWindowInfo(item).then((info) => {
+          //   let image = that.createJHImage(item, info);
+          //   let entity = globalVariable.viewer.entities.add({
+          //     wall: {
+          //       positions:
+          //         Cesium.Cartesian3.fromDegreesArrayHeights(pointArr),
+          //       minimumHeights: item.endHeight,
+          //       material: new Cesium.ImageMaterialProperty({
+          //         image: image,
+          //         transparent: false,
+          //       }),
+          //     },
+          //   });
+          //   globalVariable.JHEntityObj[item.id] = {
+          //     item: item,
+          //     entity: entity,
+          //   };
+          // });
+          let entity = globalVariable.viewer.entities.add({
+            wall: {
+              positions: Cesium.Cartesian3.fromDegreesArrayHeights(pointArr),
+              minimumHeights: item.endHeight,
+              material: Cesium.Color.BLACK,
+              // material: new Cesium.ImageMaterialProperty({
+              //   image: image,
+              //   transparent: false,
+              // }),
+            },
+          });
+          if (item.id != "")
+            globalVariable.JHEntityObj[item.id] = {
               item: item,
-              entity: entity,
+              entity1: entity,
             };
+        } else {
+          let image = that.createJHImage(item);
+          let entity = globalVariable.viewer.entities.add({
+            wall: {
+              positions: Cesium.Cartesian3.fromDegreesArrayHeights(pointArr),
+              minimumHeights: item.endHeight,
+              material: new Cesium.ImageMaterialProperty({
+                image: image,
+                transparent: false,
+              }),
+            },
           });
-        });
+          if (item.id != "")
+            globalVariable.JHEntityObj[item.id] = {
+              item: item,
+              entity1: entity,
+            };
+        }
       });
-
+      // });
+      window.loopJHObj = "";
+      that.roundJH = true;
       // 开始循环访问
-      setInterval(() => {
+      that.loopJH();
+      // 开始循环访问
+      window.loopJHObj = window.setInterval(function () {
         that.loopJH();
-      }, serviceWindowTime); //
+      }, serviceWindowTime);
+    },
+    initWindowBackground() {
+      // let width = 300,
+      //   height = 100;
+      // var canvas = document.createElement("canvas");
+      // canvas.width = 300;
+      // canvas.height = 100;
+      // var ctx = canvas.getContext("2d");
+      // ctx.clearRect(0, 0, width, height);
+      // // 背景黑色填充
+      // ctx.fillStyle = "#000000";
+      // ctx.fillRect(0, 0, width, height);
+      // let image = canvas.toDataURL("image/png");
+      this.windowBackgroundArr = windowBackground.map(function (item, index) {
+        let pointArr = item.topPoint
+          .map(function (item_) {
+            return [item_.lon, item_.lat, item_.height];
+          })
+          .join()
+          .split(",")
+          .map((num) => Number(num));
+        return globalVariable.viewer.entities.add({
+          wall: {
+            positions: Cesium.Cartesian3.fromDegreesArrayHeights(pointArr),
+            minimumHeights: item.endHeight,
+            material: Cesium.Color.BLACK,
+            // new Cesium.ImageMaterialProperty({
+            //   image: Cesium.Color.BLACK,
+            //   transparent: false,
+            // }),
+          },
+        });
+      });
+    },
+
+    openJH() {
+      this.roundJH = true;
+    },
+    closeJH() {
+      this.roundJH = false;
+      // if (window.loopJHObj) {
+      //   window.clearInterval(window.loopJHObj);
+      //   window.loopJHObj = null;
+      // }
+    },
+    showJH(floor) {
+      let arr = Object.getOwnPropertyNames(globalVariable.JHEntityObj);
+      arr.map(function (id) {
+        let info = globalVariable.JHEntityObj[id];
+        if (floor) {
+          if (info.item.floor == floor) {
+            if (info.entity1) info.entity1.show = true;
+            if (info.entity2) info.entity2.show = true;
+          }
+        } else {
+          if (info.entity1) info.entity1.show = true;
+          if (info.entity2) info.entity2.show = true;
+        }
+      });
+      this.windowBackgroundArr.map(function (item) {
+        item.show = true;
+      });
+    },
+    hideJH(floor) {
+      let arr = Object.getOwnPropertyNames(globalVariable.JHEntityObj);
+      arr.map(function (id) {
+        let info = globalVariable.JHEntityObj[id];
+        if (floor) {
+          if (info.item.floor == floor) {
+            if (info.entity1) info.entity1.show = false;
+            if (info.entity2) info.entity2.show = false;
+          }
+        } else {
+          if (info.entity1) info.entity1.show = false;
+          if (info.entity2) info.entity2.show = false;
+        }
+      });
+      this.windowBackgroundArr.map(function (item) {
+        item.show = false;
+      });
     },
+
     getToken() {
       let that = this;
       return new Promise((resolve, reject) => {
@@ -731,14 +821,22 @@ export default {
         });
       });
     },
+
     getWindowInfo(params) {
       return new Promise((resolve, reject) => {
         api.getWindowInfo({ id: params.id }).then(function (result) {
-          resolve(result.data);
+          resolve(
+            result.data != null
+              ? result.data
+              : {
+                  win_status: "STOP",
+                }
+          );
         });
       });
     },
-    createJHImage1(item, info) {
+
+    createJHImage(item, info) {
       // win_code: "A02",
       // win_id: "102",
       // area_id: "310000310100310118001",
@@ -747,6 +845,7 @@ export default {
       // user_name: "谢晨 ",
       // ticket_uuid: "",
       // ticket_code: "",
+
       let width = 300,
         height = 100;
       var canvas = document.createElement("canvas");
@@ -754,15 +853,15 @@ export default {
       canvas.height = 100;
       var ctx = canvas.getContext("2d");
       ctx.clearRect(0, 0, width, height);
-
+      // 背景黑色填充
       ctx.fillStyle = "#000000";
       ctx.fillRect(0, 0, width, height);
-
+      // 窗口编号
       ctx.fillStyle = "#FF0000";
       ctx.font = "30px Arial";
-      // ctx.fillText(item.id, 15, 60);
-      ctx.fillText(info.win_code, 15, 60);
-
+      ctx.fillText(item.id, 15, 60);
+      // ctx.fillText(info.win_code, 15, 60);
+      // 红色数线
       ctx.fillStyle = "#FF0000";
       ctx.beginPath();
       ctx.lineWidth = "2";
@@ -771,60 +870,157 @@ export default {
       ctx.lineTo(83, 90);
       ctx.stroke(); // Draw it
 
+      /* 标题和叫号 */
       ctx.fillStyle = "#FF0000";
-      ctx.font = "30px Arial";
-      ctx.fillText(item.name, 100, 37);
+      let maxWidth = 183;
+
+      let row = 1;
+      if (item.title != "") ++row;
+      if (item.subtitle != "") ++row;
+      if (item.type == 1) {
+        if (row == 2) {
+          if (item.title.length * 30 > maxWidth) {
+            let num = maxWidth / item.title.length;
+            ctx.font = num + "px Arial";
+            ctx.fillText(item.title, 100, (30 - num) / 2 + 15 + num);
+          } else {
+            let start = (maxWidth - item.title.length * 30) / 2 + 100;
+            ctx.font = "30px Arial";
+            ctx.fillText(item.title, start, 45);
+          }
+          if (info.win_status == "STOP") {
+            ctx.font = "30px Arial";
+            ctx.fillText("暂停服务", 130, 83);
+          } else {
+            if (info.ticket_code == "") {
+              ctx.font = "30px Arial";
+              ctx.fillText("欢迎光临", 130, 83);
+            } else {
+              ctx.font = "30px Arial";
+              ctx.fillText("请" + info.ticket_code + "号", 112, 83);
+            }
+          }
+        } else if (row == 3) {
+          if (item.title.length * 20 > maxWidth) {
+            let num = maxWidth / item.title.length;
+            ctx.font = num + "px Arial";
+            ctx.fillText(item.title, 100, (20 - num) / 2 + 10 + num);
+          } else {
+            let start = (maxWidth - item.title.length * 20) / 2 + 100;
+            ctx.font = "20px Arial";
+            ctx.fillText(item.title, start, 30);
+          }
+
+          if (item.subtitle.length * 20 > maxWidth) {
+            let num = maxWidth / item.subtitle.length;
+            ctx.font = num + "px Arial";
+            ctx.fillText(
+              item.subtitle,
+              100,
+              (20 - num) / 2 + 10 + 20 + 10 + num
+            );
+          } else {
+            let start = (maxWidth - item.subtitle.length * 20) / 2 + 100;
+            ctx.font = "20px Arial";
+            ctx.fillText(item.subtitle, start, 60);
+          }
 
-      if (info.win_status == "STOP") {
-        ctx.fillStyle = "#FF0000";
-        ctx.font = "30px Arial";
-        ctx.fillText("暂停服务", 116, 83);
+          if (info.win_status == "STOP") {
+            ctx.font = "20px Arial";
+            ctx.fillText("暂停服务", 153.5, 90);
+          } else {
+            if (info.ticket_code == "") {
+              ctx.font = "20px Arial";
+              ctx.fillText("欢迎光临", 153.5, 90);
+            } else {
+              ctx.font = "20px Arial";
+              ctx.fillText("请" + info.ticket_code + "号", 140, 90);
+            }
+          }
+        }
       } else {
-        if (info.ticket_code == "") {
-          ctx.fillStyle = "#FF0000";
-          ctx.font = "30px Arial";
-          ctx.fillText("欢迎光临", 116, 83);
-        } else {
+        if (row == 1) {
+          ctx.clearRect(0, 0, width, height);
+          // 背景黑色填充
+          ctx.fillStyle = "#000000";
+          ctx.fillRect(0, 0, width, height);
           ctx.fillStyle = "#FF0000";
+          if (item.name.length * 30 >= 280) {
+            let num = 300 / item.name.length;
+            ctx.font = num + "px Arial";
+            ctx.fillText(item.name, 10, (100 - num) / 2 + num);
+          } else {
+            let start = (280 - item.name.length * 30) / 2 + 10;
+            ctx.font = "30px Arial";
+            ctx.fillText(item.name, start, 65);
+          }
+        } else if (row == 2) {
+          if (item.title.length * 30 > maxWidth) {
+            let num = maxWidth / item.title.length;
+            ctx.font = num + "px Arial";
+            ctx.fillText(item.title, 100, (30 - num) / 2 + 15 + num);
+          } else {
+            let start = (maxWidth - item.title.length * 30) / 2 + 100;
+            ctx.font = "30px Arial";
+            ctx.fillText(item.title, start, 45);
+          }
           ctx.font = "30px Arial";
-          ctx.fillText("请" + info.ticket_code + "号", 116, 83);
+          ctx.fillText("欢迎光临", 130, 83);
         }
       }
-
       return canvas.toDataURL("image/png");
     },
-    createJHImage2() {
-      let width = 300,
-        height = 100;
-      var canvas = document.createElement("canvas");
-      canvas.width = 300;
-      canvas.height = 100;
-      var ctx = canvas.getContext("2d");
-      ctx.clearRect(0, 0, width, height);
-
-      ctx.fillStyle = "#000000";
-      ctx.fillRect(0, 0, width, height);
-
-      ctx.fillStyle = "#FF0000";
-      ctx.font = "30px Arial";
-      ctx.textAlign = "center";
-      ctx.fillText(info.win_code, 150, 60);
-    },
 
     loopJH() {
+      if (!this.roundJH) return;
       let that = this;
       this.getToken().then(() => {
-        let arr = Object.getOwnPropertyNames(that.JHEntityObj);
+        let arr = Object.getOwnPropertyNames(globalVariable.JHEntityObj);
         arr.map(function (index) {
-          let obj = that.JHEntityObj[index];
+          let obj = globalVariable.JHEntityObj[index];
           let item = obj.item;
-          that.getWindowInfo(obj.item).then((info) => {
-            let image = that.createJHImage1(item, info);
-            obj.entity.wall.material = new Cesium.ImageMaterialProperty({
-              image: image,
-              transparent: true,
+          if (item.type == 1) {
+            that.getWindowInfo(obj.item).then((info) => {
+              let image = that.createJHImage(item, info);
+              let pointArr = item.topPoint
+                .map(function (item_) {
+                  return [item_.lon, item_.lat, item_.height];
+                })
+                .join()
+                .split(",")
+                .map((num) => Number(num));
+              globalVariable.JHEntityObj[index].entity2 =
+                globalVariable.viewer.entities.add({
+                  show: false,
+                  wall: {
+                    positions:
+                      Cesium.Cartesian3.fromDegreesArrayHeights(pointArr),
+                    minimumHeights: item.endHeight,
+                    material: new Cesium.ImageMaterialProperty({
+                      image: image,
+                      transparent: false,
+                    }),
+                  },
+                });
+              setTimeout(() => {
+                globalVariable.JHEntityObj[index].entity1.show = false;
+                if (that.roundJH) {
+                  globalVariable.JHEntityObj[index].entity2.show = true;
+                } else {
+                  globalVariable.JHEntityObj[index].entity2.show = false;
+                }
+                globalVariable.viewer.entities.remove(
+                  globalVariable.JHEntityObj[index].entity1
+                );
+                globalVariable.JHEntityObj[index].entity1 =
+                  globalVariable.JHEntityObj[index].entity2;
+              }, 200);
+              // obj.entity.wall.material = new Cesium.ImageMaterialProperty({
+              //   image: image,
+              //   transparent: true,
+              // });
             });
-          });
+          }
         });
       });
     },

src/components2/Tool.vue

@@ -399,6 +399,10 @@ export default {
         this.funcList[0].active = false;
         this.funcList[0].clickFunc(this.funcList[0]);
       }
+      // 叫号隐藏
+      if (closeJH) closeJH();
+      if (hideJH) hideJH();
+
       closeHull(0);
       unbindLimitCameraFunc();
       if (!item.active) {
@@ -476,6 +480,9 @@ export default {
       }
       bindLimitCameraFunc();
       this.funcList[2].active = false;
+      // 叫号显示
+      if (showJH) showJH();
+      if (openJH) openJH();
     },
 
     // 复位
@@ -550,7 +557,7 @@ export default {
                 // },
                 label: {
                   text: item.name,
-                  font: "10pt Source Han Sans CN", //字体样式
+                  font: "15pt Source Han Sans CN", //字体样式
                   fillColor: Cesium.Color.WHITE, //字体颜色
                   backgroundColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
                   showBackground: true, //是否显示背景颜色
@@ -582,7 +589,7 @@ export default {
                 // },
                 label: {
                   text: item.name,
-                  font: "10pt Source Han Sans CN", //字体样式
+                  font: "15pt Source Han Sans CN", //字体样式
                   fillColor: Cesium.Color.WHITE, //字体颜色
                   backgroundColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
                   showBackground: true, //是否显示背景颜色