更新

2023-12-06 10:48:18 +08:00 · 2023-12-06 10:48:18 +08:00 · 18b5738927
parent 2885e6faea
commit 18b5738927
6 changed files with 184 additions and 143 deletions
--- a/src/api/index.js
+++ b/src/api/index.js
@ -43,4 +43,9 @@ export const dateCangeCrderCount = (data) => {
 // 地图配送信息
 export const logisticsMapCount = (data) => {
    return axios.get('dataview/logistics_map_count', { params: data });
+}
+
+// 首页地图镇级统计信息
+export const townMapCoun = (data) => {
+    return axios.get('dataview/town_map_count', { params: data });
 }
--- a/src/view/delivery/components/AMap.vue
+++ b/src/view/delivery/components/AMap.vue
@ -6,11 +6,22 @@ let map = null;

 const loading = ref(true);

-onMounted(() => {
+const props = defineProps({
+  list: {
+    type: Object,
+    default: () => []
+  },
+  open: {
+    type: String,
+    default: ''
+  }
+})
+
+const initMap = () => {
  AMapLoader.load({
    key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    Loca: {
      version: '2.0.0'
    }
@ -32,124 +43,135 @@ onMounted(() => {
      });
      map.setPitch(30);

-      // 创建 AMap.Icon 实例：
-      const icon = new AMap.Icon({
-        size: new AMap.Size(50, 60),    // 图标尺寸
-        // vue3/vite 需要用特定的本地图片引入方式，不可require引入
-        image: new URL('/src/assets/delivery_img/icon10.png', import.meta.url).href,  // Icon的图像
-        imageSize: new AMap.Size(50, 60), // 根据所设置的大小拉伸或压缩图片
-        imageOffset: new AMap.Pixel(0, 0)
-      });
-      // 创建一个 Marker 实例：
-      const marker = new AMap.Marker({
-        position: new AMap.LngLat(105.441866, 28.87098),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-        icon: icon,
-        offset: new AMap.Pixel(-25, -60), // 图标相对于标记点的位置偏移量
-      });
+      let geocoder = new AMap.Geocoder();

-      // 将创建的点标记添加到已有的地图实例：
-      map.add(marker);

-      // 创建 Loca 实例
-      var loca = new Loca.Container({
-        map: map
-      });
+      geocoder.getLocation(props.open, function (status, result) {
+        if (status === 'complete' && result.info === 'OK') {
+          // 获取成功，result.geocodes包含了返回的经纬度信息
+          let latlong = result.geocodes[0].location;
+          let start = [latlong.lng, latlong.lat];
+          let line = [];
+          map.setCenter(start);

-      // 创建数据源
-      var dataSource = new Loca.GeoJSONSource({
-        // url: 'xxx.geojson', 或者使用 data 字段
-        data: {
-          "type": "FeatureCollection",
-          "features": [
-            {
-              "type": "Feature",
-              "properties": {},
-              "geometry": {
-                "type": "LineString",
-                "coordinates": [
-                  [105.441866, 28.87098],
-                  [105.449866, 28.87998]
-                ]
+          // 创建 AMap.Icon 实例：
+          const icon = new AMap.Icon({
+            size: new AMap.Size(50, 60),    // 图标尺寸
+            // vue3/vite 需要用特定的本地图片引入方式，不可require引入
+            image: new URL('/src/assets/delivery_img/icon10.png', import.meta.url).href,  // Icon的图像
+            imageSize: new AMap.Size(50, 60), // 根据所设置的大小拉伸或压缩图片
+            imageOffset: new AMap.Pixel(0, 0)
+          });
+          // 创建一个 Marker 实例：
+          const marker = new AMap.Marker({
+            position: start,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            icon: icon,
+            offset: new AMap.Pixel(-25, -60), // 图标相对于标记点的位置偏移量
+          });
+
+          // 将创建的点标记添加到已有的地图实例：
+          map.add(marker);
+
+          props.list.forEach(item => {
+            geocoder.getLocation(item, function (status, result) {
+              if (status === 'complete' && result.info === 'OK') {
+                // 获取成功，result.geocodes包含了返回的经纬度信息
+                let geocodes = result.geocodes[0].location;
+                line.push([geocodes.lng, geocodes.lat]);
+                if (line.length == props.list.length) {
+                  initLine(start, line);
+                }
+              } else {
+                // 获取失败，可根据具体需求进行错误处理
+                console.log('获取经纬度失败');
              }
-            },
-            {
-              "type": "Feature",
-              "properties": {},
-              "geometry": {
-                "type": "LineString",
-                "coordinates": [
-                  [105.441866, 28.87098],
-                  [105.440866, 28.87658]
-                ]
-              }
-            },
-            {
-              "type": "Feature",
-              "properties": {},
-              "geometry": {
-                "type": "LineString",
-                "coordinates": [
-                  [105.441866, 28.87098],
-                  [105.435866, 28.87658]
-                ]
-              }
-            },
-            {
-              "type": "Feature",
-              "properties": {},
-              "geometry": {
-                "type": "LineString",
-                "coordinates": [
-                  [105.441866, 28.87098],
-                  [105.43, 28.87]
-                ]
-              }
-            }
-          ]
-        },
+            })
+          })
+        } else {
+          // 获取失败，可根据具体需求进行错误处理
+          console.log('获取经纬度失败');
+        }
      });

-      // 弧线
-      var pulseLink = new Loca.PulseLinkLayer({
-        // loca,
-        zIndex: 30,
-        opacity: 1,
-        visible: true,
-        zooms: [6, 22],
-        depth: true,
-      });
-
-      pulseLink.setSource(dataSource)
-      pulseLink.setStyle({
-        unit: 'meter',
-        dash: [80, 0, 80, 0],
-        lineWidth: function () {
-          return [30, 5];
-        },
-        height: function (index, feat) {
-          return feat.distance / 3 + 10;
-        },
-        // altitude: 1000,
-        smoothSteps: 30,
-        speed: function (index, prop) {
-          // return 1 + Math.random() * 200;
-          return 200;
-        },
-        flowLength: 300,
-        lineColors: function (index, feat) {
-          return ['rgba(47, 194, 250, 0.20)', 'rgba(91, 219, 246, 0.70)', 'rgba(0, 156, 255, 0.20)'];
-        },
-        maxHeightScale: 0.4, // 弧顶位置比例
-        headColor: 'rgba(91, 219, 246, 1)',
-        trailColor: 'rgba(255, 255,0,0)',
-      });
-      loca.add(pulseLink);
-      loca.animate.start();
-      // 添加到地图上
    })
    .catch((e) => {
      console.log(e);
    });
+}
+
+const initLine = (start = [], line = []) => {
+
+  let features = [];
+  line.forEach((item => {
+    features.push({
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          start,
+          item
+        ]
+      }
+    },)
+  }))
+
+  // 创建 Loca 实例
+  let loca = new Loca.Container({
+    map: map
+  });
+
+  // 创建数据源
+  let dataSource = new Loca.GeoJSONSource({
+    // url: 'xxx.geojson', 或者使用 data 字段
+    data: {
+      "type": "FeatureCollection",
+      "features": features
+    },
+  });
+
+  // 弧线
+  let pulseLink = new Loca.PulseLinkLayer({
+    // loca,
+    zIndex: 30,
+    opacity: 1,
+    visible: true,
+    zooms: [6, 22],
+    depth: true,
+  });
+
+  pulseLink.setSource(dataSource)
+  pulseLink.setStyle({
+    unit: 'meter',
+    dash: [80, 0, 80, 0],
+    lineWidth: function () {
+      return [30, 5];
+    },
+    height: function (index, feat) {
+      return feat.distance / 3 + 10;
+    },
+    // altitude: 1000,
+    smoothSteps: 30,
+    speed: function (index, prop) {
+      // return 1 + Math.random() * 200;
+      return 200;
+    },
+    flowLength: 300,
+    lineColors: function (index, feat) {
+      return ['rgba(47, 194, 250, 0.20)', 'rgba(91, 219, 246, 0.70)', 'rgba(0, 156, 255, 0.20)'];
+    },
+    maxHeightScale: 0.4, // 弧顶位置比例
+    headColor: 'rgba(91, 219, 246, 1)',
+    trailColor: 'rgba(255, 255,0,0)',
+  });
+
+  // 添加到地图上
+  loca.add(pulseLink);
+  loca.animate.start();
+}
+
+onMounted(() => {
+  initMap();
 });

 onUnmounted(() => {
--- a/src/view/delivery/components/AMapLeft.vue
+++ b/src/view/delivery/components/AMapLeft.vue
@ -48,7 +48,7 @@ const initMap = () => {


      let str = props.info.user_address;
-      str = str.replace(/[1-10]队/, '');
+      str = str.replace(/\d+队/, '');

      if (props.info.mer_lat && props.info.mer_long) {
        let geocoder = new AMap.Geocoder({
--- a/src/view/delivery/components/center.vue
+++ b/src/view/delivery/components/center.vue
@ -7,13 +7,22 @@ import { logisticsMapCount } from "@/api/index.js";

 const appStore = useAppStore();

+const list = ref([]);
+const open = ref({});
 const initInfo = () => {
  logisticsMapCount({
    areaCode: appStore.delivery_address.areaCode,
    streetCode: appStore.delivery_address.streetCode,
    courier_id: appStore.delivery_address.courier_id
  }).then(res => {
-    console.log(res);
+    res.data.latestTenOrder.forEach(item => {
+      list.value.push(item.receiver_address.replace(/\d+队/, ''))
+    })
+    // 测试数据使用, 可删除, 测试前需正则匹配\d+队5353
+    // list.value[0] += '和瑞世纪城';
+    // list.value[1] += '县政府';
+    // list.value[2] += '阳光国际城 ';
+    open.value = res.data.latestOrder.mer_address;
  })
 }

@ -30,7 +39,7 @@ onMounted(() => {
 <template>
  <div class="box">
    <div class="map">
-      <AMap></AMap>
+      <AMap :list="list" :open="open"></AMap>
    </div>
    <div class="border"></div>
    <div class="btn">
--- a/src/view/index/components/centerItem1.vue
+++ b/src/view/index/components/centerItem1.vue
@ -1,6 +1,26 @@
 <script setup>
 import ball from "./ball.vue";
 import centerMap from "./centerMap.vue";
+import { townMapCoun } from "@/api/index.js";
+import { useAppStore } from "@/store/app.js"
+import { onMounted, ref } from "vue";
+
+const appStore = useAppStore();
+
+const list = ref(null)
+
+const initData = () => {
+  townMapCoun({
+    areaCode: appStore.address.areaCode,
+    streetCode: appStore.address.streetCode,
+  }).then((res) => {
+    list.value = res.data.townList;
+  })
+}
+
+onMounted(() => {
+  initData()
+})

 </script>

@ -9,7 +29,7 @@ import centerMap from "./centerMap.vue";
    <div class="ball">
      <ball class="ball1"></ball>
    </div>
-    <centerMap class="c-map"></centerMap>
+    <centerMap class="c-map" :list="list"></centerMap>
  </div>
 </template>

--- a/src/view/index/components/centerMap.vue
+++ b/src/view/index/components/centerMap.vue
@ -11,9 +11,15 @@ import longma from "@/assets/json/longma.json";
 import naxi from "@/assets/json/naxi.json";
 import { useAppStore } from "@/store/app.js";

-
 const appStore = useAppStore();

+const props = defineProps({
+  list: {
+    type: Object,
+    default: () => []
+  }
+})
+
 const mapType = reactive({
  name: '',
  json: ''
@ -30,36 +36,14 @@ const changeType = (name = 'luxian') => {
  if (name == 'naxi') mapType.json = naxi;
 }

-let dataValue = [
-  {
-    name: '测试一', value: [105.38, 29.15],
-    store: 2065, team: 33,
-  },
-  {
-    name: '测试二', value: [105.62, 29.05],
-    store: 665, team: 895,
-  },
-  {
-    name: '测试三', value: [105.55, 29.10],
-    store: 66, team: 5422,
-  },
-  {
-    name: '测试四', value: [105.70, 29.23],
-    store: 9887, team: 1562,
-  },
-  {
-    name: '泸县', value: [105.372029, 29.141426],
-    store: 9999, team: 1000,
-  },
-
-]
+let dataValue = []

 const customFormatter = (params) => {
  // console.log(params.data);
-  return `{img|${params.data.name}}\n{t|店铺${params.data.store}个, 团队${params.data.team}个}`
+  return `{img|${params.data.street_name}}\n{t|店铺${params.data.mer_count}个, 团队${params.data.service_group_count}个}`
 }

-const initDateValue = () => {
+const initDataValue = () => {
  dataValue.forEach(item => {
    item.label = {
      show: true, // 显示标签
@ -279,13 +263,14 @@ const initMap = () => {
 }

 onMounted(() => {
-  changeType(appStore.map_info);
-  initDateValue();
+  dataValue = props.list;
+  changeType('xuyong');
+  initDataValue();
  initMap();
  nextTick(() => {
    mitt.on('map_info', e => {
      changeType(e.pinyin);
-      initDateValue();
+      initDataValue();
      initMap();
    })
  })