feat: TdtCartrack

.husky/pre-commit

@@ -1,10 +1,21 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run switch3
-git add package.json
-git add yarn.lock
+#替换vue版本
+cat package.json | while read line
+do
+  reg="\"vue\": \"^2.6."
+  if [[ $line == *$reg* ]]
+  then
+    npm run switch3
+    git add package.json
+    git add yarn.lock
+  fi
+done
+
+#复制文档
 npm run cp
 git add docs/index.md
 git add docs/CHANGELOG.md
+
 npx lint-staged --allow-empty $1

docs/.vitepress/components/demo-car-track/data.ts

@@ -0,0 +1,197 @@
+export const data = {
+  type: "FeatureCollection",
+  features: [
+    {
+      type: "Feature",
+      properties: {
+        time: 1,
+        id: "route1",
+        name: "五棵松"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.26802, 39.90623]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 2,
+        id: "route1",
+        name: "万寿路"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.28896, 39.90622]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 3,
+        id: "route1",
+        name: "公主坟"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.30421, 39.90625]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 4,
+        id: "route1",
+        name: "军事博物馆"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.3155, 39.90618]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 5,
+        id: "route1",
+        name: "木樨地"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.3313, 39.90611]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 6,
+        id: "route1",
+        name: "南礼士路"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.34643, 39.90583]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 10,
+        id: "route1",
+        name: "复兴门"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.35033, 39.90582]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 11,
+        id: "route1",
+        name: "西单"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.36784, 39.90579]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 12,
+        id: "route1",
+        name: "灵境胡同"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.36755, 39.91449]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 13,
+        id: "route1",
+        name: "西四"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.36755, 39.91449]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 14,
+        id: "route1",
+        name: "平安里"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.36673, 39.93235]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 15,
+        id: "route1",
+        name: "平安里中转"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.36651, 39.93924]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 16,
+        id: "route1",
+        name: "新街口"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.36172, 39.93923]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 17,
+        id: "route1",
+        name: "西直门"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.34936, 39.93913]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 18,
+        id: "route1",
+        name: "动物园"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.33292, 39.93697]
+      }
+    },
+    {
+      type: "Feature",
+      properties: {
+        time: 18,
+        id: "route1",
+        name: "白石桥南"
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [116.31955, 39.931]
+      }
+    }
+  ]
+};

docs/.vitepress/components/demo-car-track/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <button @click="getData()">getData</button>
+  <button @click="onBtnClick('start')">start</button>
+  <button @click="onBtnClick('pause')">pause</button>
+  <button @click="onBtnClick('stop')">stop</button>
+  <button @click="state.Datas = []">clear</button>
+  <div class="mapDiv">
+    <tdt-map :center="state.center" :zoom="state.zoom">
+      <tdt-car-track ref="carTrack" :Datas="state.Datas" :interval="5" :speed="10"></tdt-car-track>
+    </tdt-map>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue-demi";
+import { data } from "./data";
+
+const state = reactive({
+  center: [116.31809, 39.92027],
+  zoom: 13,
+  Datas: [] as number[][]
+});
+
+function getData() {
+  state.Datas = data.features.map(feature => feature.geometry.coordinates);
+}
+
+const carTrack = ref();
+function onBtnClick(handle: string) {
+  carTrack.value[handle]();
+}
+</script>
+
+<script lang="ts">
+export default { name: "demo-car-track" };
+</script>
+
+<style scoped>
+.mapDiv {
+  width: 100%;
+  height: 300px;
+}
+</style>

docs/.vitepress/components/index.ts

@@ -4,9 +4,8 @@ const components = import.meta.globEager("./**/*.vue");
 
 export default {
   install: (app: App) => {
-    Object.keys(components).forEach((key: string) => {
-      const component = components[key].default;
-      app.component(component.name, component);
+    Object.values(components).forEach(component => {
+      app.component(component.default.name, component.default);
     });
   }
 };

docs/.vitepress/config.js

@@ -50,6 +50,10 @@ module.exports = {
         {
           text: "服务",
           children: [{ text: "搜索", link: "/service/search" }]
+        },
+        {
+          text: "扩展",
+          children: [{ text: "车辆轨迹", link: "/extra/car-track" }]
         }
       ]
     }

docs/.vitepress/theme/index.js

@@ -7,7 +7,8 @@ export default {
   enhanceApp({ app }) {
     app.use(VueTianditu, {
       v: "4.0",
-      tk: "7f013d0186775b063d6a046977bbefc6"
+      tk: "7f013d0186775b063d6a046977bbefc6",
+      plugins: ["CarTrack"]
     });
     app.use(components);
   }

docs/extra/car-track.md

@@ -0,0 +1,26 @@
+# 搜索
+
+## 示例
+
+<demo-car-track></demo-car-track>
+
+<code-details>
+<<< @/.vitepress/components/demo-car-track/index.vue
+</code-details>
+
+## 属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| interval | number | 1000 | 从当前节点到下一节点的时间间隔 |
+| speed | number | 0 | 一个时间间隔移动的距离，单位是米。注：speed 为 0 时，按照 Datas 数组中每个元素的坐标移动 |
+| dynamicLine | boolean | false | 为 true 时轨迹线随车移动，而变化。false 时，车辆运动轨迹提前画好且无动态变化 |
+| Datas | array | [] | 数据来源。经纬度数组：[[116.26802, 39.90623],[116.28896, 39.90622],...] |
+| carstyle | Object | ({ display: true, iconUrl: "car.png", width: 52, height: 26 }) | 车辆样式 |
+| polylinestyle | Object | ({ display: true, color: "red", width: 3, opacity: 0.8 }) | 车辆轨迹线样式 |
+
+## 事件
+
+| 事件 | 参数 | 描述 |
+| --- | --- | --- |
+| passOneNode | (lnglat: VT.LngLat, index: number, length: number) | 车辆移动一次时触发调用的方法。 lnglat：经过的坐标 index：节点序号 length:总节点数量 |

packages/components.ts

@@ -15,3 +15,4 @@ export * from "./tilelayer/tdt";
 export * from "./tilelayer/wms";
 export * from "./tilelayer/gridlineLayer";
 export * from "./service/search";
+export * from "./extra/cartrack";

packages/extra/cartrack/index.ts

@@ -0,0 +1,52 @@
+import { defineComponent, watch, onBeforeMount, onUnmounted, getCurrentInstance, isVue2 } from "vue-demi";
+import { useMapRoot } from "../../use";
+import { useInit, PROPS, EVENTS } from "./use";
+
+export const TdtCarTrack = defineComponent({
+  name: "TdtCarTrack",
+  props: PROPS,
+  emits: EVENTS,
+  setup(props, { emit, expose }) {
+    onBeforeMount(async () => {
+      onUnmounted(() => tdtComponent?.clear());
+
+      expose?.({ start, pause, stop, clear });
+      if (isVue2) {
+        const vm = getCurrentInstance()?.proxy as any;
+        vm.star = start;
+        vm.paus = pause;
+        vm.sto = stop;
+      }
+
+      const tdtMap = await useMapRoot();
+      let tdtComponent: T.CarTrack | null = null;
+      watch(
+        () => props.Datas,
+        val => {
+          tdtComponent?.clear();
+          tdtComponent = null;
+          if (!val.length) return;
+          tdtComponent = useInit(props, emit, tdtMap);
+          emit("init", tdtComponent);
+        },
+        { immediate: true }
+      );
+
+      function start() {
+        tdtComponent?.start();
+      }
+      function pause() {
+        tdtComponent?.pause();
+      }
+      function stop() {
+        tdtComponent?.stop();
+      }
+      function clear() {
+        tdtComponent?.clear();
+      }
+    });
+    return () => {};
+  }
+});
+
+export type TdtCarTrack = InstanceType<typeof TdtCarTrack>;