人房信息地图更换

src/views/modules/visual/basicinfo/cpts/grid-map.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="m-map">
     <div id="map"></div>
+    <div
+      class="btn"
+      v-if="mapStyleType == 'light'"
+      @click="shiftMapStyle('dark')"
+    >
+      切换深色模式
+    </div>
+    <div class="btn" v-else @click="shiftMapStyle('light')">切换浅色模式</div>
   </div>
 </template>
 
@@ -22,10 +30,61 @@ let circleLayer;
 
 export default {
   name: "l7",
+  inject: ["refresh"],
 
   data() {
     return {
+      mapStyleType: localStorage.getItem("mapStyle") || "dark",
       //   srcGridData: {},
+      darkStyle: {
+        style: "amap://styles/blue",
+        polygonColor: [
+          "rgba(255, 100, 60, 0.5)",
+          "rgba(43, 231, 253, 0.35)",
+          "rgba(255, 255, 50, 0.35)",
+        ],
+        lineColor: [
+          "rgba(255, 180, 150, 0.9)",
+          "rgba(43, 231, 253, 0.7)",
+          "rgba(255, 255, 50, 0.7)",
+        ],
+        circleColor: [
+          "rgba(255, 180, 150, 0.99)",
+          "rgba(43, 231, 253, 0.99)",
+          "rgba(255, 255, 50, 0.99)",
+        ],
+        textColor: [
+          "rgba(255, 100, 60, 0.99)",
+          "rgba(43, 231, 253, 0.99)",
+          "rgba(255, 255, 50, 0.99)",
+        ],
+        textStrokeColor: "#fff",
+      },
+
+      lightStyle: {
+        style: "amap://styles/whitesmoke",
+        polygonColor: [
+          "rgba(255, 100, 60, 0.3)",
+          "rgba(43, 231, 253, 0.3)",
+          "rgba(255, 255, 50, 0.3)",
+        ],
+        lineColor: [
+          "rgba(220, 150, 120, 0.9)",
+          "rgba(33, 201, 223, 0.8)",
+          "rgba(200, 200, 50, 0.9)",
+        ],
+        circleColor: [
+          "rgba(255, 180, 150, 0.99)",
+          "rgba(13, 181, 203, 0.8)",
+          "rgba(255, 255, 50, 0.99)",
+        ],
+        textColor: [
+          "rgba(200, 50, 10, 0.99)",
+          "rgba(0, 130, 153, 0.99)",
+          "rgba(120, 120, 0, 0.99)",
+        ],
+        textStrokeColor: "#666",
+      },
     };
   },
 
@@ -104,17 +163,20 @@ export default {
 
   methods: {
     iniMap() {
-      const { srcGridData, polygonData } = this;
+      const { darkStyle, lightStyle, srcGridData, polygonData } = this;
       if (!srcGridData) return false;
 
+      let styleConfig = darkStyle;
+      if (this.mapStyleType == "light") {
+        styleConfig = lightStyle;
+      }
+
       scene = new Scene({
         id: "map",
         logoVisible: false,
         map: new GaodeMap({
           pitch: 60,
-          //   style: "dark",
+          style: styleConfig.style,
-          //   style: "grey",
-          style: "amap://styles/blue",
           center: [
             srcGridData.longitude || this.$store.state.user.longitude,
             srcGridData.latitude || this.$store.state.user.latitude,
@@ -134,11 +196,7 @@ export default {
         })
           //   .size(1000)
           .source(polygonData)
-          .color("name", [
+          .color("name", styleConfig.polygonColor)
-            "rgba(255, 100, 60, 0.5)",
-            "rgba(43, 231, 253, 0.35)",
-            "rgba(255, 255, 50, 0.35)",
-          ])
           //   .shape("extrude")
           .shape("fill")
           .style({
@@ -163,11 +221,7 @@ export default {
           .source(polygonData)
           .shape("line")
           .size(1)
-          .color("name", [
+          .color("name", styleConfig.lineColor)
-            "rgba(255, 50, 50, 0.7)",
-            "rgba(43, 231, 253, 0.7)",
-            "rgba(255, 255, 50, 0.7)",
-          ])
           .style({
             opacity: 1,
           })
@@ -182,11 +236,7 @@ export default {
           zIndex: 3,
         })
           .source(polygonData)
-          .color("name", [
+          .color("name", styleConfig.circleColor)
-            "rgba(255, 50, 50, 0.99)",
-            "rgba(43, 231, 253, 0.99)",
-            "rgba(255, 255, 50, 0.99)",
-          ])
           .shape("circle")
           .active(true)
           .animate(true)
@@ -223,24 +273,21 @@ export default {
         scene.addLayer(posLayer);
 
         textLayer = new PolygonLayer({
-          zIndex: 10,
+          zIndex: 20,
         })
           .source(polygonData)
-          .color("name", [
+          .color("name", styleConfig.textColor)
-            "rgba(255, 100, 60, 0.99)",
-            "rgba(43, 231, 253, 0.99)",
-            "rgba(255, 255, 50, 0.99)",
-          ])
           .shape("name", "text")
           .size(16)
           .style({
             textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
             textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
             spacing: 2, // 字符间距
-            padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+            padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-            stroke: "#ffffff", // 描边颜色
+            stroke: styleConfig.textStrokeColor, // 描边颜色
-            strokeWidth: 0.3, // 描边宽度
+            strokeWidth: 0.1, // 描边宽度
-            strokeOpacity: 1.0,
+            strokeOpacity: 0.8,
+            textAllowOverlap: true,
           })
           .active(true);
         scene.addLayer(textLayer);
@@ -264,6 +311,12 @@ export default {
       });
     },
 
+    shiftMapStyle(type) {
+      this.mapStyleType = type;
+      localStorage.setItem("mapStyle", type);
+      this.refresh();
+    },
+
     updateMap() {
       const { polygonData } = this;
       if (polygonLayer) {
@@ -289,10 +342,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.g-cnt {
-  margin-top: 40px;
-}
-
 .m-map {
   position: relative;
   padding: 20px 0;
@@ -302,5 +351,18 @@ export default {
     width: 100%;
     height: 100%;
   }
+  .btn {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100px;
+    line-height: 36px;
+    height: 36px;
+    text-align: center;
+    color: #ffffff;
+    font-size: 14px;
+    background-color: rgba(#000, 0.2);
+    cursor: pointer;
+  }
 }
 </style>