|
@@ -0,0 +1,502 @@
|
|
|
+
|
|
|
+<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>
|