Merge branch 'dev-天地图' of http://git.elinkit.com.cn:7070/r/epmet-oper-gov into dev-天地图

src/views/modules/visual/command/cpts/map.vue

@@ -1,14 +1,22 @@
 <template>
-  <div class="m-map">
+  <div class="m-map" :class="{ 'z-td': mapType == 'td' }">
     <div id="map"></div>
     <div
       class="btn"
       v-if="mapStyleType == 'light'"
+      v-show="mapType != 'td'"
       @click="shiftMapStyle('dark')"
     >
       切换深色模式
     </div>
-    <div class="btn" v-else @click="shiftMapStyle('light')">切换浅色模式</div>
+    <div
+      class="btn"
+      v-show="mapType != 'td'"
+      v-else
+      @click="shiftMapStyle('light')"
+    >
+      切换浅色模式
+    </div>
 
     <cpt-popup
       ref="popup"
@@ -52,12 +60,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,12 +407,14 @@ export default {
 
     // 初始化底图
     iniMapBase(scene) {
+      console.log("-----------------iniMapBase");
       // 底图服务
       const baseLayer = new RasterLayer({
         zIndex: 1,
       });
-      baseLayer.source(
+      baseLayer
-        "http://t4.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
+        .source(
+          "http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
           {
             parser: {
               type: "rasterTile",
@@ -392,14 +424,18 @@ export default {
               zoomOffset: 0,
             },
           }
-      );
+        )
+        .style({
+          opacity: 0.7,
+        });
 
       // 注记服务
       const annotionLayer = new RasterLayer({
         zIndex: 2,
       });
-      annotionLayer.source(
+      annotionLayer
-        "https://t4.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=8a08c117ab9ee45d508686b01cc8d397",
+        .source(
+          "http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
           {
             parser: {
               type: "rasterTile",
@@ -409,7 +445,10 @@ export default {
               zoomOffset: 0,
             },
           }
-      );
+        )
+        .style({
+          opacity: 0.5,
+        });
 
       scene.addLayer(baseLayer);
       scene.addLayer(annotionLayer);
@@ -893,6 +932,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 +962,7 @@ export default {
     color: rgba(#fff, 0.8);
   }
 
-  #app {
+  #map {
     width: 100%;
     height: 100%;
   }

src/views/modules/visual/cpts/map/index.vue

@@ -1,14 +1,22 @@
 <template>
-  <div class="m-map">
+  <div class="m-map" :class="{ 'z-td': mapType == 'td' }">
     <div id="map"></div>
     <div
       class="btn"
       v-if="mapStyleType == 'light'"
+      v-show="mapType != 'td'"
       @click="shiftMapStyle('dark')"
     >
       切换深色模式
     </div>
-    <div class="btn" v-else @click="shiftMapStyle('light')">切换浅色模式</div>
+    <div
+      class="btn"
+      v-show="mapType != 'td'"
+      v-else
+      @click="shiftMapStyle('light')"
+    >
+      切换浅色模式
+    </div>
   </div>
 </template>
 
@@ -17,10 +25,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 +53,8 @@ export default {
 
   data() {
     return {
+      mapType,
+
       mapStyleType: localStorage.getItem("mapStyle") || "dark",
       //   srcGridData: {},
       darkStyle: {
@@ -240,7 +258,6 @@ export default {
       };
     },
 
-    
     dotData2() {
       const { dotList2 } = this;
       return {
@@ -293,29 +310,44 @@ export default {
         styleConfig = lightStyle;
       }
 
-      scene = new Scene({
+      const iniCenter = [
-        id: "map",
-        logoVisible: false,
-        map: 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,
-          ],
+      ];
+
+      if (mapType == "td") {
+        myMap = new Map({
+          center: iniCenter,
+          zoom: 18,
+        });
+      } else {
+        myMap = new GaodeMap({
+          pitch: this.pitch,
+          style: styleConfig.style,
+          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 +356,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;
 
@@ -597,7 +678,27 @@ 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;
+        }
+      }
+    }
+  }
+
+  #map {
     width: 100%;
     height: 100%;
   }

src/views/modules/visual/cpts/map/index2.vue

@@ -1,14 +1,22 @@
 <template>
-  <div class="m-map">
+  <div class="m-map" :class="{ 'z-td': mapType == 'td' }">
     <div id="map"></div>
     <div
       class="btn"
       v-if="mapStyleType == 'light'"
       @click="shiftMapStyle('dark')"
+      v-show="mapType != 'td'"
     >
       切换深色模式
     </div>
-    <div class="btn" v-else @click="shiftMapStyle('light')">切换浅色模式</div>
+    <div
+      class="btn"
+      v-show="mapType != 'td'"
+      v-else
+      @click="shiftMapStyle('light')"
+    >
+      切换浅色模式
+    </div>
   </div>
 </template>
 
@@ -17,10 +25,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 +46,7 @@ let posLayer;
 let circleLayer;
 let dotLayer;
 let dotBgLayer;
-let dotLayer2
+let dotLayer2;
 
 export default {
   name: "l7",
@@ -37,6 +54,8 @@ export default {
 
   data() {
     return {
+      mapType,
+
       mapStyleType: localStorage.getItem("mapStyle") || "dark",
       //   srcGridData: {},
       darkStyle: {
@@ -98,7 +117,7 @@ export default {
     },
     isArea: {
       type: Boolean,
-      default: false
+      default: false,
     },
     srcGridData: {
       type: Object | Array,
@@ -126,8 +145,8 @@ export default {
     },
     iconSize: {
       type: Number,
-      default: 20
+      default: 20,
-    }
+    },
   },
 
   computed: {},
@@ -152,9 +171,7 @@ export default {
     polygonData() {
       const { srcGridData, isArea } = this;
       if (isArea) {
-        if (
+        if (!srcGridData || !Array.isArray(srcGridData)) {
-          !srcGridData || !Array.isArray(srcGridData)
-        ) {
           return { type: "FeatureCollection", features: [] };
         }
       } else {
@@ -166,8 +183,8 @@ export default {
           return { type: "FeatureCollection", features: [] };
         }
       }
-      const _Plo = isArea ? srcGridData : srcGridData.children
+      const _Plo = isArea ? srcGridData : srcGridData.children;
-      console.log('_Plo-----', _Plo)
+      console.log("_Plo-----", _Plo);
       const polygon = [
         ..._Plo
           .filter((item) => item.coordinates && item.coordinates.length > 0)
@@ -257,7 +274,6 @@ export default {
       };
     },
 
-    
     dotData2() {
       const { dotList2 } = this;
       return {
@@ -313,29 +329,44 @@ export default {
         styleConfig = lightStyle;
       }
 
-      scene = new Scene({
+      const iniCenter = [
-        id: "map",
-        logoVisible: false,
-        map: 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,
-          ],
+      ];
+
+      if (mapType == "td") {
+        myMap = new Map({
+          center: iniCenter,
+          zoom: 18,
+        });
+      } else {
+        myMap = new GaodeMap({
+          pitch: this.pitch,
+          style: styleConfig.style,
+          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 +375,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 +491,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 +713,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;