water_bus/aidex-ui/src/views/system/line/index.vue

<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 10px;">
      <div class="table-page-search-wrapper" style="height: 8vh; width: 100%">
        <a-steps
          type="navigation"
          :current="stepArr.length"
        >
          <a-step v-for="(item, index) in stepArr" :key="index" :title="item.title" :status="item.status" >
            <a-icon slot="icon" type="interation" />
          </a-step>
        </a-steps>
      </div>
    </a-card>
    <a-card :bordered="false" class="table-card">
      <div style="height: 80vh; width: 100%" id="container"></div>
      <div id="toolControl">
        <!--                <div class="toolItem" id="markers" title="开始" @click="beginMove"></div>-->
        <div class="toolItem active" id="marker" title="点标记" @click="selectDragType('marker')"></div>
        <div class="toolItem" id="polyline" title="折线" @click="selectDragType('polyline')"></div>
        <div class="toolItem" id="polygon" title="多边形" @click="selectDragType('polygon')"></div>
        <div class="toolItem" id="circle" title="圆形" @click="selectDragType('circle')"></div>
        <div class="toolItem" id="rectangle" title="矩形" @click="selectDragType('rectangle')"></div>
        <div class="toolItem" id="ellipse" title="椭圆" @click="selectDragType('ellipse')"></div>
      </div>
      <div class="control">
        <button @click="beginMove" class="beginMove" :disabled="moved">航线模拟</button>
        <button @click="stopMove" class="stopMove">终止模拟</button>
        <button @click="pauseMove" class="pauseMove">暂停模拟</button>
        <button @click="resumeMove" class="resumeMove">恢复模拟</button>
        <button @click="resetMap" class="resumeMove">重置</button>
      </div>
    </a-card>
  </div>
</template>

<script>
/* eslint-disable */
import {  getAllSysWharf } from '@/api/system/sysWharf'
import { getRouteLine, addRouteLine } from '@/api/system/line'
export default {
  name: 'RouterLine',
  data() {
    return {
      open: false,
      model: null,
      path: [],
      roation: null,
      center: null,
      map: null,
      editor: null,
      activeType: 'marker',
      sysWharfList: [],
      stepArr: [],
      markerLayer: null,
      customPath:[],
      moved: true
    }
  },
  filters: {
  },
  mounted() {
    // 确保腾讯地图SDK已加载
    /*const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://map.qq.com/api/gljs?libraries=tools,geometry,model&v=1.exp&key=A7PBZ-WLKKC-XW52U-A5BML-XLALT-2DF2Q'
    document.body.appendChild(script)*/
    this.initMap()
    // this.initMap2()
    // this.getListSysWharf()
  },
  created() {
  },
  methods: {
    addLine() {
      addRouteLine(this.customPath).then((response) => {
        this.customPath = []
        this.getLinePath()
      })
    },
    getLinePath() {
      this.path = []
      getRouteLine().then((response) => {
        this.path = response.data
        // 添加路径 开始 结束 图标
        if (this.path.length > 1) {
          this.markRoutePath(this.path)
        }
      })
    },
    getListSysWharf() {
      this.sysWharfList = []
      this.stepArr = []
      getAllSysWharf().then((response) => {
        this.sysWharfList = response.data
        // 显示码头数据
        this.stepArr = this.sysWharfList.map((item) => {
          return {
            title: item.wharfNanme,
            status: 'finish'
          }
        })
        // 标记码头点
        this.markPoint(this.sysWharfList)
      })
    },
    selectDragType(type) {
      document.getElementById(this.activeType).className = 'toolItem'
      document.getElementById(type).className = 'toolItem active'
      this.activeType = type
      this.editor.setActiveOverlay(type)
      this.editor.enable()
    },
    beginMove() {
      const paths = this.path.map((item) => {
        return {
          position: new TMap.LatLng(item.lat, item.lng)
        }
      })
      this.model.moveAlong({
        // 移动过程中每个节点的坐标
        path: paths,
        duration: 15000, // 完成移动所需的时间 单位毫秒
        degreeToNorth: 180 // 把模型正方向旋转至正北方向所需的角度 默认为0
      })
    },
    stopMove() {
      if (this.model){
        this.model.stopMove();
      }
    },
    pauseMove() {
      if (this.model){
        this.model.pauseMove();
      }
    },
    resumeMove() {
      if (this.model){
        this.model.resumeMove();
      }
    },
    resetMap() {
      this.$router.go(0)
    },
    markPoint(pointArr) {
      const geometries = pointArr.map((item) =>{
        return {
          "id": item.id,   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
          "position": new window.TMap.LatLng(Number(item.lat), Number(item.lng)),  //点标记坐标位置
          styleId: 'small',
          content: item.wharfNanme
        }
      })
      this.markerLayer = new window.TMap.MultiMarker({
        map: this.map,  //指定地图容器
        styles: {
          small: new window.TMap.MarkerStyle({
            // 点标注的相关样式
            width: 34, // 宽度
            height: 46, // 高度
            anchor: { x: 17, y: 23 }, // 标注点图片的锚点位置
            color: '#333', // 标注点文本颜色
            size: 16, // 标注点文本文字大小
            direction: 'bottom', // 标注点文本文字相对于标注点图片的方位
            strokeColor: '#fff', // 标注点文本描边颜色
            strokeWidth: 2, // 标注点文本描边宽度
          }),
          big: new window.TMap.MarkerStyle({
            width: 58,
            height: 76,
            anchor: { x: 36, y: 32 },
            color: '#333',
            size: 22,
            direction: 'bottom',
            strokeColor: '#fff',
            offset: { x: 0, y: 10 },
            strokeWidth: 2,
          }),
        },
        //点标记数据数组
        geometries: geometries
      });
    },
    markRoutePath(pathArr) {
      const _this = this
      // 添加起点和终点 - 开始
      const startPosition = new window.TMap.LatLng(pathArr[0].lat, pathArr[0].lng) // 路线规划起点
      const endPosition = new window.TMap.LatLng(pathArr[pathArr.length -1].lat, pathArr[pathArr.length -1].lng) // 路线规划终点
      new window.TMap.MultiMarker({
        // 创造MultiMarker显示起终点标记
        id: 'marker-layer',
        map: _this.map,
        styles: {
          start: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
          }),
          end: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
          })
        },
        geometries: [
          {
            id: 'start',
            styleId: 'start',
            position: startPosition
          },
          {
            id: 'end',
            styleId: 'end',
            position: endPosition
          }
        ]
      })
      // 添加起点和终点 - 结束
      // 创建 MultiPolyline显示路径折线
      new window.TMap.MultiPolyline({
        id: 'polyline-layer',
        map: _this.map,
        styles: {
          style_blue: new TMap.PolylineStyle({
            color: '#3777FF',
            width: 8,
            borderWidth: 5,
            borderColor: '#FFF',
            lineCap: 'butt',
            showArrow: true
          })
        },
        geometries: [
          {
            id: 'pl_1',
            styleId: 'style_blue',
            paths: _this.path
          }
        ]
      })
      // 创建 MultiPolyline显示路径折线 结束
      this.model = new window.TMap.model.GLTFModel({
        // url: 'http://127.0.0.1:18080/profile/upload/2024/03/16/scene.gltf',
        url: 'https://mapapi.qq.com/web/jsapi/jsapi-gl/assets/car.gltf',
        map: _this.map,
        id: 'model',
        position: startPosition, // 模型初始位置
        rotation: [0, 130, 0], // 模型XYZ三轴上的旋转角度
        scale: 10 // 模型在XYZ三轴上的缩放比例
      })

      // model资源加载完成回调
      this.model.on('loaded', () => {
        console.log('模型加载成功')
        // 启用模型沿线移动演示
        // MoveButton.disabled = false
        _this.moved = false
      })

      this.model.on('moving', function (e) {
        if (!e.passedPath) return
        // geometry文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocGeometry
        _this.roation = TMap.geometry.computeHeading(
          // 计算两点之间的航向
          e.passedPath[e.passedPath.length - 2].position,
          e.passedPath[e.passedPath.length - 1].position
        )
        _this.center = TMap.geometry.computeDestination(
          // 根据起点、朝向和距离计算终点
          e.passedPath[e.passedPath.length - 1].position,
          _this.roation,
          60
        )
        _this.map.easeTo(
          // 平滑过渡到指定状态
          {
            center: _this.center,
            rotation: e.rotation[1] + 180,
            zoom: 20,
            pitch: 70
          },
          {
            duration: 300
          }
        )
      })
    },
    initMap() {
      // 设置地图中心点
      const center = new TMap.LatLng(36.092574, 103.728268)
      // 定义工厂模式函数
      const myOptions = {
        zoom: 17, // 设置地图缩放级别
        center: center
      }
      // 初始化重新定位
      this.map = new TMap.Map('container', myOptions)

      // 初始化几何图形及编辑器
      const marker = new TMap.MultiMarker({
        map: this.map
      })
      const polyline = new TMap.MultiPolyline({
        map: this.map
      })
      const polygon = new TMap.MultiPolygon({
        map: this.map
      })
      const circle = new TMap.MultiCircle({
        map: this.map
      })
      const rectangle = new TMap.MultiRectangle({
        map: this.map
      })
      const ellipse = new TMap.MultiEllipse({
        map: this.map
      })

      this.editor = new TMap.tools.GeometryEditor({
        // TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
        map: this.map, // 编辑器绑定的地图对象
        overlayList: [
          // 可编辑图层 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4
          {
            overlay: marker,
            id: 'marker'
          },
          {
            overlay: polyline,
            id: 'polyline'
          },
          {
            overlay: polygon,
            id: 'polygon'
          },
          {
            overlay: circle,
            id: 'circle'
          },
          {
            overlay: rectangle,
            id: 'rectangle'
          },
          {
            overlay: ellipse,
            id: 'ellipse'
          }
        ],
        actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
        activeOverlayId: 'marker', // 激活图层
        snappable: true // 开启吸附
      })

      this.editor.on('draw_complete', (geometry) => {
        // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle（矩形）图层
        // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle（矩形）图层
        const id = geometry.id
        if (this.editor.getActiveOverlay().id === 'rectangle') {
          // 获取矩形顶点坐标
          const geo = rectangle.geometries.filter(function (item) {
            return item.id === id
          })
          console.log('绘制的矩形定位的坐标：', geo[0].paths)
        }

        if (this.editor.getActiveOverlay().id === 'polygon') {
          // 获取多边形顶点坐标
          const geo = polygon.geometries.filter(function (item) {
            return item.id === id
          })
          console.log('绘制的多边形坐标：', geo[0].paths)
        }
        const _this = this
        if (this.editor.getActiveOverlay().id === 'polyline') {
          // 获取折线路径坐标
          console.log('绘制的多边形坐标：', geometry.paths)
          this.customPath.push(...geometry.paths)
          console.log('当前路径Path：', this.customPath)
          // 开始添加 路线规划的覆盖层
          this.$confirm({
            title: '是否继续设置航线?',
            zIndex:1002,
            onOk () {
              _this.editor.enable()
            },
            onCancel () {
              _this.editor.disable()
              _this.$confirm({
                title: '是否保存航线?',
                zIndex:1003,
                onOk () {
                  _this.addLine()
                },
                onCancel () {
                  console.log('取消保存航线')
                }
              })
            }
          })
        }
      })
      this.editor.disable()
      this.getListSysWharf()
      this.getLinePath()
    }
  }
}
</script>
<style scoped lang="less">

#toolControl {
  position: absolute;
  top: 10px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 380px;
  z-index: 1001;
}

.toolItem {
  width: 42px;
  height: 42px;
  float: left;
  margin: 1px;
  padding: 4px;
  border-radius: 3px;
  background-size: 30px 30px;
  background-position: 4px 4px;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px 0 #e4e7ef;
  background-color: #ffffff;
  border: 1px solid #ffffff;
}

.toolItem:hover {
  border-color: #789cff;
}

.active {
  border-color: #d5dff2;
  background-color: #d5dff2;
}

#marker {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png');
}

#polyline {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polyline.png');
}

#polygon {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png');
}

#circle {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/circle.png');
}

#rectangle {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/rectangle.png');
}

#ellipse {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/ellipse.png');
}

#markers {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png');
}

.control {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 9999;
  padding: 10px;
}
.control button {
  padding: 10px 14px;
  box-sizing: border-box;
  border: none;
  background-color: #919aac;
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
  line-height: 14px;
  cursor: pointer;
  margin-left: 6px;
}

.control .beginMove {
  background: #3876ff;
}
.control .stopMove {
  background: #ff0000;
}
</style>