From 5a39da04cdd86de85324edeb26074a6af32112a6 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期四, 06 六月 2024 19:36:13 +0800
Subject: [PATCH] chinaProvider

---
 src/pages/characterMap/characterMap.vue |  123 ++++++++++++++++++++++------------------
 1 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/src/pages/characterMap/characterMap.vue b/src/pages/characterMap/characterMap.vue
index 5abd983..5532d72 100644
--- a/src/pages/characterMap/characterMap.vue
+++ b/src/pages/characterMap/characterMap.vue
@@ -1,8 +1,10 @@
 <template>
-  <view style="width: 100%;height: 100%;display: flex;flex-direction: column;">
+  <view
+    style="width: 100%; height: 100%; display: flex; flex-direction: column"
+  >
     <headNav :idIndex="1 + ''" text="涓尰浜虹墿鏁版嵁搴�" />
     <el-button class="getBack" @click="goBack">杩斿洖</el-button>
-    <view style="flex: 1;overflow: hidden;">
+    <view style="flex: 1; overflow: hidden">
       <!-- 鍦板浘 -->
       <!-- <view id="spaceTime" style="height: 90vh;width: 100%;position: relative;"></view> -->
       <div id="map"></div>
@@ -25,9 +27,13 @@
         >
           <li>鍑虹敓浜巤{ basicInfo.nativePlace || "-" }}</li>
           <li>
-            <span v-if="basicInfo.birthYear">{{basicInfo.birthYear}}</span>
-            <span v-if="basicInfo.nativePlace">{{basicInfo.nativePlace}}</span>
-            <span v-if="basicInfo.nowPlace">锛堜粖{{basicInfo.nowPlace}}锛�</span>
+            <span v-if="basicInfo.birthYear">{{ basicInfo.birthYear }}</span>
+            <span v-if="basicInfo.nativePlace">{{
+              basicInfo.nativePlace
+            }}</span>
+            <span v-if="basicInfo.nowPlace"
+              >锛堜粖{{ basicInfo.nowPlace }}锛�</span
+            >
           </li>
         </ul>
         <ul
@@ -97,7 +103,7 @@
         deathYear: "",
         nativePlace: "",
         nowPlace: "",
-      }
+      },
     };
   },
 
@@ -118,7 +124,7 @@
     initMap(info) {
       var map = L.map("map", {
         attributionControl: false,
-        preferCanvas: true
+        preferCanvas: true,
       }).setView([35.91667, 110.41667], 5);
 
       // L.tileLayer(
@@ -129,26 +135,33 @@
         .chinaProvider("TianDiTu.Normal.Map", {
           key: "76bc34ead7e30e663a4eded8aeaf5860",
           maxZoom: 18,
-          minZoom: 5
+          minZoom: 5,
+        })
+        .addTo(map);
+      L.tileLayer
+        .chinaProvider("TianDiTu.Normal.Annotion", {
+          key: "76bc34ead7e30e663a4eded8aeaf5860",
+          maxZoom: 18,
+          minZoom: 3,
         })
         .addTo(map);
       let DefaultIcon1 = L.icon({
         iconUrl: this.icoName,
         iconSize: [24, 41], //  鍥炬爣鐨勫ぇ灏�    銆愬��1锛屽��2銆� 涓哄叿浣撲綘鑷畾涔夊浘鏍囩殑灏哄锛屾瘮濡傛垜鍥炬爣灏哄鏄�32脳52锛岃〃绀鸿鍥炬爣锛氬搴�32鍍忕礌锛岄珮搴︼細52鍍忕礌锛岄偅涔堝��1:灏辨槸32锛屽��2锛氬氨鏄�52
         iconAnchor: [24, 41], //  鍥炬爣灏嗗搴旀爣璁扮偣鐨勪綅缃� 杩欎釜鏄噸鐐癸紝 銆愬��1锛屽��2銆戯紝鍊�1锛氫负鍥炬爣鍧愭爣绗竴涓��(鍗�32)鐨勪竴鍗婏紝鍊�2锛氫负鍥炬爣鍧愭爣绗簩涓��(鍗�52)
-        popupAnchor: [1, -24] // 璇ョ偣鏄浉瀵逛簬iconAnchor寮瑰嚭淇℃伅鐨勪綅缃�  杩欎釜鏄垜鎵嬪姩璋冨嚭鏉ョ殑锛屾枃妗i粯璁ゅ師濮嬪�兼槸[-1锛�-76]锛屾垜鏄幓涓�鍗婂�硷紝鍙栦竴鍗婂�艰皟鍑烘潵鐨�
+        popupAnchor: [1, -24], // 璇ョ偣鏄浉瀵逛簬iconAnchor寮瑰嚭淇℃伅鐨勪綅缃�  杩欎釜鏄垜鎵嬪姩璋冨嚭鏉ョ殑锛屾枃妗i粯璁ゅ師濮嬪�兼槸[-1锛�-76]锛屾垜鏄幓涓�鍗婂�硷紝鍙栦竴鍗婂�艰皟鍑烘潵鐨�
       });
       let icon = L.divIcon({
         html: "<div class='map-circle-name ripple'></div>",
         iconSize: [80, 80],
-        className: "map-circle"
+        className: "map-circle",
       });
       this.map = map;
       if (info && info.length) {
         for (let i = 0; i < info.length; i++) {
           const item = info[i];
           const marker1 = L.marker([item.ycoord, item.xcoord], {
-            icon: icon
+            icon: icon,
           }).addTo(map);
           marker1.on("click", (e) => {
             this.menuNav = true;
@@ -180,7 +193,7 @@
     getPersonInfoFun() {
       getPersonInfo({
         id: this.$route.query.id,
-        type: "PERSON_SPACE_TIME"
+        type: "PERSON_SPACE_TIME",
       }).then((res) => {
         this.initMap(res.object.personSpaceTimeList);
       });
@@ -189,7 +202,7 @@
     getBasicInfo() {
       getPersonInfo({
         id: this.$route.query.id,
-        type: "PERSON_BASIC"
+        type: "PERSON_BASIC",
       }).then((res) => {
         this.basicInfo.name = res.object.personFieldList.find(
           (f) => f.fieldName == "WEAK_NAME"
@@ -250,40 +263,40 @@
       const data = [
         {
           name: "娴烽棬",
-          value: 9
+          value: 9,
         },
         {
           name: "閲戞槍",
-          value: 19
+          value: 19,
         },
         {
           name: "娉夊窞",
-          value: 21
+          value: 21,
         },
         {
           name: "琛㈠窞",
-          value: 177
+          value: 177,
         },
         {
           name: "寤婂潑",
-          value: 193
+          value: 193,
         },
         {
           name: "鑿忔辰",
-          value: 194
+          value: 194,
         },
         {
           name: "鍚堣偉",
-          value: 229
+          value: 229,
         },
         {
           name: "姝︽眽",
-          value: 273
+          value: 273,
         },
         {
           name: "鍟婁笁澶х熆鍙婅鍒板簳鏄皝寤哄+澶уか澶у笀鍌呭氨",
-          value: 279
-        }
+          value: 279,
+        },
       ];
       const geoCoordMap = {
         娴烽棬: [121.15, 31.89],
@@ -313,7 +326,7 @@
         鑿忔辰: [115.480656, 35.23375],
         鍚堣偉: [117.27, 31.86],
         姝︽眽: ["浣犲ソ", 30.52],
-        鍟婁笁澶х熆鍙婅鍒板簳鏄皝寤哄+澶уか澶у笀鍌呭氨: [125.03, 46.58]
+        鍟婁笁澶х熆鍙婅鍒板簳鏄皝寤哄+澶уか澶у笀鍌呭氨: [125.03, 46.58],
       };
       const convertData = function (data) {
         var res = [];
@@ -322,7 +335,7 @@
           if (geoCoord) {
             res.push({
               name: data[i].name,
-              value: geoCoord.concat(data[i].value)
+              value: geoCoord.concat(data[i].value),
             });
           }
         }
@@ -330,7 +343,7 @@
       };
       option = {
         tooltip: {
-          trigger: "item"
+          trigger: "item",
         },
         bmap: {
           center: [104.114129, 37.550339], // 璋冩暣鍦板浘涓績鐐逛綅缃�
@@ -342,60 +355,60 @@
                 featureType: "water",
                 elementType: "all",
                 stylers: {
-                  color: "#d1d1d1"
-                }
+                  color: "#d1d1d1",
+                },
               },
               {
                 featureType: "land",
                 elementType: "all",
                 stylers: {
-                  color: "#f3f3f3"
-                }
+                  color: "#f3f3f3",
+                },
               },
               {
                 featureType: "manmade",
                 elementType: "all",
                 stylers: {
-                  color: "#d1d1d1"
-                }
+                  color: "#d1d1d1",
+                },
               },
               {
                 featureType: "local",
                 elementType: "all",
                 stylers: {
-                  color: "#d1d1d1"
-                }
+                  color: "#d1d1d1",
+                },
               },
               {
                 featureType: "arterial",
                 elementType: "labels",
                 stylers: {
-                  visibility: "off"
-                }
+                  visibility: "off",
+                },
               },
               {
                 featureType: "boundary",
                 elementType: "all",
                 stylers: {
-                  color: "#fefefe"
-                }
+                  color: "#fefefe",
+                },
               },
               {
                 featureType: "building",
                 elementType: "all",
                 stylers: {
-                  color: "#d1d1d1"
-                }
+                  color: "#d1d1d1",
+                },
               },
               {
                 featureType: "label",
                 elementType: "labels.text.fill",
                 stylers: {
-                  color: "#999999"
-                }
-              }
-            ]
-          }
+                  color: "#999999",
+                },
+              },
+            ],
+          },
         },
         series: [
           {
@@ -412,11 +425,11 @@
               return val[2] / 10;
             },
             encode: {
-              value: 2
+              value: 2,
             },
             showEffectOn: "render",
             rippleEffect: {
-              brushType: "stroke"
+              brushType: "stroke",
             },
             label: {
               formatter: "{b}",
@@ -434,18 +447,18 @@
               },
               show: true,
               fontSize: 12,
-              borderRadius: 30
+              borderRadius: 30,
             },
             itemStyle: {
               shadowBlur: 10,
-              shadowColor: "#333"
+              shadowColor: "#333",
             },
             emphasis: {
-              scale: true
+              scale: true,
             },
-            zlevel: 1
-          }
-        ]
+            zlevel: 1,
+          },
+        ],
       };
       let menuNav1 = this.menuNav;
       let menuNav2 = this.menuNav;
@@ -468,8 +481,8 @@
       // 淇敼 Vue 缁勪欢鐨勬暟鎹紝渚嬪鏄剧ず鑿滃崟瀵艰埅
       this.menuNav = !this.menuNav;
       // 鏃剁┖鍦板浘鐨勬暟鎹�
-    }
-  }
+    },
+  },
 };
 </script>
 

--
Gitblit v1.9.1