跟新可视化地图功能

src/api/visualization/index.js

@@ -0,0 +1,21 @@
+import request from '@/utils/request'
+
+// 查询所有企业分类
+export function getClassificationValueData(query) {
+  return request({
+    url: '/crmHighTechZoneEnterprises/getCreditScoreList',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 查询所有经纬度
+export function getLngLatValueData(query) {
+    return request({
+      url: '/crmHighTechZoneEnterprises/getList',
+      method: 'get',
+      params: query
+    })
+  }
+

src/views/visualization/index.vue

@@ -29,7 +29,6 @@
                 <div class="leftOneBox">
                     <div class="leftOBTitle">税收TOP10</div>
                     <div class="leftOBContent">
-                        <baseEcharts></baseEcharts>
                     </div>
                 </div>
                 <!-- <div>2</div> -->
@@ -78,37 +77,57 @@
 import { ref, onMounted } from 'vue';
 import baseEcharts from '@/components/baseEcharts/index.vue'
 import PieEcharts from '@/components/baseEcharts/pieChart.vue'
+import { getClassificationValueData, getLngLatValueData } from '@/api/visualization/index'
 
 const mapContainer = ref(null);
 let map = null;
+let marker = null
+
+const data = reactive({
+    form: {},
+    queryParams: {
+        pageNum: 1,
+        pageSize: 100000,
+        unifiedSocialCreditCode: '',
+        condition: "",
+        grade: null,
+        total: null
+    },
+})
+const { queryParams } = toRefs(data)
 
 const gradationMun = [{
     name: "3A级企业",
-    state: 3
+    state: 3,
+    type: 'AAA'
 }, {
     name: "2A级企业",
-    state: 2
+    state: 2,
+    type: 'AA'
 }, {
     name: "1A级企业",
-    state: 1
+    state: 1,
+    type: 'A'
 }, {
     name: "B级企业",
-    state: 4
+    state: 4,
+    type: 'B'
 }, {
     name: "C级企业",
-    state: 5
+    state: 5,
+    type: 'C'
 }, {
     name: "D级企业",
-    state: 6
+    state: 6,
+    type: 'D'
 }, {
-    name: "取消选择",
-    state: 0
+    name: "全部企业",
+    state: 0,
+    type: ''
 }]
 const activeTab = ref(6); // 默认激活第一个tab  
+// const resultArray = ref;
 
-const setActiveTab = (index, value) => {
-    activeTab.value = index;
-};
 onMounted(async () => {
     // 初始化地图
     map = new BMapGL.Map(mapContainer.value);
@@ -116,7 +135,7 @@ onMounted(async () => {
     map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
     map.enableScrollWheelZoom(true);
     map.setMinZoom(15);
-    map.setMaxZoom(17);
+    map.setMaxZoom(19);
     map.setMapStyleV2({
         styleId: '62ce43ad2a1362c23e612b783d7406e7'
     });
@@ -140,21 +159,6 @@ onMounted(async () => {
             map.panTo(adjustCenter);
         }
     });
-    // map.addControl(new BMapGL.NavigationControl());
-
-    // var convertor = new BMapGL.Convertor();
-    // var pointArr = [];
-    // pointArr.push(point);
-    // convertor.translate(pointArr, 1, 5, function (data) {//坐标转换完之后的回调函数
-    //     if (data.status === 0) {
-    //         console.log(data)
-    //         var marker = new BMapGL.Marker(data.points[0]);
-    //         // map.addOverlay(marker);
-    //         // var label = new BMapGL.Label("转换的GPS坐标（正确）", { offset: new BMapGL.Size(20, -10) });
-    //         marker.setLabel(label); //添加百度label
-    //         map.setCenter(data.points[0]);
-    //     }
-    // })
     // 导入JSON文件
     try {
         var path = [];
@@ -176,13 +180,79 @@ onMounted(async () => {
             });
             map.addOverlay(prism);
         })
-        // );
 
     } catch (error) {
         console.error('Error loading JSON data:', error);
     }
 });
 
+// );
+/** 查询用户列表 */
+function getClassificationList() {
+    getLngLatValueData(queryParams.value).then((res) => {
+        const LNgLatData = res.data;
+        // console.log("外层", res.data)
+        getclassData(LNgLatData)
+    })
+}
+function getclassData(lngLat) {
+
+    getClassificationValueData(queryParams.value).then((res) => {
+        const array1 = lngLat;
+        const array2 = res.data.result;
+
+        const mergedData = {};
+        array1.forEach(item => {
+            mergedData[item.unifiedSocialCreditCode] = { ...item };
+        });
+        array2.forEach(item => {
+            if (mergedData[item.unifiedSocialCreditCode]) {
+                mergedData[item.unifiedSocialCreditCode] = { ...mergedData[item.unifiedSocialCreditCode], ...item };
+            } else {
+                mergedData[item.unifiedSocialCreditCode] = { ...item };
+            }
+        });
+        const resultArray = Object.values(mergedData);
+
+        resultArray.forEach(item => {
+            if (item.grade) {
+                const markers = new BMapGL.Point(item.longitude, item.latitude)
+                marker = new BMapGL.Marker(markers)
+                map.addOverlay(marker);
+                // 创建信息窗口
+                var opts = {
+                    width: 300,
+                    // height: 100,
+                    title: item.enterpriseName
+                };
+                var infoWindow = new BMapGL.InfoWindow("等级：" + item.grade + "<br/>"
+                    + "统一信用代码：" + item.unifiedSocialCreditCode + "<br/>"
+                    + "总分：" + item.total + "<br/>"
+                    + "负责人：" + item.enterpriseLeader + "<br/>"
+                    + "联系方式：" + item.contactPhone, opts);
+                // 点标记添加点击事件
+                marker.addEventListener('click', function () {
+                    map.openInfoWindow(infoWindow, markers); // 开启信息窗口
+                });
+            }
+        })
+    })
+}
+const setActiveTab = (index, value) => {
+    //获取地图上所有的覆盖物
+    var allOverlay = map.getOverlays();
+    for (var i = 0; i < allOverlay.length; i++) {
+        console.log(11, allOverlay[i].toString())
+        if (allOverlay[i].toString() == "Marker") {
+            map.removeOverlay(allOverlay[i]);
+        }
+    }
+    queryParams.value.condition = value.type;
+    getClassificationList();
+    activeTab.value = index;
+};
+getClassificationList()
+
 // 如果需要的话，在beforeUnmount中清理资源
 import { onBeforeUnmount } from 'vue';
 onBeforeUnmount(() => {