Bladeren bron

fix:地图样式修改

chenzhen2 2 jaren geleden
bovenliggende
commit
919513f55d

+ 89 - 81
src/views/envmonitor/components/Map/CanvasBox.vue

@@ -1,6 +1,5 @@
 <template>
-  <canvas id="myCanvas" class="canvas-dom" style="boder: 1px solid red">
-  </canvas>
+  <canvas id="myCanvas" class="canvas-dom"> </canvas>
 </template>
         
   <script lang="ts">
@@ -10,6 +9,7 @@ import { getMapInfo } from "@/apis/envmonitor";
 import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
 import { parseImgUrl } from "@/utils";
 import { swiper } from "@/utils/swiper";
+import { getSpaceType, mapIcon } from "@/utils/mapIcon";
 
 export default defineComponent({
   components: {
@@ -26,7 +26,7 @@ export default defineComponent({
       spaceName: "",
       width: 3361.136,
       height: 2729.25,
-      scale: 1,
+      scale: 0.6,
       ctx: ctx,
       centerObj: centerObj,
       // 搜索某个空间
@@ -77,10 +77,30 @@ export default defineComponent({
           swipeRight: function (e: any) {},
         });
       },
+      /**
+       * 设置空间的图标
+       *
+       */
+      setSpaceIcon(item: any) {
+        // if(item.can)
+        if (item.canClick) {
+          // debugger
+          let typeName: any = getSpaceType(item.roomFuncType);
+          item.icon = mapIcon[typeName].icon;
+          item.selectIcon = mapIcon[typeName].selectIcon;
+          item.backgroundColor = mapIcon[typeName].backgroundColor;
+          item.bg = mapIcon[typeName].bg;
+          item.icon = parseImgUrl("map-new-icon", item.icon);
+          item.selectIcon = parseImgUrl("map-new-icon", item.selectIcon);
+        } else {
+          item.icon = "";
+        }
+      },
       // canvas画图
       initCanvas() {
         let canvasDom: any = document.querySelector("#myCanvas");
         let ctx: any = canvasDom.getContext("2d");
+        // debugger;
         proxyData.drawDpiBegin(
           canvasDom,
           ctx,
@@ -88,25 +108,14 @@ export default defineComponent({
           proxyData.height
         );
         proxyData.ctx = ctx;
-        ctx.clearRect(0, 0, proxyData.width, proxyData.height);
-        ctx.scale(
-          proxyData.scale,
-          proxyData.scale,
-          centerObj.left,
-          centerObj.top
-        );
-
         proxyData.spaceList.map((item: any) => {
-            // debugger
           if (item.canClick) {
             let circleArr: any = item.circlePoint;
             ctx.beginPath();
             ctx.fillStyle = item.fillColor;
             let pointLeftArr: any = [];
             let pointTopArr: any = [];
-
             item.pointArr.map((childItem: any, index: any) => {
-            //   debugger
               childItem.left = childItem.left;
               childItem.top = childItem.top;
               if (index == 0) {
@@ -117,19 +126,13 @@ export default defineComponent({
               pointLeftArr.push(childItem.left);
               pointTopArr.push(childItem.top);
             });
-            // debugger;
-            console.log(item.devicePoint);
-            proxyData.drawIcon(ctx, "coffee.svg", item.devicePoint[0]);
-            // proxyData.drawIcon(ctx, "dev.svg", item.devicePoint[1]);
-            // proxyData.drawIcon(ctx, "deviceroom.svg", item.devicePoint[2]);
-            ctx.closePath();
+            // proxyData.drawIcon(ctx, "coffee.svg", item.devicePoint[0]);
+
             ctx.fill();
-            ctx.lineWidth = 1;
-            ctx.strokeStyle = "rgba(15, 206, 233, 1)";
-            ctx.stroke();
+            ctx.closePath();
             ctx.beginPath();
             if (circleArr && circleArr.length) {
-              console.log(circleArr);
+              ctx.fillStyle = item.fillColor;
               ctx.lineTo(circleArr[3].left, circleArr[3].top);
               ctx.bezierCurveTo(
                 circleArr[2].left,
@@ -142,10 +145,6 @@ export default defineComponent({
             }
             ctx.closePath();
             ctx.fill();
-            ctx.lineWidth = 1;
-            ctx.strokeStyle = "rgba(15, 206, 233, 1)";
-            ctx.stroke();
-
             let min1: any =
               proxyData.MaxAndMin(pointLeftArr)[1] -
               proxyData.MaxAndMin(pointLeftArr)[0];
@@ -156,23 +155,29 @@ export default defineComponent({
             ctx.beginPath();
             ctx.font = "13px serif";
             ctx.textAlign = "center";
-            ctx.fillStyle = item.fillColor !== "#ececec" ? "#ffffff" : "red";
-            console.log("min===" + min);
+            ctx.fillStyle = item.fillColor === "#fff" ? "#000" : "#8995BA";
             if (item.localName && min > 100) {
               ctx.fillText(
                 item.localName,
-                item.logPointArr[0].left,
-                item.logPointArr[0].top,
+                item.logoPointArr[0].left,
+                item.logoPointArr[0].top,
                 item.width
               );
             }
-            ctx.closePath();
-            if (item.shadow) {
-              item.shadowColor = "#000000";
-              ctx.shadowOffsetX = -50; //阴影x轴位移。正值向右,负值向左。
-              ctx.shadowOffsetY = -50; //阴影y轴位移。正值向下,负值向上。
-              ctx.shadowBlur = 10; //阴影模糊滤镜。数据越大,扩散程度越大。
+            let localName: any = item.localName;
+            let drutionLef: any = localName ? item.localName["length"] * 13 : 0;
+            if (item.icon) {
+              proxyData.drawIcon(ctx, item.icon, {
+                left: item.logoPointArr[0].left - drutionLef / 2+15,
+                top: item.logoPointArr[0].top - 35,
+              });
             }
+
+            item.shadowColor = "#000000";
+            ctx.shadowOffsetX = -50; //阴影x轴位移。正值向右,负值向左。
+            ctx.shadowOffsetY = -50; //阴影y轴位移。正值向下,负值向上。
+            ctx.shadowBlur = 10; //阴影模糊滤镜。数据越大,扩散程度越大。
+            ctx.closePath();
           } else {
             let img: any = new Image();
             img.src = require("@/assets/svg/bg_disable.png");
@@ -185,14 +190,12 @@ export default defineComponent({
                   ctx.lineTo(item.left, item.top);
                 }
               });
-              //   ctx.fillStyle = "#cfefef";
-              //   ctx.fill();
               let pat: any = ctx.createPattern(img, "repeat");
               ctx.fillStyle = pat;
               ctx.fill();
               ctx.closePath();
-              ctx.strokeStyle = "rgba(15, 206, 233, 1)";
-              ctx.stroke();
+              // ctx.strokeStyle = "rgba(15, 206, 233, 1)";
+              // ctx.stroke();
             };
           }
         });
@@ -212,12 +215,19 @@ export default defineComponent({
       drawDpiBegin(dom: any, context: any, width: any, height: any) {
         context.save();
         let scaleValue = window.devicePixelRatio;
-        dom.setAttribute("width", width * scaleValue);
-        dom.setAttribute("height", height * scaleValue);
+        console.log("ddd", width * scaleValue * proxyData.scale);
+        dom.setAttribute("width", width * scaleValue * proxyData.scale);
+        dom.setAttribute("height", height * scaleValue * proxyData.scale);
 
-        dom.style.width = width + "px";
-        dom.style.height = height + "px";
+        dom.style.width = width * proxyData.scale + "px";
+        dom.style.height = height * proxyData.scale + "px";
         context.scale(scaleValue, scaleValue);
+        context.clearRect(
+          0,
+          0,
+          width * proxyData.scale,
+          height * proxyData.scale
+        );
       },
       // 画图介绍
       drawDpiEnd(dom: any, context: any) {
@@ -228,10 +238,6 @@ export default defineComponent({
         let canvasDom: any = document.querySelector("#myCanvas");
         let x: any = event.clientX - canvasDom.getBoundingClientRect().left;
         let y: any = event.clientY - canvasDom.getBoundingClientRect().top;
-        //   let ctx: any = canvasDom.getContext("2d");
-        // proxyData.initCanvas();
-        console.log(event);
-        // alert("点击了!");
         for (let i = 0; i < proxyData.spaceList.length; i++) {
           let item: any = proxyData.spaceList[i];
           let devicePoint: any = item.devicePoint;
@@ -323,7 +329,7 @@ export default defineComponent({
       drawIcon(ctx: any, url: any, iconPerstion: any) {
         if (iconPerstion) {
           let img: any = new Image();
-          img.src = require(`@/assets/svg/${url}`);
+          img.src = url;
           img.onload = function () {
             ctx.drawImage(img, iconPerstion.left, iconPerstion.top, 25, 15);
             iconPerstion.width = 30;
@@ -347,9 +353,31 @@ export default defineComponent({
       // 数据格式化
       formSpaceData() {
         proxyData.spaceList = JSON.parse(proxyData.copySpaceArr);
-
         proxyData.spaceList.map((item: any) => {
-          item.fillColor = "#ececec";
+          if (item.canClick) {
+            item.fillColor = "#fff";
+          }
+          item.devicePoint.map((dev: any) => {
+            dev.left = dev.left * proxyData.scale;
+            dev.top = dev.top * proxyData.scale;
+          });
+          item.logoPointArr.map((dev: any) => {
+            dev.left = dev.left * proxyData.scale;
+            dev.top = dev.top * proxyData.scale;
+          });
+          item.pointArr.map((dev: any) => {
+            dev.left = dev.left * proxyData.scale;
+            dev.top = dev.top * proxyData.scale;
+          });
+          item.circlePoint.map((dev: any) => {
+            dev.left = dev.left * proxyData.scale;
+            dev.top = dev.top * proxyData.scale;
+          });
+          item.detailPoint.map((dev: any) => {
+            dev.left = dev.left * proxyData.scale;
+            dev.top = dev.top * proxyData.scale;
+          });
+          proxyData.setSpaceIcon(item);
         });
       },
       // 格式化地图数据
@@ -358,6 +386,7 @@ export default defineComponent({
           {
             spaceId: "1",
             localName: "H301",
+            roomFuncType: "300",
             canClick: true,
             pointArr: [
               {
@@ -409,36 +438,15 @@ export default defineComponent({
         proxyData.copySpaceArr = JSON.stringify(spaceList);
         proxyData.formSpaceData();
       },
-
-      /**
-       * 获取地图信息
-       */
-      getMapInfo() {
-        let params: any = {
-          projectId: "Pj1101080259",
-          floorId: "Fl11010802593241ec348ecb4148806b9034c8957454",
-        };
-        getMapInfo(params)
-          .then((res) => {
-            // debugger
-            let resData: any = res;
-            let data: any = resData?.data ?? null;
-            proxyData.width = data.width;
-            proxyData.height = data.height;
-            proxyData.spaceList = data.spaceList;
-            proxyData.setSpaceColor();
-            proxyData.initCanvas();
-          })
-          .catch(() => {});
-      },
-    });
-    nextTick(() => {
-      proxyData.bindEvent();
     });
     onMounted(() => {
-      // proxyData.getMapInfo();
-      proxyData.formatePage();
-      proxyData.initCanvas();
+      setTimeout(() => {
+        proxyData.formatePage();
+        nextTick(() => {
+          proxyData.initCanvas();
+          proxyData.bindEvent();
+        });
+      }, 500);
     });
     return {
       ...toRefs(proxyData),

+ 0 - 0
src/views/envmonitor/components/Map/ComBox.vue


File diff suppressed because it is too large
+ 1375 - 0
src/views/envmonitor/components/Map/MapBox copy.vue


+ 20 - 12
src/views/envmonitor/components/Map/MapBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="map" style="width: 100%; height: 100%">
-    <div class="space-main" id="spaceMain">
+    <div class="space-main" id="spaceMain" v-if="mapType == 1">
       <div
         class="space-box"
         v-for="(area, index) in mapData.spaceList"
@@ -58,7 +58,7 @@
         </div>
       </div>
     </div>
-
+    <canvas-box v-else class="canvasBox"></canvas-box>
     <!--地图右侧的操作按钮-->
     <div class="map-toolbar">
       <img
@@ -73,9 +73,6 @@
       <div class="toolbar-item" @click.stop="checkBuilding">
         <span class="text-hidden">{{ buildingItem.localName }}</span>
       </div>
-      <!--      <div class="toolbar-item">-->
-      <!--        <img src="../../assets/images/map-icon/icon-floor-arrow.svg" alt="">-->
-      <!--      </div>-->
     </div>
     <!-- 选择建筑  -->
     <van-popup
@@ -525,7 +522,9 @@ export default defineComponent({
         }
         proxyData.isSetSearchSpace = false;
         if (area && area.canClick) {
-          proxyData.setSelectSpacePosition(area);
+          if (props.mapType == 1) {
+            proxyData.setSelectSpacePosition(area);
+          }
           proxyData.selectArea = area;
           proxyData.selectArea.buildingId = proxyData.buildingItem.buildingId;
           proxyData.setLocalSpaceInfo();
@@ -1042,12 +1041,14 @@ export default defineComponent({
               }
               proxyData.setSelectSpacePosition(proxyData.selectArea);
               // 接口返回后设置地图缩放和滚动
-              nextTick(() => {
-                // 地图双指缩放
-                proxyData.setMapBoxStyle();
-                proxyData.mapScale();
-                proxyData.mapScroll();
-              });
+              if (props.mapType === 1) {
+                nextTick(() => {
+                  // 地图双指缩放
+                  proxyData.setMapBoxStyle();
+                  proxyData.mapScale();
+                  proxyData.mapScroll();
+                });
+              }
             }
             // setTimeout(() => {
             //   proxyData.loadinngEnd()
@@ -1212,6 +1213,13 @@ export default defineComponent({
   padding: 0 5px;
   overflow: hidden;
 
+  .canvasBox {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+  }
+
   .space-box {
     position: absolute;
     padding: 5px;