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	是否展示小车行驶的时刻数据

🙏🙏🙏 在线求Star

如果您觉得这个项目还不错, 可以在 Github 上面帮我点个star, 支持一下作者

普通使用

项目开始

pnpm install

或者

npm install

运行

npm run dev

效果展示

如果没有动态图展示，可能网速不好，请刷新重试

多轨迹,不同车辆轨迹颜色不一样

小车移动,轨迹留痕,暂停,重置,展示当前时刻的小车数据

使用说明

普通使用把下面这个注释掉

@/packages/index.vue

// npm包所需: 按需引入element组件
  import 'element-plus/dist/index.css'
  import {
    ElCheckbox, ElCheckboxGroup, ElImage
  } from 'element-plus'
  // npm包所需: no.css
  import 'virtual:uno.css'

坐标转换问题

注意这里的坐标，根据你用的是默认的OSM瓦片层new TileLayer({ source: new OSM() })

那么这里你需要用transform把后端给你的坐标转换成投影坐标系

@/core/DrawTracks.js

singleTrack(trackLineCoordinate, currentTrackColor) {
    let coordinates = trackLineCoordinate.map(item => {
      let { longitude, latitude } = item
      return transform([longitude, latitude], "EPSG:4326", "EPSG:3857")
      // return [longitude, latitude]
    })

瓦片地图

因为隐私问题，demo中的瓦片地址改成了自带的OSM，地图展示的UI和上方面的demo有出入。开发者请使用改成你们内部的瓦片源地址

更改位置：

@/packages/index.vue

  const initMap = () => {
    // 初始化地图对象
    map.value = new Map({
      // 设置地图图层
      layers: [
        // 创建一个使用Open Street Map地图源的瓦片图层
        new TileLayer({ source: '此处写你们自己的瓦片引入方式和地址' }),
      ],
      // ...
    });
  };

OSM瓦片形式的地图UI