feat: 数据地图标记点缩放优化

vue/src/views/dataMap/companyDataMap.vue

@@ -293,7 +293,7 @@
 import {onMounted, reactive, ref} from "vue";
 import huiZhouGeoJSON from "./geo"
 import {getPosition, setBoundary} from "@/utils/position";
-import redThIcon from "@/assets/images/redTh.png"
+import redThIcon from "@/assets/images/redTh1.png"
 import blueThIcon from "@/assets/images/blueTh.png"
 import {message, type SelectProps} from "ant-design-vue";
 import {getSysDictionaryList} from "@/api/system/dictionary";
@@ -308,6 +308,7 @@ const T = (window as any).T;
 const zoom = 9;
 let map = null;
 // 地图标记点
+let userMarker = ref<any>(null)
 let markerList = ref<Array<any>>([]);
 let labelList = ref<Array<any>>([]);
 // 查询类型
@@ -497,16 +498,16 @@ function setLoginLocation() {
     (map as any).centerAndZoom(new T.LngLat(companySearchParam.longitude, companySearchParam.latitude), 10);
     const icon = new T.Icon({
       iconUrl: redThIcon,
-      iconSize: new T.Point(30, 30),
-      iconAnchor: new T.Point(15, 30)
+      iconSize: new T.Point(10, 10),
+      iconAnchor: new T.Point(5, 10)
     })
     const point = new T.LngLat(companySearchParam.longitude, companySearchParam.latitude)
     // 创建标注
-    const marker = new T.Marker(point, {
+    userMarker = new T.Marker(point, {
       icon: icon
     });
     //向地图上标记
-    (map as any).addOverLay(marker);
+    (map as any).addOverLay(userMarker);
     onSearch();
   })
 }

vue/src/views/dataMap/jobUserDataMap.vue

@@ -286,11 +286,22 @@ function setMapMarker() {
   (map as any).centerAndZoom(new T.LngLat(114.416110, 23.111582), 10);
 
   if (jobUserList.value.length > 0) {
+    let zoomLevel = (map as any).getZoom();
+    let newIconSize = Math.min(Math.max(zoomLevel * 3, 15), 45);
+    let iconAnchor = new T.Point(10 * (newIconSize / 45), 20 * (newIconSize / 45));
+    let offsetX = -20 + ((newIconSize - 45) / 3);
+    let offsetY = 28 + ((newIconSize - 45) / 3);
+    offsetX = Math.max(offsetX, -20);
+    offsetY = Math.min(offsetY, 28);
+    let newOffset = new T.Point(offsetX, offsetY);
+    let fontSize = Math.min(12, Math.max(8, 12 - (45 - newIconSize) / 3))
+
+
     // 设置图标
     const icon = new T.Icon({
       iconUrl: thIcon,
-      iconSize: new T.Point(20, 20),
-      iconAnchor: new T.Point(10, 20)
+      iconSize: new T.Point(newIconSize, newIconSize),
+      iconAnchor: iconAnchor
     })
 
     // 筛选数据并统计相同点的总数
@@ -316,12 +327,12 @@ function setMapMarker() {
     let label = new T.Label({
       text: labelNumberCount.value + "", //文本标注的内容
       position: new T.LngLat(114.416110, 23.111582), //文本标注的地理位置
-      offset: new T.Point(-20, 23), //文本标注的位置偏移值
+      offset: newOffset, //文本标注的位置偏移值
     });
     label.setBackgroundColor("transparent");
     label.setBorderColor("transparent");
     label.setBorderLine(0);
-    label.setFontSize(12);
+    label.setFontSize(fontSize);
     label.setFontColor("white");
     jobUserCountMarker.value = marker;
     jobUserCountLabel.value = label;
@@ -334,12 +345,12 @@ function setMapMarker() {
         let label = new T.Label({
           text: item.count + "", //文本标注的内容
           position: new T.LngLat(item.longitude, item.latitude), //文本标注的地理位置
-          offset: new T.Point(-20, 23), //文本标注的位置偏移值
+          offset: newOffset, //文本标注的位置偏移值
         });
         label.setBackgroundColor("transparent");
         label.setBorderColor("transparent");
         label.setBorderLine(0);
-        label.setFontSize(12);
+        label.setFontSize(fontSize);
         label.setFontColor("white");
         (map as any).addOverLay(marker);// 将标注添加到地图中
         (map as any).addOverLay(label);// 将标注添加到地图中

vue/src/views/dataMap/siteDataMap.vue

@@ -133,9 +133,9 @@ const initMap = () => {
     (map as any).addEventListener("zoomend", function () {
       let zoomLevel = (map as any).getZoom();
       // 计算新的icon大小
-      let newIconSize = Math.min(Math.max(zoomLevel * 3, 15), 35);
+      let newIconSize = Math.min(Math.max(zoomLevel * 3, 15), 45);
       // 计算新的icon锚点位置
-      let iconAnchor = new T.Point(15 * (newIconSize / 35), 30 * (newIconSize / 35));
+      let iconAnchor = new T.Point(15 * (newIconSize / 45), 30 * (newIconSize / 45));
       markerList.value.forEach((item: any) => {
         (map as any).removeOverLay(item);
         item.getIcon().setIconSize(new T.Point(newIconSize, newIconSize));