icore-pass/src/views/OYE/components/mapTest.vue

<template>
  <div class="container">
    <div id="amap-container"></div>
    <div class="mapcontroller">
      <div class="in_transit_information">
        <label class="item_details">起点:{{ startPointName }}</label>
        <br />
        <label class="item_details">收货地址:{{ endPointName }}</label>
        <br />
      </div>
      <div class="driving_information2">
        <label class="item_details">时间:{{ runRoute.gtm }}</label>
        <br />
        <label class="item_details">车速:{{ runRoute.spd }}千米/小时</label>
        <br />
        <br />
        <!--控制条-->
        <div class="map-control" v-show="isActual">
          <!--播放暂停按钮-->
          <Icon
            v-if="!isPlay"
            class="play-icon play"
            type="ios-play"
            @click="
              isPlay = true
              play()
              navgControl(playIcon)
            "
          />
          <Icon
            v-else
            class="play-icon pause"
            type="ios-pause"
            @click="
              isPlay = false
              stop()
              navgControl('pause')
            "
          />
          <Icon class="play-icon quickly" type="ios-play" @click="addIndex()" />
          <!--已播放时间-->
          <!--进度条-->
          <div class="mySlider">
            <Slider
              class="map-slider"
              v-model="sliderVal"
              :tip-format="hideFormat"
              :step="0.0001"
            ></Slider>
          </div>
        </div>
      </div>
    </div>
    <el-row>
      <el-button type="primary" @click="slow">慢速</el-button>
      <el-button type="success" @click="middle">中速</el-button>
      <el-button type="danger" @click="fast">快速</el-button>
      <el-button type="success" @click="addIndex" plain>快进</el-button>
      <el-button type="danger" @click="stop" plain>暂停</el-button>
      <el-button type="success" @click="play" plain>开始</el-button>
      <el-select
        style="width:100px"
        @change="changeParkingTime"
        v-model="parkingTime"
        placeholder="停车"
      >
        <el-option
          v-for="item in parkingOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        style="width:100px"
        @change="changeLeaveTime"
        v-model="leaveTime"
        placeholder="离线"
      >
        <el-option
          v-for="item in parkingOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-row>
    <div class="btnx">
      <el-button type="primary" class="" @click="openInfo"
        >打开信息窗体</el-button
      >
      <el-button type="primary" class="" @click="closeinfo"
        >关闭信息窗口</el-button
      >
    </div>
  </div>
</template>

<script>
import { shallowRef } from '@vue/reactivity'
import { lazyAMapApiLoaderInstance } from 'vue-amap'
import Slider from './slider.vue'
import { getCookie } from '@/utils/util.js'
Vue.use(Slider)
import Vue from 'vue'
var infoWindow
export default {
  name: 'PathView',
  props: {
    orderNumber: '',
    capacityNumber: '',
    startPointName: '',
    endPointName: '',
    statusCode: ''
  },
  setup() {
    const map = shallowRef(null)
    return {
      map
    }
  },
  watch: {
    //监听车牌号变化
    orderNumber: {
      deep: true,
      handler(val, oldVal) {
        console.log(val)
        this.initData(val)
      }
    }
  },
  data() {
    return {
      ///che
      isTimesChoose: false,
      isActual: true,
      isPlay: false,
      passedTime: '12:02:10',
      sliderVal: 0,
      times: 1,
      totalTime: '11',
      speed: 10000,
      startTime: '',
      endTime: '',
      //选择停车时长
      parkingTime: null,
      //停车时长选择区间
      parkingOptions: [
        {
          value: 600000,
          label: '10分钟'
        },
        {
          value: 1200000,
          label: '20分钟'
        },
        {
          value: 1800000,
          label: '30分钟'
        },
        {
          value: 2400000,
          label: '40分钟'
        },
        {
          value: 3000000,
          label: '50分钟'
        },
        {
          value: 3600000,
          label: '60分钟'
        },
        {
          value: 36000000,
          label: '关闭'
        }
      ],
      //离线图标
      leaveMark: [],
      //停车图标
      parkMark: [],
      //选择离线时长
      leaveTime: null,
      //离线时长选择区间
      leaveOptions: [
        {
          value: 600000,
          label: '10分钟'
        },
        {
          value: 1200000,
          label: '20分钟'
        },
        {
          value: 1800000,
          label: '30分钟'
        },
        {
          value: 2400000,
          label: '40分钟'
        },
        {
          value: 3000000,
          label: '50分钟'
        },
        {
          value: 3600000,
          label: '60分钟'
        },
        {
          value: 36000000,
          label: '关闭'
        }
      ],
      //已行驶轨迹
      runRoute: {
        agl: '',
        gtm: '',
        hgt: '',
        lat: '',
        lon: '',
        mil: '',
        spd: ''
      },
      point: '',
      pointNext: '',
      loading: null,
      navgtrSpeed: 1,
      //地图中心位置
      centerPoint: {
        pointLat: '',
        pointLon: ''
      },
      //自定义窗体信息
      ctmarkes: {
        lat: '33.015888071433764',
        lon: '115.96995235868168',
        title: '豫SE8888',
        details: '安徽省阜阳市颍东区阜阳舜岳水泥公司,西北方向,155.1米'
      },
      //运输详情
      transportDetail: {
        //车牌号
        capacityNumber: '',
        //规划路线
        estimateRoute: [
          {
            lat: '33.015888071433764',
            lon: '115.96995235868168'
          }
        ],
        //规划线路
        estimatePath: [[114.03046212985384, 32.49786984660489]],
        //已行驶轨迹
        runRoute: [
          {
            agl: '44',
            gtm: '2022年03月09日 16:47:24',
            hgt: '13',
            lat: '32.906411535084985',
            lon: '115.76177868692135',
            mil: '429409.2',
            spd: '17.0'
          }
        ],
        runPath: [[114.03922119568348, 32.49746162481379]],
        //当前位置
        currentPointName: '中国达州市通川区',
        //当前位置经纬度
        currentPoint: {
          lat: '',
          lon: ''
        },
        //起点位置
        startPointName: '中国达州市通川区',
        //起点位置经纬度
        startPoint: {
          lon: '114.03922119568348',
          lat: '32.49746162481379'
        },
        //终点位置
        endPointName: '中国成都萧山',
        //终点位置经纬度
        endPoint: {
          lon: '115.96995737755431',
          lat: '33.01595479752097'
        },
        //自定义标记
        content: [],
        //异常位置
        abnormalLocation: []
      },
      listPath: [],
      //组件
      pathSimplifierIns: {},
      pathNavigator: {},
      //地图解析
      geocoder: null,
      currentPointName: ''
    }
  },
  created() {
    let that = this
    that.initData(that.orderNumber)
  },
  mounted() {},
  methods: {
    //停车时间改变
    changeParkingTime() {
      let that = this
      //清除之前的停车点
      that.hideParkingMark()
      //计算时间的点
      let calculationPoint = null
      that.listPath[0].runRoute.forEach(function(item, indexOf) {
        if (indexOf + 1 < that.listPath[0].runRoute.length) {
          //判断calculationPoint是否为空，如果是空的说明当前没有在计算停车时间
          if (calculationPoint == null && item.spd == '0.0') {
            calculationPoint = item
          } else if (calculationPoint != null && item.spd != '0.0') {
            let beforeTime = that.stringToDate(calculationPoint.gtm)
            let item2 = that.listPath[0].runRoute[indexOf]
            let afterTime = that.stringToDate(item2.gtm)
            let second = afterTime - beforeTime
            if (second > that.parkingTime) {
              let message = '停车:' + second / 60000
              that.initParkingMarkes(
                20,
                35,
                require('@/assets/img/park.png'),
                calculationPoint.lon,
                calculationPoint.lat,
                message.split('.')[0] + '分钟'
              )
            }
            calculationPoint = null
          }
        }
      })
    },
    //字符串转为Date
    stringToDate(dateString) {
      console.log(dateString)
      let dateStr = dateString
        .replace('年', '-')
        .replace('月', '-')
        .replace('日', '')
      return Date.parse(dateStr)
    },
    //停车所有离线图标
    hideParkingMark() {
      let that = this

      that.parkMark.forEach(function(item, indexOf) {
        item.hide()
      })
    },
    //离线时间改变时获得超过时间的点信息
    changeLeaveTime() {
      let that = this
      //关闭所有图标
      that.hideLeaveMark()
      that.listPath[0].runRoute.forEach(function(item, indexOf) {
        if (indexOf + 1 < that.listPath[0].runRoute.length) {
          let beforeTime = that.stringToDate(item.gtm)
          let item2 = that.listPath[0].runRoute[indexOf + 1]
          let afterTime = that.stringToDate(item2.gtm)
          let second = afterTime - beforeTime
          if (second > that.leaveTime) {
            let message = '离线:' + second / 60000
            that.initLeaveMarkes(
              20,
              35,
              require('@/assets/img/leave.png'),
              item2.lon,
              item2.lat,
              message.split('.')[0] + '分钟'
            )
          }
        }
      })
    },
    //关闭所有离线图标
    hideLeaveMark() {
      let that = this
      that.leaveMark.forEach(function(item, indexOf) {
        item.hide()
      })
    },
    slow() {
      console.log('slow')
      let that = this
      that.pathNavigator.setSpeed(1000)
    },
    middle() {
      console.log('middle')
      let that = this
      that.pathNavigator.setSpeed(10000)
    },
    fast() {
      console.log('fast')
      let that = this
      that.pathNavigator.setSpeed(100000)
    },
    play() {
      let that = this
      that.pathNavigator.resume()
    },
    stop() {
      let that = this
      that.pathNavigator.pause()
    },
    addIndex() {
      let that = this
      let increment = that.listPath[0].runPath.length * 0.1
      let result = that.point + increment
      if (result < that.listPath[0].runPath.length) {
        that.pathNavigator.start(that.point + increment)
      } else {
        that.pathNavigator.start(that.listPath[0].runPath.length - 1)
      }
    },
    ///che
    navgControl() {},
    hideFormat(value) {
      let that = this
      that.sliderVal = value
    },
    initParkingMarkes(weight, height, image, lon, lat, title) {
      let that = this
      //图标标记点
      let pointicon = new AMap.Icon({
        size: new AMap.Size(weight, height), // 图标尺寸
        image: image, // Icon的图像
        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
      })
      // 创建一个 Marker 实例：
      var pointmarker = new AMap.Marker({
        position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: pointicon,
        title: title
      })
      that.parkMark.push(pointmarker)
      // 将创建的点标记添加到已有的地图实例：
      that.map.add(pointmarker)
    },
    //创建离线和停车的标记
    initLeaveMarkes(weight, height, image, lon, lat, title) {
      let that = this
      //图标标记点
      let pointicon = new AMap.Icon({
        size: new AMap.Size(weight, height), // 图标尺寸
        image: image, // Icon的图像
        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
      })
      // 创建一个 Marker 实例：
      var pointmarker = new AMap.Marker({
        position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: pointicon,
        title: title
      })
      that.leaveMark.push(pointmarker)
      // 将创建的点标记添加到已有的地图实例：
      that.map.add(pointmarker)
    },
    initData(orderNumber) {
      let that = this
      if (this.map) {
        this.map.destroy()
      }
      that.axios
        .post('/api/v1/otms/fullPath?orderNumber=' + orderNumber)
        .then(res => {
          console.log(res.data)
          if (res.data.data == '-1') {
            this.$message.error('运输订单未关闭的自提车辆无权查看!')
          } else if (res.data.data.startAndEndRoutes != null) {
            that.listPath = res.data.data.startAndEndRoutes
            that.startTime = res.data.data.startAndEndRoutes[0].runRoute[0].gtm
            that.endTime =
              res.data.data.startAndEndRoutes[0].runRoute[
                res.data.data.startAndEndRoutes[0].runRoute.length - 1
              ].gtm
            that.initMap()
          } else {
            that.listPath = []
            this.$message.error('车辆没有开启GPS')
          }
        })
    },
    endline() {
      let that = this
      that.initPolyline(that.listPath[0].estimatePath, '#FF0000')
    },
    //创建起点终点当前点
    threeMarker() {
      let that = this
      that.listPath.forEach((element, index) => {
        //开始标记点
        if (element.startPoint.lon != '' && element.startPoint.lat != '') {
          that.initMarkes(
            20,
            35,
            require('@/assets/img/start.png'),
            element.startPoint.lon,
            element.startPoint.lat,
            '起点'
          )
        }
        //当前点
        that.getCurrentPointName([
          element.runRoute[element.runRoute.length - 1].lon,
          element.runRoute[element.runRoute.length - 1].lat
        ])
        //结束标记点
        // if (element.endPoint.lon != '' && element.endPoint.lat != '') {
        //   that.initMarkes(
        //     20,
        //     35,
        //     require('@/assets/img/end.png'),
        //     element.endPoint.lon,
        //     element.endPoint.lat,
        //     '终点'
        //   )
        // }
      })
    },
    //获得结束地址
    getCurrentPointName(lnglatXY) {
      let that = this
      that.geocoder.getAddress(lnglatXY, function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
          that.currentPointName = result.regeocode.formattedAddress
          let content =
            that.statusCode +
            '：' +
            that.currentPointName +
            '<br/>' +
            '距离：' +
            that.listPath[0].miled +
            '<br/>' +
            '时间范围：' +
            that.startTime +
            ' 至 ' +
            that.endTime
          if (
            getCookie('orgCode') != 'wuliuyunshubu' &&
            getCookie('orgCode') != 'shichangxinxibu' &&
            getCookie('orgCode') != 'caiwubu'
          ) {
            content =
              that.statusCode +
              '：' +
              that.currentPointName +
              '<br/>' +
              '时间范围：' +
              that.startTime +
              ' 至 ' +
              that.endTime
          }
          that.initCustomMarkes(
            that.capacityNumber,
            content,
            lnglatXY[0],
            lnglatXY[1]
          )
        }
      })
    },
    //defualt数据
    defaultDate() {
      // let that=this;
      // that.pathNavigator.start(that.listPath[0].runPath.length)
      // that.pathNavigator.pause();
    },
    //初始化地图
    initMap() {
      lazyAMapApiLoaderInstance.load().then(() => {
        let that = this
        that.map = new AMap.Map('amap-container', {
          //设置地图容器id
          viewMode: '2D', //是否为2D地图模式
          zoom: 10, //初始化地图级别
          center: [105.602725, 37.076636] //初始化地图中心点位置
        })
        that.initGeocoder()
        that.initPathSimplifier()
        that.threeMarker()
        //that.initCustomMarkes(that.capacityNumber+"("+that.listPath[0].miled+")",that.listPath[0].currentPointName,that.listPath[0].currentPoint.lon,that.listPath[0].currentPoint.lat)
        //that.endline()//预估路径
      })
    },
    initCustomMarkes(title, details, lon, lat) {
      let that = this
      //自定义窗体内容
      var content = [
        "<div  style='top:1px;width: 200px; background-color: rgba(22, 160, 133, 1);' ><font color='white'>" +
          title +
          '</font>',
        "<div style='background-color:(22, 160, 133, 1); ;'><font color='white'>" +
          details +
          '</font></div></div>'
      ]
      // 创建 infoWindow 实例
      infoWindow = new AMap.InfoWindow({
        content: content.join('<br>') //传入 dom 对象，或者 html 字符串
      })
      // 打开信息窗体
      infoWindow.open(that.map, [lon, lat])
    },
    // 关闭信息窗口
    closeinfo() {
      infoWindow.close()
    },
    openInfo() {
      let lon = null
      let lat = null
      console.log(this.listPath)
      this.listPath.forEach(e => {
        if (e.endPoint != {} && e.endPoint != '' && e.endPoint != null) {
          lon = e.endPoint.lon
          lat = e.endPoint.lat
        } else {
          lon = e.runRoute[e.runRoute.length - 1].lon
          lat = e.runRoute[e.runRoute.length - 1].lat
        }
      })
      infoWindow.open(this.map, [lon, lat])
    },
    initPolyline(path, color) {
      let that = this
      //预计轨迹
      var endLine = new AMap.Polyline({
        map: that.map,
        path: path,
        isOutline: true,
        outlineColor: color,
        borderWeight: 0,
        strokeColor: '#FF0000',
        strokeOpacity: 1,
        strokeWeight: 5,
        // 折线样式还支持 'dashed'
        strokeStyle: 'solid',
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50
      })
      that.map.setFitView([[endLine]])
    },
    //创建简单的标记
    initMarkes(weight, height, image, lon, lat, title) {
      let that = this
      //图标标记点
      let pointicon = new AMap.Icon({
        size: new AMap.Size(weight, height), // 图标尺寸
        image: image, // Icon的图像
        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
      })
      // 创建一个 Marker 实例：
      var pointmarker = new AMap.Marker({
        position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: pointicon,
        title: title
      })
      // 将创建的点标记添加到已有的地图实例：
      that.map.add(pointmarker)
    },
    //创建轨迹和巡航器
    initPathSimplifier() {
      let that = this
      // ...你的操作
      new AMapUI.load(['ui/misc/PathSimplifier'], PathSimplifier => {
        if (!PathSimplifier.supportCanvas) {
          alert('当前环境不支持 Canvas！')
          return
        }
        //创建轨迹和巡航器
        // 创建组件实例
        that.pathSimplifierIns = new PathSimplifier({
          map: that.map,
          zIndex: 100, // 图层叠加顺序
          data: that.listPath, // 巡航路径
          // 获取巡航路径中的路径坐标数组
          getPath: (pathData, pathIndex) => {
            return pathData.runPath
          },
          //鼠标悬浮停时显示消息
          getHoverTitle: function(pathData, pathIndex, pointIndex) {
            //返回鼠标悬停时显示的信息
            if (pointIndex >= 0) {
              if (pathData.runRoute[pointIndex].gtm !== 'undefined') {
                //鼠标悬停在某个轨迹节点上
                return (
                  pathData.runRoute[pointIndex].gtm +
                  '，速度' +
                  pathData.runRoute[pointIndex].spd +
                  '千米/小时'
                )
              }
            }
          },
          //设置轨迹样式
          renderOptions: {
            //轨迹线的样式
            pathLineStyle: {
              strokeStyle: 'black',
              lineWidth: 6,
              dirArrowStyle: true
            }
          }
        })
        // 创建巡航器
        that.pathNavigator = that.pathSimplifierIns.createPathNavigator(0, {
          loop: false, // 是否循环
          speed: that.speed, // 速度(km/h)
          pathNavigatorStyle: {
            width: 20,
            height: 40,
            content: PathSimplifier.Render.Canvas.getImageContent(
              require('@/assets/img/smallcar.png'),
              onload,
              onerror
            ),
            strokeStyle: null,
            fillStyle: null
          }
        })
        //开启巡航
        that.pathNavigator.start()
        that.defaultDate()

        //开始事件
        that.pathNavigator.on('start resume', function() {
          // that.navgtr._startTime = Date.now();
          // that.navgtr._startDist = this.getMovedDistance();
        })
        //暂停
        that.pathNavigator.on('stop pause', function() {
          // that.navgtr._movedTime = Date.now() - that.navgtr._startTime;
          // that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist;
        })
        that.pathNavigator.on('move', function(data, value) {
          that.updateLable(value)
        })
      })
    },
    updateLable(value) {
      let that = this
      that.point = value.dataItem.pointIndex
      that.runRoute = value.dataItem.pathData.runRoute[that.point]
      that.sliderVal =
        (value.dataItem.pointIndex / value.dataItem.pathData.runRoute.length) *
        100
    },
    changeSpeed(value) {
      // console.log(value)
      // let that=this;
      // that.times=value;
    },
    playIcon() {
      console.log('nihoa')
    },
    //逆解码函数
    initGeocoder() {
      let that = this
      console.log('initGeocoder')
      AMap.plugin('AMap.Geocoder', function() {
        that.geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: 'all'
        })

        console.log(that.geocoder)
      })
    }
  }
}
</script>
<style>
.mapcontroller {
  width: 250px;
  height: 260px;
  background: white;
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
}
.container {
  width: 100%;
  height: 100%;
}
.item_details {
  display: block;
  margin-top: 20px;
  position: relative;
  left: 30px;
  width: 200px;
  height: 0px;
}
#amap-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  font-family: '微软雅黑';
}
.driving_information2 {
  position: relative;
  top: 70px;
}
.driving_information3 {
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  position: relative;
  top: 50px;
}

/* 进度条 */
.mySlider {
  width: 150px;
  height: 20px;
  display: inline-block;
  position: relative;
  left: 32px;
}
.play {
  position: relative;
  left: 28px;
}
.quickly {
  float: right;
  position: relative;
  left: -20px;
  top: 10px;
}
.pause {
  position: relative;
  left: 28px;
}
.passed-time {
  position: relative;
  left: 5px;
}
.end-time {
  position: relative;
  left: 5px;
}
.map-times {
  position: relative;
  background-color: red;
  width: 40px;
}
</style>
<style lang="scss" scoped>
.btnx {
  z-index: 1000;
  position: fixed;
  bottom: 10px;
  right: 10px;
}
</style>