Browse Source

feat: 数据可视化地图优化

zhangying 9 months ago
parent
commit
1dc7f1f76b
2 changed files with 12 additions and 7 deletions
  1. 6 5
      vue/src/views/dataMap/companyDataMap.vue
  2. 6 2
      vue/src/views/dataMap/siteDataMap.vue

+ 6 - 5
vue/src/views/dataMap/companyDataMap.vue

@@ -211,7 +211,6 @@ import {onMounted, reactive, ref} from "vue";
 import huiZhouGeoJSON from "./geo"
 import {getPosition, setBoundary} from "@/utils/position";
 import redThIcon from "@/assets/images/redTh.png"
-import thIcon from "@/assets/images/th.jpg"
 import {message, type SelectProps} from "ant-design-vue";
 import {getSysDictionaryList} from "@/api/system/dictionary";
 import {getSiteList} from "@/api/baseSettings/siteInfo";
@@ -225,14 +224,12 @@ const zoom = 9;
 let map = null;
 // 地图标记点
 let markerList = new Array<any>([]);
-// 地图标记点文本
-let labelList = new Array<any>([]);
 // 查询类型
 const searchType = ref("company")
 // 企业查询条件
 const companySearchParam = reactive({
   pageIndex: 1,
-  pageSize: 5,
+  pageSize: 50,
   companyName: "",
   maxDistance: 5,
   companyModel: undefined,
@@ -257,7 +254,7 @@ const nowCheckCompany = ref({
 // 岗位查询条件
 const postSearchParams = reactive({
   pageIndex: 1,
-  pageSize: 5,
+  pageSize: 20,
 })
 // 当前选中的企业岗位列表
 const postList = ref<Array<any>>([]);
@@ -423,6 +420,10 @@ function setCompanyMarker() {
         const marker = new T.Marker(point, {
           icon: icon
         }); // 创建标注
+        // 给每个地图标点添加点击事件,打印item
+        marker.addEventListener('click', () => {
+          checkCompanyChange(item);
+        });
         (map as any).addOverLay(marker);// 将标注添加到地图中
         markerList.push(marker);
       }

+ 6 - 2
vue/src/views/dataMap/siteDataMap.vue

@@ -92,7 +92,7 @@ let markerList = new Array<any>([]);
 // 驿站查询数据
 const siteSearchParam = reactive({
   pageIndex: 1,
-  pageSize: 6,
+  pageSize: 50,
   siteName: "",
   regionCode: null,
   streetCode: null,
@@ -181,11 +181,15 @@ function setSiteMarker() {
       iconSize: new T.Point(30, 30),
       iconAnchor: new T.Point(15, 30)
     })
-    // 解析企业数据,在地图中标记
+    // 解析站点数据,在地图中标记
     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}); // 创建标注
+        // 给每个地图标点添加点击事件,打印item
+        marker.addEventListener('click', () => {
+          checkSite(item);
+        });
         (map as any).addOverLay(marker);// 将标注添加到地图中
         markerList.push(marker);
       }