Vue3 使用天地图绘制车辆历史轨迹

最新推荐文章于 2024-11-29 17:00:09 发布

原创

最新推荐文章于 2024-11-29 17:00:09 发布 · 5.3k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #typescript #前端

Vue3中使用天地图，自定义出车辆历史轨迹如下

在这里插入图片描述

1. 引入

在index.html 中引入天地图在线链接

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    德清餐厨垃圾收运处置监管平台
  </title>
  //引入天地图在线链接 tk 为你自己申请的tk
  <script src="https://api.tianditu.gov.cn/api?v=3.0&tk=你申请的tk"
    type="text/javascript"></script>
  <script src="http://lbs.tianditu.gov.cn/js/lib/jquery/jquery-1.7.2.min.js"></script>
  <!-- ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app">
  </div>
</body>
</html>

2. 使用

<template>
  <div>
    <!-- 车辆监督 -->
    <div id="map" :style="{ height: mapHeight }">
      <div id="mapDiv" ref="mapDiv"></div>
      <div style="display: none" id="guijimap" ref="guijimap"></div>
    </div>
    <!--车辆轨迹框部分-->
    <div v-if="carTrack" class="tabbable-line guijitabbox carguiJiTabBox">
      <div class="tab-content">
        <div class="tab-pane active in" id="tab2_1" style="text-align: center">
          <p style="font-size: 16px; color: #000">
            <span id="carguijititle">{
   
   {
   
    name }}</span>
          </p>
          <form role="form" class="form-horizontal">
            <div class="form-body">
              <div class="form-group">
                <label class="col-sm-3 control-label" for="form_control_1"
                  >日期</label
                >
                <div class="col-sm-7">
                  <a-date-picker
                    locale='locale'
                    @change="dateTimeChange(1, $event)"
                    v-model:value="timeDate.date"
                    format="YYYY-MM-DD"
                    :disabled-date="disabledDate"
                    style="width: 100%"
                    placeholder="选择日期"
                  />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label" for="form_control_1"
                  >时刻</label
                >
                <div class="col-sm-7">
                  <div class="input-group fl">
                    <a-time-picker
                      v-model:open="open1"
                      style="width: 92px"
                      v-model:value="timeDate.startTime"
                      valueFormat="HH:mm:ss"
                      placeholder=""
                    >
                      <template #addon>
                        <a-button
                          size="small"
                          type="primary"
                          @click="dateTimeChange(2, $event)"
                          >确定</a-button
                        >
                      </template>
                    </a-time-picker>
                  </div>
                  <span class="fl" style="margin-top: 5px"
                    >&nbsp; ~ &nbsp;</span
                  >
                  <div class="input-group fl">
                    <a-time-picker
                      v-model:open="open2"
                      style="width: 92px"
                      v-model:value="timeDate.endTime"
                      valueFormat="HH:mm:ss"
                      placeholder=""
                    >
                      <template #addon>
                        <a-button
                          size="small"
                          type="primary"
                          @click="dateTimeChange(3, $event)"
                          >确定</a-button
                        >
                      </template>
                    </a-time-picker>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <!-- 轨迹播放快慢 -->
                <label class="col-sm-3 control-label" for="form_control_1"
                  >轨迹播放</label
                >
                <div class="col-sm-9" style="padding-left: 0; margin-top: 8px">
                  <!-- <span class="fl"> 慢</span> -->
                  <span
                    ><a-slider
                      :min="1"
                      @change="sliderChange"
                      style="width: 74%"
                      id="test"
                      v-model:value="timeDate.rangeValue"
                  /></span>
                  <!-- <span class="fl"> 快</span> -->
                </div>
              </div>
            </div>
          </form>

          <a-button
            v-if="startgj"
            @click="startTrack"
            style="padding: 0 5px; margin-right: 10px; color: '#5f5f5f'"
            ><template #icon><CaretRightOutlined /></template>开始
          </a-button>
          <a-button
            v-else
            @click="pauseTrack"
            style="padding: 0 5px; margin-right: 10px; color: '#5f5f5f'"
            ><template #icon><CaretRightOutlined /></template>暂停
          </a-button>
          <a-button
            @click="stopTrack"
            style="padding: 0 5px; margin-right: 10px"
            ><template #icon><CloseSquareFilled /> </template>结束
          </a-button>

          <a-button style="padding: 0 5px" @click="carTrackReturn"
            ><template #icon><RollbackOutlined /></template>返回
          </a-button>

          <div ref="time_box" style="width: 100%; margin-top: 10px">
            <div
              id="carguijiscroller"
              class="scroller tabselbox"
              data-rail-visible="1"
              data-rail-color="#ececec"
              data-handle-color="#bcbcbc"
              style="width: 100%; height: 350px; overflow: auto"
            >
              <p
                v-for="(item, i) in timeList"
                :key="i"
                class="showcarpoint gjtimelist"
                @click="clickCar(item, i)"
              >
                <i class="guijinumlist">{
   
   {
   
    i }}</i
                ><span>{
   
   {
   
    item.time }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import {
   
   
  ref,
  reactive,
  toRefs,
  defineComponent,
  onMounted,
  getCurrentInstance,
} from "vue";
import {
   
   
  CarOutlined,
  DownOutlined,
  CaretRightOutlined,
  CloseSquareFilled,
  RollbackOutlined,
} from "@ant-design/icons-vue";
import {
   
    message } from "ant-design-vue";
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import moment, {
   
    Moment } from "moment";
import 'moment/dist/locale/zh-cn';

import {
   
    format, } from "@/utils/util";
import {
   
    getcars_page, getcartrajectory_by_cid_time } from "@/api/system/api";
export default defineComponent({
   
   
  components: {
   
   
    CarOutlined,
    DownOutlined,
    CaretRightOutlined,
    CloseSquareFilled,
    RollbackOutlined,
  },
  setup() {
   
   
    // 在ts中直接使用 const { ctx }=getCurrentInstance().可能会报 Property 'ctx' does not exist on type 'ComponentInternalInstance | null'. 的错误.
    let {
   
    ctx } = getCurrentInstance();
    let state = reactive({
   
   
      count: 0,
      map: "",
      guijimap: "",
      zoom