更新

2023-11-30 18:36:25 +08:00 · 2023-11-30 18:36:25 +08:00 · 8b5ec1bb74
parent 531e30f6be
commit 8b5ec1bb74
13 changed files with 30793 additions and 4857 deletions
--- a/index.html
+++ b/index.html
@ -10,6 +10,11 @@
        font-size: 16px;
      }
    </style>
+    <script type="text/javascript">
+      window._AMapSecurityConfig = {
+          securityJsCode:'e8b6cb44e8e431d68052c8e10db99264',
+      }
+    </script>
  </head>
  <body>
    <div id="app"></div>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,10 +1,14 @@
 <script setup>
+import headView from "@/components/headView.vue";
 import Businesses from "@/components/Businesses.vue"
 </script>

 <template>
  <dv-full-screen-container class="body">
+    <headView></headView>
+    <div style="height: calc(100% - 60px)">
      <router-view></router-view>
+    </div>
    <Businesses class="businesses"></Businesses>
  </dv-full-screen-container>
 </template>
--- a/src/assets/delivery_img/icon10.png
+++ b/src/assets/delivery_img/icon10.png
--- a/src/assets/delivery_img/icon9.png
+++ b/src/assets/delivery_img/icon9.png
--- a/src/assets/json/luxian.json
+++ b/src/assets/json/luxian.json
--- a/src/assets/json/luxian2.json
+++ b/src/assets/json/luxian2.json
--- a/src/view/delivery/components/AMap.vue
+++ b/src/view/delivery/components/AMap.vue
@ -8,14 +8,17 @@ const loading = ref(true);

 onMounted(() => {
  AMapLoader.load({
-    key: "f14dcaeb4df441ab84ed0a0768f04f95", // 申请好的Web端开发者Key，首次调用 load 时必填
+    key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    Loca: {
+      version: '2.0.0'
+    }
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
-        viewMode: "2D", // 是否为3D地图模式
+        viewMode: "3D", // 是否为3D地图模式
        zoom: 15, // 初始化地图级别
        center: [105.441866, 28.87098], // 初始化地图中心点位置
        mapStyle: "amap://styles/darkblue",
@ -27,6 +30,122 @@ onMounted(() => {
          loading.value = false;
        }, 500)
      });
+      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), // 图标相对于标记点的位置偏移量
+      });
+
+      // 将创建的点标记添加到已有的地图实例：
+      map.add(marker);
+
+      // 创建 Loca 实例
+      var loca = new Loca.Container({
+        map: map
+      });
+
+      // 创建数据源
+      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]
+                ]
+              }
+            },
+            {
+              "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]
+                ]
+              }
+            }
+          ]
+        },
+      });
+
+      // 弧线
+      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);
--- a/src/view/delivery/components/AMapLeft.vue
+++ b/src/view/delivery/components/AMapLeft.vue
@ -8,14 +8,15 @@ const loading = ref(true);

 onMounted(() => {
  AMapLoader.load({
-    key: "f14dcaeb4df441ab84ed0a0768f04f95", // 申请好的Web端开发者Key，首次调用 load 时必填
+    key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map("container-left", {
        // 设置地图容器id
        viewMode: "2D", // 是否为3D地图模式
+        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        zoom: 15, // 初始化地图级别
        center: [105.441866, 28.87098], // 初始化地图中心点位置
        mapStyle: "amap://styles/darkblue",
@ -27,6 +28,25 @@ onMounted(() => {
          loading.value = false;
        }, 500)
      });
+      const driving = new AMap.Driving({
+        map: map,
+        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
+        // eslint-disable-next-line no-undef
+        policy: 'panel',
+        isOutline: false, //描边
+        showTraffic: false, //路况
+        // autoFitView: false //自动调整
+      })
+      const points = [
+        { keyword: '莲花池街道里海科技', city: '泸州' },
+        { keyword: '万象汇', city: '泸州' }
+      ]
+
+      driving.search(points, (status, result) => {
+        // 未出错时，result即是对应的路线规划方案
+        console.log('status=', status)
+        console.log('result=', result)
+      })
    })
    .catch((e) => {
      console.log(e);
--- a/src/view/delivery/components/center.vue
+++ b/src/view/delivery/components/center.vue
@ -2,6 +2,10 @@
 import { reactive, ref } from "vue"
 import border from "@/components/border.vue";
 import AMap from "./AMap.vue";
+
+const test = () => {
+  console.log('ss');
+}
 </script>

 <template>
@ -10,6 +14,17 @@ import AMap from "./AMap.vue";
      <AMap></AMap>
    </div>
    <div class="border"></div>
+    <div class="btn">
+      <div class="c-b" @click.stop="test">
+        <div class="text">已取货(100)单</div>
+      </div>
+      <div class="c-b" @click.stop="test">
+        <div class="text">已配送(100)单</div>
+      </div>
+      <div class="c-b" @click.stop="test">
+        <div class="text">已完成(100)单</div>
+      </div>
+    </div>
  </div>
 </template>

@ -32,5 +47,25 @@ import AMap from "./AMap.vue";
    height: 100%;
    width: 100%;
  }
+  .btn {
+    position: absolute;
+    top: 30%;
+    left: 2rem;
+    .c-b {
+      cursor: pointer;
+      background-image: url(../../../assets/delivery_img/icon9.png);
+      background-size: 100% 100%;
+      height: 4rem;
+      width: 11.5rem;
+      margin-bottom: 1.4rem;
+      display: flex;
+      align-items: center;
+      .text {
+        margin-left: 4.5rem;
+        font-size: 0.8rem;
+        color: #fff;
+      }
+    }
+  }
 }
 </style>
--- a/src/view/delivery/components/right.vue
+++ b/src/view/delivery/components/right.vue
@ -55,7 +55,7 @@ onUnmounted(() => {
 <template>
  <border>
    <div class="box">
-      <div class="title">订单排行榜</div>
+      <div class="title">配送商品排行榜</div>
      <div
        style="
          height: calc(100% - 60px);
--- a/src/view/delivery/index.vue
+++ b/src/view/delivery/index.vue
@ -1,6 +1,4 @@
 <script setup>
-import headView from "@/components/headView.vue";
-import border from "@/components/border.vue";
 import leftItem from "./components/left.vue";
 import centerItem from "./components/center.vue";
 import bottomItem from "./components/bottom.vue";
@ -8,7 +6,6 @@ import rightItem from "./components/right.vue";
 </script>

 <template>
-  <headView></headView>
  <div class="center">
    <div class="item">
      <leftItem style="height: 98%"></leftItem>
@ -26,7 +23,7 @@ import rightItem from "./components/right.vue";
 <style scoped lang="scss">
 .center {
  display: flex;
-  height: calc(100% - 60px);
+  height: 100%;
  justify-content: space-evenly;
  .item {
    width: 26%;
@ -36,6 +33,10 @@ import rightItem from "./components/right.vue";
    justify-content: space-evenly;
    align-content: center;
    /* border: 1px solid red; */
+    & > .div {
+      box-sizing: border-box;
+      padding: 10px;
+    }
  }
  .item_c {
    width: 72%;
--- a/src/view/index/components/centerMap.vue
+++ b/src/view/index/components/centerMap.vue
@ -47,10 +47,15 @@ let dataValue = [
    name: '测试四', value: [105.70, 29.23],
    store: 9887, team: 1562,
  },
+  {
+    name: '泸县', value: [105.372029, 29.141426],
+    store: 9999, team: 1000,
+  },
+
 ]

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

@ -143,9 +148,10 @@ const initMap = () => {
            borderWidth: 1,
            areaColor: "#3f5171",
            shadowColor: "#5bdbf6",
-            shadowOffsetX: 4,
-            shadowOffsetY: 8,
+            shadowOffsetX: 5,
+            shadowOffsetY: 10,
            // shadowBlur: 2
+            shadowBlur: 20,
          },
        },
      },
@ -194,10 +200,10 @@ const initMap = () => {
            areaColor: "#3f5171",
            borderColor: "#fff",
            borderWidth: 1,
-            shadowColor: "#5bdbf6",
-            shadowOffsetX: 5,
-            shadowOffsetY: 10,
-            shadowBlur: 30,
+            // shadowColor: "#5bdbf6",
+            // shadowOffsetX: 5,
+            // shadowOffsetY: 10,
+            // shadowBlur: 30,
            // areaColor: {
            //   image: domImg,
            //   repeat: 'no-repeat',
@ -238,18 +244,6 @@ const initMap = () => {
        }
      },
    ],
-    graphic: [{
-      type: 'image',
-      left: 0,
-      top: 0,
-      z: 10,
-      // bounding: 'raw',
-      style: {
-        image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6b962202311291338462283.png', // 纹理图片 URL
-        width: '100%',
-        height: '100%'
-      }
-    }]
  }
  // 使用配置项显示图表
  chart.setOption(option);
--- a/src/view/index/index.vue
+++ b/src/view/index/index.vue
@ -1,5 +1,4 @@
 <script setup>
-import headView from "@/components/headView.vue";
 import leftItme1 from "./components/leftItme1.vue";
 import leftItme2 from "./components/leftItme2.vue";
 import centerItme1 from "./components/centerItem1.vue";
@ -9,7 +8,6 @@ import rightItem2 from "./components/rightItem2.vue";
 </script>

 <template>
-  <headView></headView>
  <div class="center">
    <div class="item">
      <leftItme1 style="height: 58%"></leftItme1>
@ -29,7 +27,7 @@ import rightItem2 from "./components/rightItem2.vue";
 <style scoped lang="scss">
 .center {
  display: flex;
-  height: calc(100% - 60px);
+  height: 100%;
  justify-content: space-evenly;
  .item {
    width: 26%;
@ -45,7 +43,7 @@ import rightItem2 from "./components/rightItem2.vue";
    }
  }
  .item_c {
-    width: 44%;
+    width: 45%;
  }
 }
 </style>