Vue.js与Leaflet.js结合实现的渔船定位与历史轨迹回放功能

本文链接：https://blog.csdn.net/m0_54340021/article/details/140852096

在海洋渔业领域，对渔船的有效监控和管理至关重要。随着信息技术的不断发展，特别是GIS（地理信息系统）和Web技术的应用，我们能够更加精确和实时地追踪渔船的位置，并分析其历史航行数据。本文将介绍一个基于Vue.js和Leaflet.js开发的渔船识别定位与历史轨迹回放系统，该系统不仅提高了渔业管理的效率，还增强了海上安全监控的能力。

系统概述

该系统是一个综合性的渔船监控解决方案，它集成了渔船的实时定位、搜索识别、历史轨迹查询和回放等功能。通过一个用户友好的界面，管理人员可以轻松地获取渔船的详细信息，并分析其航行路径。

核心功能

1. 渔船实时定位

系统提供了一个基于地图的用户界面，可以实时显示渔船的位置。通过渔船的船名、呼号、MMSI或IMO号码，用户可以快速搜索并定位到特定的渔船。

2. 渔船信息展示

当用户搜索到渔船后，系统会展示该渔船的详细信息，包括但不限于AIS信息、船长、宽度、吃水、船旗、状态、经度和纬度等。

3. 历史轨迹查询

用户可以指定一个时间范围，系统将查询并展示该时间段内渔船的航行轨迹。这一功能对于分析渔船的航行行为和优化航线具有重要意义。

4. 历史轨迹动画回放

系统支持将查询到的历史轨迹以动画的形式在地图上回放，使得历史数据更加生动和直观。

技术实现

系统前端采用Vue.js框架进行开发，利用其响应式和组件化的特点，构建了一个动态且易于维护的用户界面。地图功能通过集成Leaflet.js实现，它是一个开源的JavaScript库，用于制作交互式地图。

关键代码示例

这里提供的代码块仅展示了部分关键功能，以帮助读者理解整个实现过程，完整的代码和项目资源可以在个人中心-资源库获取

<template>
  <el-container>
    <div class="mapContent">
      <div class="searchBar">
        <div class="top">
          <!-- 搜索输入框区域 -->
        </div>
        <div class="bottom" v-show="isFocused">
          <!-- 最近搜索内容区域 -->
        </div>
        <div class="bottomInfo" v-show="!isFocused && isDeatil">
          <!-- 渔船信息和历史轨迹展示区域 -->
        </div>
      </div>
      <div id="mapDiv" ref="mapDiv" class="divTdtMap"></div>
      <el-button class="backMap" :disabled="isAnimationRunning" @click="backMap" v-if="isShowTrack">返回按钮</el-button>
    </div>
  </el-container>
</template>

<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export default {
  data() {
    return {
      map: null,
      // ...省略数据定义代码
    }
  },
  mounted() {
    // 地图初始化方法
    this.initMap();
  },
  methods: {
    // 初始化地图
    initMap() {
      this.map = L.map("mapDiv", {
        center: [21.582007, 111.824558],
        zoom: 15,
        zoomControl: false,
        doubleClickZoom: true,
        attributionControl: true,
      });
      L.tileLayer(
        "...省略部分"
      ).addTo(this.map);
      // 调用接口
      fishboatList(this.page).then(res=>{
        console.log(res,'获取所有船只');
        if( res.code == 200){
          this.shipData = res.data.records
          console.log(this.shipData,'所有船只');
          this.$message({
            type: "success",
            message: "船只搜索成功!",
          });
          this.addShipsToMap();
        }
      })
      
    },
    // 添加地图上的船只图标
    addShipsToMap() {
      const shipIcon = L.icon({
        iconUrl: require('@/assets/images/fishingBoat/boatMarker.png'),
        iconSize: [32, 32],
        iconAnchor: [16, 32],
        popupAnchor: [0, -32]
      });

      this.shipData.forEach(ship => {
        const marker = L.marker([ship.shipLatitude, ship.shipLongitude], { icon: shipIcon })
          .addTo(this.map);
        // 省略...Popup信息框内容添加，包含关闭按钮
        marker.bindPopup(popup);
        marker.on('click', () => {
        });
        this.markers.push(marker);
      });
    },
    // 点击轨迹回放
    queryTrack() {
      //...省略部分内容操作
      const trackList = this.trackList
      this.animateTrack(trackList);
    },
    // 轨迹动画绘制函数
    animateTrack(trackList) {
      console.log('Track List:', trackList);
      // 创建线段数组，每个线段由起点和终点坐标及时间组成
      const segments = trackList.map((point, index) => {
        if (index < trackList.length - 1) {
          return {
            start: L.latLng(point.shipLatitude, point.shipLongitude),
            end: L.latLng(trackList[index + 1].shipLatitude, trackList[index + 1].shipLongitude),
            creatorTime: point.creatorTime
          };
        } else {
          return {
            start: L.latLng(point.shipLatitude, point.shipLongitude),
            end: L.latLng(point.shipLatitude, point.shipLongitude), // 终点和起点相同
            creatorTime: point.creatorTime
          };
        }
      });
      // 动画函数
      const animate = () => {
        // 设置定时器，继续动画
        setTimeout(animate, interval);
      };
      animate();
    },
  },
  beforeDestroy() {
  },

}
</script>


<style lang="scss" scoped>
</style>