OpenLayers实现小车的轨迹查询的功能

支持实现的功能

• 限制3天的时间跨度
• 小车在运动中改变速度
• 小车重新运动
• 小车运动的点位支持打开详情信息

这是自己当时刚从后端切到前端时，实现的第一个功能，当时都没有接触过前后端分离的开发模式，更不知道react,抱着现学现做的态度做的…，可能有需要的同学，做个参考吧。

import React, {
   Component} from 'react';
import {
   DatePicker, Input, Icon, Button, Table, Progress, Slider, notification} from 'antd';
import ol from 'openlayers';
import moment from 'moment';
import axios from 'axios';
import playback from '../../Images/playback.png';
import speedcar from '../../Images/car.png';
import move from '../../Images/move.png';
import direction from '../../Images/direction.png';
import stop from '../../Images/stop.png';
import daemarker from '../../Images/direction.png';
import './CarMove.less';
import 'openlayers/css/ol.css';

const RangePicker = DatePicker.RangePicker;

//地图上原先的vector
let prevVector;
//确定地图放缩级别
let zoomSize = [100, 200, 500, 1000, 2000, 8000, 14000, 20000, 25000, 50000, 100000, 200000, 500000, 1000000, 2000000];
let zoomlevel = [17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3];

class CarMove extends Component {
   

    constructor(props) {
   
        super(props);
        this.state = {
   
            columns: [],                   //table的表头信息
            DAENumber: '',                 //默认的编号
            DAEStatus: '',                 //默认的状态
            DEAAddress: '',                //默认的地址
            queryKeyWord: this.props.keyword === undefined ? '' : this.props.keyword,             //用户输入的查询关键字
            pathTableData: [],             //table中的数据
            scrollPathTableHeight: '',     //设置table出现滑动条的高度
            userChooseStartTime: this.props.starttime === undefined ? '' : this.props.starttime,  //用户选择的起始时间
            userChooseEndTime: this.props.endtime === undefined ? '' : this.props.endtime,        //用户选择的结束时间
            defaultShowBtnFlag: this.props.showBtnFlag === undefined ? false : this.props.showBtnFlag, //用户传入是否显示返回按钮
            defaultModeFlag: this.props.modeFlag === undefined ? false : this.props.modeFlag,     //区分用户进入方式
            tableBodyData: [],             //默认查询到的数据的总条数
            showAdjustSpeed: false,        //默认的调节小车行驶的进度条不显示
            carProgerss: 0,                //默认的小车在轨迹上行驶的进度
            canRefreshAnimation: true,     //默认小车的重新运动按钮可用
            mapCenterLongitude: 105.442574, //默认的地图显示中心的经度
            mapCenterLatitude: 28.871718,  //默认的地图显示中心的纬度
            mapUrl: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'//默认的在线地图的服务地址
        }
        this.map = null;                          //定义的地图容器句柄
        this.marker = null;                       //默认点击出现弹出框
        this.index = 0;                    //默认的小车在轨迹的位置
        this.defaultCarSpeed = 12;         //默认小车的行驶速度
    }

    //构造查询轨迹table的头信息
    // eslint-disable-next-line react/sort-comp
    generateTableHeaderData() {
   
        const columns = [
            {
   title: '采集时间', dataIndex: 'column0', key: '1', width: 150, align: 'center'},
            {
   title: '采集器序列号', dataIndex: 'column1', key: '2', width: 150, align: 'center'},
            {
   title: '位置', dataIndex: 'column2', key: '3', width: 180, align: 'center'}
        ];
        this.setState({
   
            columns: columns
        })
    }

    // 输入插叙的关键字
    userInputKeyWord = (e) => {
   
        this.setState({
   
            queryKeyWord: e.target.value
        })
    }

    //清空输入的查询关键词
    clearUserKeyWord = () => {
   
        this.setState({
   
            queryKeyWord: ''
        })
    }

    //用户选择查询的时间时
    userChangeQueryTime = (date, dateString) => {
   
        this.setState({
   
            userChooseStartTime: dateString[0],
            userChooseEndTime: dateString[1]
        })
    }

    //用户点击查询轨迹
    getPathDatas = () => {
   
        let mapData = [], tableData = [];
        let queryKey = this.state.queryKeyWord;
        //当用户选择的时间间隔超过三天的给出提示
        let startTime = this.state.userChooseStartTime;
        let endTime = this.state.userChooseEndTime;
        //把时间转化为毫秒，计算差值
        let time = new Date(endTime).getTime() - new Date(startTime).getTime();
        //必填项的校验
        if (queryKey === "" || queryKey == null) {
   
            notification.warn({
   
                message: '输入的车牌号或标签号不能为空',
                description: `请重新输入车牌号或者标签号进行查询`,
                duration: 3,
                placement: 'bottomRight'
            });
            return;
        }
        if (startTime === "" || endTime === "") {
   
            notification.warn({
   
                message: '请选择查询的时间段',
                description: `查询的时间段不能为空，请重新选择时间进行查询`,
                duration: 3,
                placement: 'bottomRight'
            });
            return;
        }
        if (time > 259200000) {
   
            notification.warn({
   
                message: '时间间隔不能超过三天',
                description: `查询的时间段不能超过三天，请重新选择时间进行查询`,
                duration: 3,
                placement: 'bottomRight'
            });
            return;
        }

        //数据请求的方法
        var url = "http://localhost:8080/getAllDaeInfo";
        axios.get(url).then(function (response) {
   
            console.log("response-------------->", response.data);
        }).catch(function (error) {
   
            console.log(error);
        });


        let enterTime, daeStatus, longitude, latitude, maxDistance = 0, distance = 0;
        let carPathData = new Array();
        //生成模拟数据
        for (let i = 0; i < 20; i++) {
   
            let time = Date.now() + i * 1000;
            let carPathDataItem = {
   };
            carPathDataItem.collectTime = time;
            carPathDataItem.devStatus = 0;
            carPathDataItem.devId = 'ts10001' + i;
            carPathDataItem.devAddr = 'XX市市测试区测试街道' + i;
            carPathDataItem.longitude = 107.4425790689 + Math.random() * (i + 1) / 500;
            carPathDataItem.latitude = 29.8717183035 + Math.random() * (i + 1) / 500;
            carPathData.push(carPathDataItem);
        }


        for (let i = 0; i < carPathData.length; i++) {
   
            enterTime = moment(carPathData[i].collectTime).format("YYYY-MM-DD HH:mm:ss");
            if (carPathData[i].devStatus === 0) {
   
                daeStatus = "离线";
            } else {
   
                daeStatus = "在线";
            }
            //计算经纬度之间最大的距离
            if (i < carPathData.length - 1) {
   
                distance = this.getDistance(carPathData[i].latitude, carPathData[i].longitude, carPathData[i + 1].latitude, carPathData[i + 1].longitude);