From d414b5cb8a029f079d40279f70024eca0bf7005e Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Mon, 24 Oct 2022 17:56:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E8=A7=86=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/visual/command/cpts/map.vue | 103 +++++++++---
 src/views/modules/visual/cpts/map/index.vue   | 129 ++++++++++++---
 src/views/modules/visual/cpts/map/index2.vue  | 150 ++++++++++++++----
 3 files changed, 311 insertions(+), 71 deletions(-)

diff --git a/src/views/modules/visual/command/cpts/map.vue b/src/views/modules/visual/command/cpts/map.vue
index 453832394..5b4ddf5d6 100644
--- a/src/views/modules/visual/command/cpts/map.vue
+++ b/src/views/modules/visual/command/cpts/map.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-map">
+  <div class="m-map" :class="{ 'z-td': mapType == 'td' }">
     <div id="map"></div>
     <div
       class="btn"
@@ -52,12 +52,34 @@ let countTextBgLayer;
 let searchMarker;
 let searchBgLayer;
 
+function reversePix(pixelsTemp) {
+  //蓝色
+  for (var i = 0; i < pixelsTemp.length; i += 4) {
+    var r = pixelsTemp[i];
+    var g = pixelsTemp[i + 1];
+    var b = pixelsTemp[i + 2];
+    //运用图像学公式，设置灰度值
+    var grey = r * 0.3 + g * 0.59 + b * 0.11;
+    //将rgb的值替换为灰度值
+    pixelsTemp[i] = grey;
+    pixelsTemp[i + 1] = grey;
+    pixelsTemp[i + 2] = grey;
+
+    //基于灰色，设置为蓝色，这几个数值是我自己试出来的，可以根据需求调整
+    pixelsTemp[i] = 55 - pixelsTemp[i];
+    pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1];
+    pixelsTemp[i + 2] = 305 - pixelsTemp[i + 2];
+  }
+}
+
 export default {
   name: "l7",
   inject: ["refresh"],
 
   data() {
     return {
+      mapType,
+
       mapStyleType: localStorage.getItem("mapStyle") || "dark",
       //   srcGridData: {},
       darkStyle: {
@@ -377,39 +399,48 @@ export default {
 
     // 初始化底图
     iniMapBase(scene) {
+      console.log("-----------------iniMapBase");
       // 底图服务
       const baseLayer = new RasterLayer({
         zIndex: 1,
       });
-      baseLayer.source(
-        "http://t4.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
-        {
-          parser: {
-            type: "rasterTile",
-            tileSize: 256,
-            // minZoom: 6,
-            // maxZoom: 15,
-            zoomOffset: 0,
-          },
-        }
-      );
+      baseLayer
+        .source(
+          "http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
+          {
+            parser: {
+              type: "rasterTile",
+              tileSize: 256,
+              // minZoom: 6,
+              // maxZoom: 15,
+              zoomOffset: 0,
+            },
+          }
+        )
+        .style({
+          opacity: 0.7,
+        });
 
       // 注记服务
       const annotionLayer = new RasterLayer({
         zIndex: 2,
       });
-      annotionLayer.source(
-        "https://t4.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=8a08c117ab9ee45d508686b01cc8d397",
-        {
-          parser: {
-            type: "rasterTile",
-            tileSize: 256,
-            // minZoom: 6,
-            // maxZoom: 15,
-            zoomOffset: 0,
-          },
-        }
-      );
+      annotionLayer
+        .source(
+          "http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
+          {
+            parser: {
+              type: "rasterTile",
+              tileSize: 256,
+              // minZoom: 6,
+              // maxZoom: 15,
+              zoomOffset: 0,
+            },
+          }
+        )
+        .style({
+          opacity: 0.5,
+        });
 
       scene.addLayer(baseLayer);
       scene.addLayer(annotionLayer);
@@ -893,6 +924,26 @@ export default {
   border-radius: 10px;
   overflow: hidden;
 
+  &.z-td {
+    #app {
+      /deep/ .l7-scene {
+        canvas {
+          background-color: rgba(43, 51, 73, 0.82);
+          background-image: radial-gradient(
+            rgba(0, 0, 0, 0),
+            rgba(0, 0, 0, 0.3),
+            #000
+          );
+        }
+        .gray {
+          -webkit-filter: grayscale(100%);
+          filter: grayscale(100%);
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+
   /deep/ .l7-popup-content {
     background: rgba(#020340, 0.58);
     box-shadow: 0 0 20px 3px inset rgba(#22f, 0.1);
@@ -903,7 +954,7 @@ export default {
     color: rgba(#fff, 0.8);
   }
 
-  #app {
+  #map {
     width: 100%;
     height: 100%;
   }
diff --git a/src/views/modules/visual/cpts/map/index.vue b/src/views/modules/visual/cpts/map/index.vue
index f5e804c77..62f383567 100644
--- a/src/views/modules/visual/cpts/map/index.vue
+++ b/src/views/modules/visual/cpts/map/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-map">
+  <div class="m-map" :class="{ 'z-td': mapType == 'td' }">
     <div id="map"></div>
     <div
       class="btn"
@@ -17,10 +17,18 @@ import { requestPost } from "@/js/dai/request";
 import cptCard from "@/views/modules/visual/cpts/card";
 import cptTb from "@/views/modules/visual/cpts/tb";
 import nextTick from "dai-js/tools/nextTick";
-import { Scene, PolygonLayer, LineLayer, PointLayer } from "@antv/l7";
+import {
+  Scene,
+  PolygonLayer,
+  LineLayer,
+  RasterLayer,
+  PointLayer,
+} from "@antv/l7";
 import { GaodeMap, Map } from "@antv/l7-maps";
 import { spliceIntoChunks } from "@/utils/index";
+import { mapType, searchNearby } from "@/utils/dai-map";
 
+let myMap;
 let scene;
 let polygonLayer;
 let lineLayer;
@@ -37,6 +45,8 @@ export default {
 
   data() {
     return {
+      mapType,
+
       mapStyleType: localStorage.getItem("mapStyle") || "dark",
       //   srcGridData: {},
       darkStyle: {
@@ -240,7 +250,6 @@ export default {
       };
     },
 
-    
     dotData2() {
       const { dotList2 } = this;
       return {
@@ -293,29 +302,44 @@ export default {
         styleConfig = lightStyle;
       }
 
-      scene = new Scene({
-        id: "map",
-        logoVisible: false,
-        map: new GaodeMap({
+      const iniCenter = [
+        srcGridData.longitude ||
+          this.$store.state.user.longitude ||
+          116.39743841556731,
+        srcGridData.latitude ||
+          this.$store.state.user.latitude ||
+          39.9088810666821,
+      ];
+
+      if (mapType == "td") {
+        myMap = new Map({
+          center: iniCenter,
+          zoom: 18,
+        });
+      } else {
+        myMap = new GaodeMap({
           pitch: this.pitch,
           style: styleConfig.style,
-          center: [
-            srcGridData.longitude ||
-              this.$store.state.user.longitude ||
-              116.39743841556731,
-            srcGridData.latitude ||
-              this.$store.state.user.latitude ||
-              39.9088810666821,
-          ],
+          center: iniCenter,
           token: "fc14b42e0ca18387866d68ebd4f150c1",
           zoom: 18,
           isHotspot: false,
           resizeEnable: true,
           doubleClickZoom: false,
-        }),
+        });
+      }
+
+      scene = new Scene({
+        id: "map",
+        logoVisible: false,
+        map: myMap,
       });
 
       scene.on("loaded", async () => {
+        if (mapType == "td") {
+          this.iniMapBase(scene);
+        }
+
         this.iniMapGrid(scene);
         this.iniMapDot(scene);
         this.iniMapDot2(scene);
@@ -324,6 +348,55 @@ export default {
       });
     },
 
+    // 初始化底图
+    iniMapBase(scene) {
+      console.log("-----------------iniMapBase");
+      // 底图服务
+      const baseLayer = new RasterLayer({
+        zIndex: 1,
+      });
+      baseLayer
+        .source(
+          "http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
+          {
+            parser: {
+              type: "rasterTile",
+              tileSize: 256,
+              // minZoom: 6,
+              // maxZoom: 15,
+              zoomOffset: 0,
+            },
+          }
+        )
+        .style({
+          opacity: 0.7,
+        });
+
+      // 注记服务
+      const annotionLayer = new RasterLayer({
+        zIndex: 2,
+      });
+      annotionLayer
+        .source(
+          "http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
+          {
+            parser: {
+              type: "rasterTile",
+              tileSize: 256,
+              // minZoom: 6,
+              // maxZoom: 15,
+              zoomOffset: 0,
+            },
+          }
+        )
+        .style({
+          opacity: 0.5,
+        });
+
+      scene.addLayer(baseLayer);
+      scene.addLayer(annotionLayer);
+    },
+
     iniMapGrid(scene) {
       const { darkStyle, lightStyle, polygonData, polygonDotData } = this;
 
@@ -560,7 +633,7 @@ export default {
     },
 
     updateGrid() {
-      const { polygonData,polygonDotData } = this;
+      const { polygonData, polygonDotData } = this;
       if (polygonLayer) {
         polygonLayer.setData(polygonData);
         lineLayer.setData(polygonData);
@@ -597,7 +670,27 @@ export default {
   border-radius: 10px;
   overflow: hidden;
 
-  #app {
+  &.z-td {
+    #app {
+      /deep/ .l7-scene {
+        canvas {
+          background-color: rgba(43, 51, 73, 0.82);
+          background-image: radial-gradient(
+            rgba(0, 0, 0, 0),
+            rgba(0, 0, 0, 0.3),
+            #000
+          );
+        }
+        .gray {
+          -webkit-filter: grayscale(100%);
+          filter: grayscale(100%);
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+
+  #map {
     width: 100%;
     height: 100%;
   }
diff --git a/src/views/modules/visual/cpts/map/index2.vue b/src/views/modules/visual/cpts/map/index2.vue
index 700312806..2115be5fe 100644
--- a/src/views/modules/visual/cpts/map/index2.vue
+++ b/src/views/modules/visual/cpts/map/index2.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-map">
+  <div class="m-map" :class="{ 'z-td': mapType == 'td' }">
     <div id="map"></div>
     <div
       class="btn"
@@ -17,10 +17,19 @@ import { requestPost } from "@/js/dai/request";
 import cptCard from "@/views/modules/visual/cpts/card";
 import cptTb from "@/views/modules/visual/cpts/tb";
 import nextTick from "dai-js/tools/nextTick";
-import { Scene, PolygonLayer, LineLayer, PointLayer, Popup } from "@antv/l7";
+import {
+  Scene,
+  PolygonLayer,
+  LineLayer,
+  PointLayer,
+  RasterLayer,
+  Popup,
+} from "@antv/l7";
 import { GaodeMap, Map } from "@antv/l7-maps";
 import { spliceIntoChunks } from "@/utils/index";
+import { mapType, searchNearby } from "@/utils/dai-map";
 
+let myMap;
 let scene;
 let polygonLayer;
 let lineLayer;
@@ -29,7 +38,7 @@ let posLayer;
 let circleLayer;
 let dotLayer;
 let dotBgLayer;
-let dotLayer2
+let dotLayer2;
 
 export default {
   name: "l7",
@@ -37,6 +46,8 @@ export default {
 
   data() {
     return {
+      mapType,
+
       mapStyleType: localStorage.getItem("mapStyle") || "dark",
       //   srcGridData: {},
       darkStyle: {
@@ -98,7 +109,7 @@ export default {
     },
     isArea: {
       type: Boolean,
-      default: false
+      default: false,
     },
     srcGridData: {
       type: Object | Array,
@@ -126,8 +137,8 @@ export default {
     },
     iconSize: {
       type: Number,
-      default: 20
-    }
+      default: 20,
+    },
   },
 
   computed: {},
@@ -152,9 +163,7 @@ export default {
     polygonData() {
       const { srcGridData, isArea } = this;
       if (isArea) {
-        if (
-          !srcGridData || !Array.isArray(srcGridData)
-        ) {
+        if (!srcGridData || !Array.isArray(srcGridData)) {
           return { type: "FeatureCollection", features: [] };
         }
       } else {
@@ -166,8 +175,8 @@ export default {
           return { type: "FeatureCollection", features: [] };
         }
       }
-      const _Plo = isArea ? srcGridData : srcGridData.children
-      console.log('_Plo-----', _Plo)
+      const _Plo = isArea ? srcGridData : srcGridData.children;
+      console.log("_Plo-----", _Plo);
       const polygon = [
         ..._Plo
           .filter((item) => item.coordinates && item.coordinates.length > 0)
@@ -257,7 +266,6 @@ export default {
       };
     },
 
-    
     dotData2() {
       const { dotList2 } = this;
       return {
@@ -313,29 +321,44 @@ export default {
         styleConfig = lightStyle;
       }
 
-      scene = new Scene({
-        id: "map",
-        logoVisible: false,
-        map: new GaodeMap({
+      const iniCenter = [
+        srcGridData.longitude ||
+          this.$store.state.user.longitude ||
+          116.39743841556731,
+        srcGridData.latitude ||
+          this.$store.state.user.latitude ||
+          39.9088810666821,
+      ];
+
+      if (mapType == "td") {
+        myMap = new Map({
+          center: iniCenter,
+          zoom: 18,
+        });
+      } else {
+        myMap = new GaodeMap({
           pitch: this.pitch,
           style: styleConfig.style,
-          center: [
-            srcGridData.longitude ||
-              this.$store.state.user.longitude ||
-              116.39743841556731,
-            srcGridData.latitude ||
-              this.$store.state.user.latitude ||
-              39.9088810666821,
-          ],
+          center: iniCenter,
           token: "fc14b42e0ca18387866d68ebd4f150c1",
           zoom: 18,
           isHotspot: false,
           resizeEnable: true,
           doubleClickZoom: false,
-        }),
+        });
+      }
+
+      scene = new Scene({
+        id: "map",
+        logoVisible: false,
+        map: myMap,
       });
 
       scene.on("loaded", async () => {
+        if (mapType == "td") {
+          this.iniMapBase(scene);
+        }
+
         this.iniMapGrid(scene);
         this.iniMapDot(scene);
         this.iniMapDot2(scene);
@@ -344,6 +367,55 @@ export default {
       });
     },
 
+    // 初始化底图
+    iniMapBase(scene) {
+      console.log("-----------------iniMapBase");
+      // 底图服务
+      const baseLayer = new RasterLayer({
+        zIndex: 1,
+      });
+      baseLayer
+        .source(
+          "http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
+          {
+            parser: {
+              type: "rasterTile",
+              tileSize: 256,
+              // minZoom: 6,
+              // maxZoom: 15,
+              zoomOffset: 0,
+            },
+          }
+        )
+        .style({
+          opacity: 0.7,
+        });
+
+      // 注记服务
+      const annotionLayer = new RasterLayer({
+        zIndex: 2,
+      });
+      annotionLayer
+        .source(
+          "http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
+          {
+            parser: {
+              type: "rasterTile",
+              tileSize: 256,
+              // minZoom: 6,
+              // maxZoom: 15,
+              zoomOffset: 0,
+            },
+          }
+        )
+        .style({
+          opacity: 0.5,
+        });
+
+      scene.addLayer(baseLayer);
+      scene.addLayer(annotionLayer);
+    },
+
     iniMapGrid(scene) {
       const { darkStyle, lightStyle, polygonData, polygonDotData } = this;
 
@@ -411,7 +483,10 @@ export default {
           });
         scene.addLayer(circleLayer);
 
-        scene.addImage("pos-red", require("@/assets/img/shuju/grid/pos-red.png"));
+        scene.addImage(
+          "pos-red",
+          require("@/assets/img/shuju/grid/pos-red.png")
+        );
         scene.addImage(
           "pos-green",
           require("@/assets/img/shuju/grid/pos-green.png")
@@ -630,10 +705,31 @@ export default {
   border-radius: 10px;
   overflow: hidden;
 
-  #app {
+  #map {
     width: 100%;
     height: 100%;
   }
+
+  &.z-td {
+    #app {
+      /deep/ .l7-scene {
+        canvas {
+          background-color: rgba(43, 51, 73, 0.82);
+          background-image: radial-gradient(
+            rgba(0, 0, 0, 0),
+            rgba(0, 0, 0, 0.3),
+            #000
+          );
+        }
+        .gray {
+          -webkit-filter: grayscale(100%);
+          filter: grayscale(100%);
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+
   .btn {
     position: absolute;
     bottom: 0;