Browse Source

Merge remote-tracking branch 'origin/master'

liao-sea 9 months ago
parent
commit
c45276c090

BIN
vue/src/assets/images/redTh1.png


+ 54 - 30
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";
@@ -307,7 +307,10 @@ import avtO1 from "@/assets/images/avt01.png"
 const T = (window as any).T;
 const zoom = 9;
 let map = null;
+// 天地图默认中心点坐标
+const centerLngLat = new T.LngLat(114.416110, 23.111582);
 // 地图标记点
+let userMarker = ref<any>(null)
 let markerList = ref<Array<any>>([]);
 let labelList = ref<Array<any>>([]);
 // 查询类型
@@ -441,33 +444,23 @@ const initMap = () => {
 
   if (map != null) {
     // 设置地图显示中心点为惠州市人民政府
-    (map as any).centerAndZoom(new T.LngLat(114.416110, 23.111582), zoom);
+    (map as any).centerAndZoom(centerLngLat, zoom);
 
     // 地图缩放监听事件
     (map as any).addEventListener("zoomend", function () {
       let zoomLevel = (map as any).getZoom();
-      // 计算新的icon大小
-      let newSize = Math.min(Math.max(zoomLevel * 3, 15), 45);
-      // 计算新的icon锚点位置
-      let iconAnchor = new T.Point(15 * (newSize / 45), 30 * (newSize / 45));
+      const sizeData = computeMarkerSize(zoomLevel);
       markerList.value.forEach((item: any) => {
         (map as any).removeOverLay(item);
-        item.getIcon().setIconSize(new T.Point(newSize, newSize));
-        item.getIcon().setIconAnchor(iconAnchor);
+        item.getIcon().setIconSize(new T.Point(sizeData.iconSize, sizeData.iconSize));
+        item.getIcon().setIconAnchor(sizeData.iconAnchor);
         (map as any).addOverLay(item);
       })
       // 更新 label 的偏移量
-      // 计算新的偏移量,保持 label 居中且不超过初始值
-      let offsetX = -20 + ((newSize - 45) / 3);
-      let offsetY = 28 + ((newSize - 45) / 3);
-      // 确保偏移量不超过初始值
-      offsetX = Math.max(offsetX, -20);
-      offsetY = Math.min(offsetY, 28);
-      let newOffset = new T.Point(offsetX, offsetY);
       labelList.value.forEach((item: any) => {
         (map as any).removeOverLay(item);
-        item.setOffset(newOffset);
-        item.setFontSize(Math.min(12, Math.max(8, 12 - (45 - newSize) / 3)));
+        item.setOffset(sizeData.labelOffset);
+        item.setFontSize(sizeData.fontSize);
         (map as any).addOverLay(item);
       })
     });
@@ -494,19 +487,19 @@ function setLoginLocation() {
     }
   }).finally(() => {
     // 设置中心点
-    (map as any).centerAndZoom(new T.LngLat(companySearchParam.longitude, companySearchParam.latitude), 10);
+    (map as any).centerAndZoom(new T.LngLat(companySearchParam.longitude, companySearchParam.latitude), zoom);
     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();
   })
 }
@@ -515,13 +508,14 @@ function setLoginLocation() {
 function setCompanyMarker() {
   delMapInfo();
 
+  // 设置中心点
+  (map as any).centerAndZoom(new T.LngLat(companySearchParam.longitude, companySearchParam.latitude), zoom);
+
   if (companyList.value.length > 0) {
-    // 设置图标
-    const icon = new T.Icon({
-      iconUrl: blueThIcon,
-      iconSize: new T.Point(30, 30),
-      iconAnchor: new T.Point(15, 30)
-    })
+    let zoomLevel = (map as any).getZoom();
+    const sizeData = computeMarkerSize(zoomLevel);
+
+    // 解析岗位数据,计算同一个企业标点的岗位信息
     let uniqueCompanyList = companyList.value;
     if (searchType.value == 'post') {
       // 岗位查询时,会出现多个岗位相同公司,按公司的ID去重
@@ -547,6 +541,12 @@ function setCompanyMarker() {
       });
     }
 
+    // 设置图标
+    const icon = new T.Icon({
+      iconUrl: blueThIcon,
+      iconSize: new T.Point(sizeData.iconSize, sizeData.iconSize),
+      iconAnchor: sizeData.iconAnchor
+    })
     // 解析企业数据,在地图中标记
     uniqueCompanyList.forEach((item: any) => {
       if (item.longitude && item.latitude) {
@@ -572,12 +572,12 @@ function setCompanyMarker() {
           let label = new T.Label({
             text: item.postNumber + "", //文本标注的内容
             position: new T.LngLat(item.longitude, item.latitude), //文本标注的地理位置
-            offset: new T.Point(-30, 10), //文本标注的位置偏移值
+            offset: sizeData.labelOffset, //文本标注的位置偏移值
           });
           label.setBackgroundColor("transparent");
           label.setBorderColor("transparent");
           label.setBorderLine(0);
-          label.setFontSize(12);
+          label.setFontSize(sizeData.fontSize);
           label.setFontColor("white");
           (map as any).addOverLay(label); // 将标注添加到地图中
           labelList.value.push(label);
@@ -587,6 +587,30 @@ function setCompanyMarker() {
   }
 }
 
+// 天地图按缩放基本计算图标与文本的大小与锚点偏移值
+function computeMarkerSize(zoomLevel: any) {
+  // 计算新的icon大小
+  let newIconSize = Math.min(Math.max(zoomLevel * 3, 15), 45);
+  // 计算新的icon锚点位置
+  let iconAnchor = new T.Point(10 * (newIconSize / 45), 20 * (newIconSize / 45));
+  // 计算新的偏移量,保持 label 居中且不超过初始值
+  let offsetX = -20 + ((newIconSize - 45) / 3);
+  let offsetY = 28 + ((newIconSize - 45) / 3);
+  // 确保偏移量不超过初始值
+  offsetX = Math.max(offsetX, -20);
+  offsetY = Math.min(offsetY, 28);
+  // 更新 label 的偏移量
+  let newOffset = new T.Point(offsetX, offsetY);
+  let fontSize = Math.min(12, Math.max(8, 12 - (45 - newIconSize) / 3))
+
+  return {
+    iconSize: newIconSize,
+    iconAnchor,
+    labelOffset: newOffset,
+    fontSize
+  }
+}
+
 // 企业分页器页码变更事件
 function companyPaginationChange() {
   onSearch()

+ 63 - 39
vue/src/views/dataMap/jobUserDataMap.vue

@@ -121,8 +121,10 @@ import {getDataMapList} from "@/api/jobUserManager/jobuser";
 import thIcon from "@/assets/images/blueTh.png"
 
 const T = (window as any).T;
-const zoom = 11;
+const zoom = 9;
 let map = null;
+// 天地图默认中心点坐标
+const centerLngLat = new T.LngLat(114.416110, 23.111582);
 // 地图标记点
 let markerList = ref<Array<any>>([]);
 let labelList = ref<Array<any>>([]);
@@ -203,26 +205,14 @@ const initMap = () => {
   map = new T.Map('mapDiv');
   if (map != null) {
     // 设置地图显示中心点为惠州市人民政府
-    (map as any).centerAndZoom(new T.LngLat(114.416110, 23.111582), zoom);
+    (map as any).centerAndZoom(centerLngLat, zoom);
 
     // 地图缩放监听事件
     (map as any).addEventListener("zoomend", function () {
       let zoomLevel = (map as any).getZoom();
       console.log(zoomLevel);
-      // 计算新的icon大小
-      let newIconSize = Math.min(Math.max(zoomLevel * 3, 15), 45);
-      console.log(newIconSize);
-      // 计算新的icon锚点位置
-      let iconAnchor = new T.Point(10 * (newIconSize / 45), 20 * (newIconSize / 45));
-      // 计算新的偏移量,保持 label 居中且不超过初始值
-      let offsetX = -20 + ((newIconSize - 45) / 3);
-      let offsetY = 28 + ((newIconSize - 45) / 3);
-      // 确保偏移量不超过初始值
-      offsetX = Math.max(offsetX, -20);
-      offsetY = Math.min(offsetY, 28);
-      // 更新 label 的偏移量
-      let newOffset = new T.Point(offsetX, offsetY);
-      let fontSize = Math.min(12, Math.max(8, 12 - (45 - newIconSize) / 3))
+      const sizeData = computeMarkerSize(zoomLevel);
+      console.log(sizeData)
 
       if (zoomLevel <= 9) {
         // 删除小标点
@@ -232,13 +222,15 @@ const initMap = () => {
         labelList.value.forEach((item: any) => {
           (map as any).removeOverLay(item);
         });
-        // 显示总数标点
-        jobUserCountMarker.value.getIcon().setIconSize(new T.Point(newIconSize, newIconSize));
-        jobUserCountMarker.value.getIcon().setIconAnchor(iconAnchor);
-        (map as any).addOverLay(jobUserCountMarker.value);
-        jobUserCountLabel.value.setOffset(newOffset);
-        jobUserCountLabel.value.setFontSize(fontSize);
-        (map as any).addOverLay(jobUserCountLabel.value);
+        if (jobUserCountMarker.value != null) {
+          // 显示总数标点
+          jobUserCountMarker.value.getIcon().setIconSize(new T.Point(sizeData.iconSize, sizeData.iconSize));
+          jobUserCountMarker.value.getIcon().setIconAnchor(sizeData.iconAnchor);
+          (map as any).addOverLay(jobUserCountMarker.value);
+          jobUserCountLabel.value.setOffset(sizeData.labelOffset);
+          jobUserCountLabel.value.setFontSize(sizeData.fontSize);
+          (map as any).addOverLay(jobUserCountLabel.value);
+        }
       } else {
         // 删除总数标点
         (map as any).removeOverLay(jobUserCountMarker.value);
@@ -246,15 +238,14 @@ const initMap = () => {
 
         markerList.value.forEach((item: any) => {
           (map as any).removeOverLay(item);
-          item.getIcon().setIconSize(new T.Point(newIconSize, newIconSize));
-          item.getIcon().setIconAnchor(iconAnchor);
+          item.getIcon().setIconSize(new T.Point(sizeData.iconSize, sizeData.iconSize));
+          item.getIcon().setIconAnchor(sizeData.iconAnchor);
           (map as any).addOverLay(item);
         })
-
         labelList.value.forEach((item: any) => {
           (map as any).removeOverLay(item);
-          item.setOffset(newOffset);
-          item.setFontSize(fontSize);
+          item.setOffset(sizeData.labelOffset);
+          item.setFontSize(sizeData.fontSize);
           (map as any).addOverLay(item);
         })
       }
@@ -283,14 +274,17 @@ function setMapMarker() {
   labelNumberCount.value = 0;
 
   // 设置中心点
-  (map as any).centerAndZoom(new T.LngLat(114.416110, 23.111582), 10);
+  (map as any).centerAndZoom(centerLngLat, zoom);
 
   if (jobUserList.value.length > 0) {
+    let zoomLevel = (map as any).getZoom();
+    const sizeData = computeMarkerSize(zoomLevel);
+
     // 设置图标
     const icon = new T.Icon({
       iconUrl: thIcon,
-      iconSize: new T.Point(20, 20),
-      iconAnchor: new T.Point(10, 20)
+      iconSize: new T.Point(sizeData.iconSize, sizeData.iconSize),
+      iconAnchor: sizeData.iconAnchor
     })
 
     // 筛选数据并统计相同点的总数
@@ -312,17 +306,21 @@ function setMapMarker() {
     });
 
     // 设置总数标点
-    const marker = new T.Marker(new T.LngLat(114.416110, 23.111582), {icon: icon}); // 创建标注
+    const marker = new T.Marker(centerLngLat, {icon: icon}); // 创建标注
     let label = new T.Label({
       text: labelNumberCount.value + "", //文本标注的内容
-      position: new T.LngLat(114.416110, 23.111582), //文本标注的地理位置
-      offset: new T.Point(-20, 23), //文本标注的位置偏移值
+      position: centerLngLat, //文本标注的地理位置
+      offset: sizeData.labelOffset, //文本标注的位置偏移值
     });
     label.setBackgroundColor("transparent");
     label.setBorderColor("transparent");
     label.setBorderLine(0);
-    label.setFontSize(12);
+    label.setFontSize(sizeData.fontSize);
     label.setFontColor("white");
+    if (zoomLevel <= 9) {
+      (map as any).addOverLay(marker);// 将标注添加到地图中
+      (map as any).addOverLay(label);// 将标注添加到地图中
+    }
     jobUserCountMarker.value = marker;
     jobUserCountLabel.value = label;
 
@@ -334,15 +332,17 @@ 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: sizeData.labelOffset, //文本标注的位置偏移值
         });
         label.setBackgroundColor("transparent");
         label.setBorderColor("transparent");
         label.setBorderLine(0);
-        label.setFontSize(12);
+        label.setFontSize(sizeData.fontSize);
         label.setFontColor("white");
-        (map as any).addOverLay(marker);// 将标注添加到地图中
-        (map as any).addOverLay(label);// 将标注添加到地图中
+        if (zoomLevel >= 10) {
+          (map as any).addOverLay(marker);// 将标注添加到地图中
+          (map as any).addOverLay(label);// 将标注添加到地图中
+        }
         markerList.value.push(marker);
         labelList.value.push(label);
       }
@@ -350,6 +350,30 @@ function setMapMarker() {
   }
 }
 
+// 天地图按缩放基本计算图标与文本的大小与锚点偏移值
+function computeMarkerSize(zoomLevel: any) {
+  // 计算新的icon大小
+  let newIconSize = Math.min(Math.max(zoomLevel * 3, 15), 45);
+  // 计算新的icon锚点位置
+  let iconAnchor = new T.Point(10 * (newIconSize / 45), 20 * (newIconSize / 45));
+  // 计算新的偏移量,保持 label 居中且不超过初始值
+  let offsetX = -20 + ((newIconSize - 45) / 3);
+  let offsetY = 28 + ((newIconSize - 45) / 3);
+  // 确保偏移量不超过初始值
+  offsetX = Math.max(offsetX, -20);
+  offsetY = Math.min(offsetY, 28);
+  // 更新 label 的偏移量
+  let newOffset = new T.Point(offsetX, offsetY);
+  let fontSize = Math.min(12, Math.max(8, 12 - (45 - newIconSize) / 3))
+
+  return {
+    iconSize: newIconSize,
+    iconAnchor,
+    labelOffset: newOffset,
+    fontSize
+  }
+}
+
 // 选择站点
 function checkJobUser(jobUser: any) {
   nowCheckJobUser.value = JSON.parse(JSON.stringify(jobUser))

+ 27 - 26
vue/src/views/dataMap/siteDataMap.vue

@@ -93,8 +93,10 @@ import {getSiteList} from "@/api/baseSettings/siteInfo";
 import thIcon from "@/assets/images/blueTh.png"
 
 const T = (window as any).T;
-const zoom = 10;
+const zoom = 9;
 let map = null;
+// 天地图默认中心点坐标
+const centerLngLat = new T.LngLat(114.416110, 23.111582);
 // 地图标记点
 let markerList = ref<Array<any>>([]);
 
@@ -127,19 +129,16 @@ const initMap = () => {
   map = new T.Map('mapDiv');
   if (map != null) {
     // 设置地图显示中心点为惠州市人民政府
-    (map as any).centerAndZoom(new T.LngLat(114.416110, 23.111582), zoom);
+    (map as any).centerAndZoom(centerLngLat, zoom);
 
     // 地图缩放监听事件
     (map as any).addEventListener("zoomend", function () {
       let zoomLevel = (map as any).getZoom();
-      // 计算新的icon大小
-      let newIconSize = Math.min(Math.max(zoomLevel * 3, 15), 35);
-      // 计算新的icon锚点位置
-      let iconAnchor = new T.Point(15 * (newIconSize / 35), 30 * (newIconSize / 35));
+      const sizeData = computeMarkerSize(zoomLevel);
       markerList.value.forEach((item: any) => {
         (map as any).removeOverLay(item);
-        item.getIcon().setIconSize(new T.Point(newIconSize, newIconSize));
-        item.getIcon().setIconAnchor(iconAnchor);
+        item.getIcon().setIconSize(new T.Point(sizeData.iconSize, sizeData.iconSize));
+        item.getIcon().setIconAnchor(sizeData.iconAnchor);
         (map as any).addOverLay(item);
       })
     });
@@ -199,35 +198,23 @@ function setSiteMarker() {
   }
 
   // 设置中心点
-  (map as any).centerAndZoom(new T.LngLat(114.416110, 23.111582), 10);
+  (map as any).centerAndZoom(centerLngLat, zoom);
 
   if (siteList.value.length > 0) {
+    let zoomLevel = (map as any).getZoom();
+    const sizeData = computeMarkerSize(zoomLevel);
+
     // 设置图标
     const icon = new T.Icon({
       iconUrl: thIcon,
-      iconSize: new T.Point(30, 30),
-      iconAnchor: new T.Point(15, 30)
+      iconSize: new T.Point(sizeData.iconSize, sizeData.iconSize),
+      iconAnchor: sizeData.iconAnchor
     })
     // 解析站点数据,在地图中标记
     siteList.value.forEach((item: any) => {
       if (item.siteLongitude && item.siteLatitude) {
         const point = new T.LngLat(item.siteLongitude, item.siteLatitude)
         const marker = new T.Marker(point, {icon: icon}); // 创建标注
-
-        // 创建一个信息窗口
-        // const content = `
-        //   <div>
-        //     <p>${item.siteName}</p>
-        //     <p>${item.siteCode}</p>
-        //   </div>
-        // `;
-        // const infoWindow = new T.InfoWindow(content, {offset: new T.Point(0, -30)});
-
-        // 给每个地图标点添加点击事件,打印item
-        marker.addEventListener('click', () => {
-          checkSite(item);
-          // (map as any).openInfoWindow(infoWindow, point);
-        });
         (map as any).addOverLay(marker);// 将标注添加到地图中
         markerList.value.push(marker);
       }
@@ -235,6 +222,20 @@ function setSiteMarker() {
   }
 }
 
+
+// 天地图按缩放基本计算图标与文本的大小与锚点偏移值
+function computeMarkerSize(zoomLevel: any) {
+  // 计算新的icon大小
+  let newIconSize = Math.min(Math.max(zoomLevel * 3, 15), 45);
+  // 计算新的icon锚点位置
+  let iconAnchor = new T.Point(15 * (newIconSize / 45), 30 * (newIconSize / 45));
+
+  return {
+    iconSize: newIconSize,
+    iconAnchor,
+  }
+}
+
 // 选择站点
 function checkSite(site: any) {
   nowCheckSite.value = JSON.parse(JSON.stringify(site))