vue3-openlayer-track

github仓库地址

展示效果和更多介绍请移步：

https://github.com/mrcluo/vue3-openlayer

npm包使用

pnpm add vue3-openlayer-track

或者

yarn add vue3-openlayer-track

或者

npm install vue3-openlayer-track

在项目scr/main.js

import Vue3OpenlayerTrack from "vue3-openlayer-track"
import "vue3-openlayer-track/style.css"

// import { createApp } from 'vue'
// const app = createApp(App)
app.use(Vue3OpenlayerTrack)

业务文件中就可正常使用了

<template>
  <div class="about">
    <vue3-openlayer-track  
      :showHeader="showHeader" 
      :streams="data"/>
  </div>
</template>
<script setup>
  import { ref } from "vue";
  import { streamData } from "@/core/data";
  const data = ref([]);
  data.value = streamData;
  const showHeader = ref(true);
  {/* const colors = ref([
    [220, 30, 60, 0.9],
    [255, 165, 0, 0.9],
    [255, 255, 0, 0.9],
    [0, 128, 0, 0.9],
    [0, 0, 255, 0.9],
    [0, 255, 255, 0.9],
  ]);
  const source = ref("");
  const showDetails = ref(true);
  const height = ref("width:100%;height: calc(100vh - 209px);"); */}
</script>

组件提供了六个属性

streams	轨迹坐标数组，数据格式 * 必须(src/core/data.js)
colors	多轨迹的颜色
source	瓦片图的源(目前项目用的官方的,可换成自己的)
height	地图的自定义高
showHeader	是否展示地图的头部车辆信息
showDetails	是否展示小车行驶的时刻数据