|
@@ -17,9 +17,9 @@
|
|
<div style="height: 80vh; width: 100%" id="container"></div>
|
|
<div style="height: 80vh; width: 100%" id="container"></div>
|
|
<div id="toolControl">
|
|
<div id="toolControl">
|
|
<!-- <div class="toolItem" id="markers" title="开始" @click="beginMove"></div>-->
|
|
<!-- <div class="toolItem" id="markers" title="开始" @click="beginMove"></div>-->
|
|
-<!-- <div class="toolItem active" id="marker" title="点标记" @click="selectDragType('marker')"></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="polyline" title="折线" @click="selectDragType('polyline')"></div>
|
|
-<!-- <div class="toolItem" id="polygon" title="多边形" @click="selectDragType('polygon')"></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="circle" title="圆形" @click="selectDragType('circle')"></div>
|
|
<div class="toolItem" id="rectangle" title="矩形" @click="selectDragType('rectangle')"></div>
|
|
<div class="toolItem" id="rectangle" title="矩形" @click="selectDragType('rectangle')"></div>
|
|
<div class="toolItem" id="ellipse" title="椭圆" @click="selectDragType('ellipse')"></div>-->
|
|
<div class="toolItem" id="ellipse" title="椭圆" @click="selectDragType('ellipse')"></div>-->
|
|
@@ -27,9 +27,16 @@
|
|
<div class="control">
|
|
<div class="control">
|
|
<button @click="changeDirection" class="beginMove"><a-icon type="swap" />方向转换</button>
|
|
<button @click="changeDirection" class="beginMove"><a-icon type="swap" />方向转换</button>
|
|
<button @click="saveMapData" class="stopMove"><a-icon type="save" />保存</button>
|
|
<button @click="saveMapData" class="stopMove"><a-icon type="save" />保存</button>
|
|
|
|
+ <a-popover title="提示">
|
|
|
|
+ <template #content>
|
|
|
|
+ <p>1、启用编辑后,点击线条,可调整航线</p>
|
|
|
|
+ <p>2、调整航线后,按Esc退出后,保存航线,即可更新航线数据</p>
|
|
|
|
+ </template>
|
|
|
|
+ <button @click="openPolyLine" class="stopMove"><a-icon type="edit" />启用编辑</button>
|
|
|
|
+ </a-popover>
|
|
<button @click="resetMapData" class="resumeMove"><a-icon type="radius-setting" />重置</button>
|
|
<button @click="resetMapData" class="resumeMove"><a-icon type="radius-setting" />重置</button>
|
|
</div>
|
|
</div>
|
|
-<!-- <div class="control">
|
|
|
|
|
|
+ <!-- <div class="control">
|
|
<button @click="beginMove" class="beginMove" :disabled="moved">航线模拟</button>
|
|
<button @click="beginMove" class="beginMove" :disabled="moved">航线模拟</button>
|
|
<button @click="stopMove" class="stopMove">终止模拟</button>
|
|
<button @click="stopMove" class="stopMove">终止模拟</button>
|
|
<button @click="pauseMove" class="pauseMove">暂停模拟</button>
|
|
<button @click="pauseMove" class="pauseMove">暂停模拟</button>
|
|
@@ -63,7 +70,8 @@ export default {
|
|
customPath:[],
|
|
customPath:[],
|
|
moved: true,
|
|
moved: true,
|
|
polyLine: null,
|
|
polyLine: null,
|
|
- startAndEndMarkerLayer: null
|
|
|
|
|
|
+ startAndEndMarkerLayer: null,
|
|
|
|
+ polylineLayerEdit: null
|
|
}
|
|
}
|
|
},
|
|
},
|
|
filters: {
|
|
filters: {
|
|
@@ -106,19 +114,17 @@ export default {
|
|
onOk () {
|
|
onOk () {
|
|
return delRouteLine()
|
|
return delRouteLine()
|
|
.then(() => {
|
|
.then(() => {
|
|
- that.map = null
|
|
|
|
that.editor = null
|
|
that.editor = null
|
|
that.activeType = 'polyline'
|
|
that.activeType = 'polyline'
|
|
that.markerLayer = null
|
|
that.markerLayer = null
|
|
that.customPath = []
|
|
that.customPath = []
|
|
- if (that.polyLine) {
|
|
|
|
- that.polyLine.setMap(null)
|
|
|
|
- }
|
|
|
|
- if (that.startAndEndMarkerLayer) {
|
|
|
|
- that.startAndEndMarkerLayer.setMap(null)
|
|
|
|
- }
|
|
|
|
|
|
+ /*if (that.map && that.polyLine && that.startAndEndMarkerLayer) {
|
|
|
|
+ that.map.removeLayer("polyline-layer")
|
|
|
|
+ that.map.removeLayer("marker-layer")
|
|
|
|
+ }*/
|
|
that.polyLine = null
|
|
that.polyLine = null
|
|
that.startAndEndMarkerLayer = null
|
|
that.startAndEndMarkerLayer = null
|
|
|
|
+ that.map.destroy()
|
|
that.initMap()
|
|
that.initMap()
|
|
that.$message.success(
|
|
that.$message.success(
|
|
'重置成功',
|
|
'重置成功',
|
|
@@ -133,11 +139,9 @@ export default {
|
|
if (this.stepArr.length > 0){
|
|
if (this.stepArr.length > 0){
|
|
this.stepArr = this.stepArr.reverse()
|
|
this.stepArr = this.stepArr.reverse()
|
|
}
|
|
}
|
|
- if (this.polyLine){
|
|
|
|
- this.polyLine.setMap(null)
|
|
|
|
- }
|
|
|
|
- if (this.startAndEndMarkerLayer){
|
|
|
|
- this.polyLine.setMap(null)
|
|
|
|
|
|
+ if (this.map && this.startAndEndMarkerLayer && this.polyLine) {
|
|
|
|
+ this.map.removeLayer("polyline-layer")
|
|
|
|
+ this.map.removeLayer("marker-layer")
|
|
}
|
|
}
|
|
if (this.path.length > 0){
|
|
if (this.path.length > 0){
|
|
this.path = this.path.reverse()
|
|
this.path = this.path.reverse()
|
|
@@ -151,11 +155,24 @@ export default {
|
|
})
|
|
})
|
|
},
|
|
},
|
|
getLinePath() {
|
|
getLinePath() {
|
|
|
|
+ if (this.map && this.editor){
|
|
|
|
+ console.log('摧毁编辑器')
|
|
|
|
+ this.editor.disable()
|
|
|
|
+ this.editor.removeOverlay('polyline-edit')
|
|
|
|
+ if (this.polylineLayerEdit){
|
|
|
|
+ this.map.removeLayer("polyline-layer-edit")
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ if (this.map && this.startAndEndMarkerLayer && this.polyLine) {
|
|
|
|
+ this.map.removeLayer("polyline-layer")
|
|
|
|
+ this.map.removeLayer("marker-layer")
|
|
|
|
+ }
|
|
|
|
+ }
|
|
this.path = []
|
|
this.path = []
|
|
getRouteLine().then((response) => {
|
|
getRouteLine().then((response) => {
|
|
this.path = response.data
|
|
this.path = response.data
|
|
// 添加路径 开始 结束 图标
|
|
// 添加路径 开始 结束 图标
|
|
- if (this.path.length > 1) {
|
|
|
|
|
|
+ if (this.path && this.path.length > 1) {
|
|
this.markRoutePath(this.path)
|
|
this.markRoutePath(this.path)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
@@ -211,6 +228,63 @@ export default {
|
|
this.model.resumeMove();
|
|
this.model.resumeMove();
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ openPolyLine() {
|
|
|
|
+ this.customPath = []
|
|
|
|
+ const paths = this.path.map((item) => {
|
|
|
|
+ return new window.TMap.LatLng(item.lat,item.lng)
|
|
|
|
+ })
|
|
|
|
+ if (this.map && this.startAndEndMarkerLayer && this.polyLine) {
|
|
|
|
+ this.map.removeLayer("polyline-layer")
|
|
|
|
+ this.map.removeLayer("marker-layer")
|
|
|
|
+ }
|
|
|
|
+ this.editor = null
|
|
|
|
+ this.polylineLayerEdit = new window.TMap.MultiPolyline({
|
|
|
|
+ id: 'polyline-layer-edit',
|
|
|
|
+ map: this.map,
|
|
|
|
+ styles: {
|
|
|
|
+ style_blue: new window.TMap.PolylineStyle({
|
|
|
|
+ color: '#3777FF', //线填充色
|
|
|
|
+ width: 6, //折线宽度
|
|
|
|
+ borderWidth: 5, //边线宽度
|
|
|
|
+ borderColor: '#FFF', //边线颜色
|
|
|
|
+ lineCap: 'butt' //线端头方式
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ geometries: [
|
|
|
|
+ {
|
|
|
|
+ id: 'pl_1', //设置折线唯一id,可用于删除等
|
|
|
|
+ styleId: 'style_blue',//绑定样式id,对应上面第一组样式
|
|
|
|
+ paths: paths
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ })
|
|
|
|
+ this.editor = new window.TMap.tools.GeometryEditor({
|
|
|
|
+ map: this.map, // 编辑器绑定的地图对象
|
|
|
|
+ overlayList: [ // 可编辑图层
|
|
|
|
+ {
|
|
|
|
+ overlay: this.polylineLayerEdit,
|
|
|
|
+ id: 'polyline-edit',
|
|
|
|
+ selectedStyleId: 'style_blue',
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ actionMode: window.TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
|
|
|
|
+ activeOverlayId: 'polyline-edit', // 激活图层
|
|
|
|
+ selectable: true,
|
|
|
|
+ snappable: true
|
|
|
|
+ });
|
|
|
|
+ // 修改完成监听
|
|
|
|
+ this.editor.on('adjust_complete', (geometry) => {
|
|
|
|
+ console.log('航线编辑完成!!!!!!!')
|
|
|
|
+ // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle(矩形)图层
|
|
|
|
+ const _this = this
|
|
|
|
+ if (this.editor.getActiveOverlay().id === 'polyline-edit') {
|
|
|
|
+ // 获取折线路径坐标
|
|
|
|
+ console.log('绘制的多边形坐标:', geometry.paths)
|
|
|
|
+ this.customPath = geometry.paths
|
|
|
|
+ console.log('当前路径Path:', this.customPath)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
resetMap() {
|
|
resetMap() {
|
|
this.$router.go(0)
|
|
this.$router.go(0)
|
|
},
|
|
},
|
|
@@ -254,6 +328,9 @@ export default {
|
|
});
|
|
});
|
|
},
|
|
},
|
|
markRoutePath(pathArr) {
|
|
markRoutePath(pathArr) {
|
|
|
|
+ const paths = pathArr.map((item) => {
|
|
|
|
+ return new window.TMap.LatLng(item.lat, item.lng)
|
|
|
|
+ })
|
|
const _this = this
|
|
const _this = this
|
|
// 添加起点和终点 - 开始
|
|
// 添加起点和终点 - 开始
|
|
const startPosition = new window.TMap.LatLng(pathArr[0].lat, pathArr[0].lng) // 路线规划起点
|
|
const startPosition = new window.TMap.LatLng(pathArr[0].lat, pathArr[0].lng) // 路线规划起点
|
|
@@ -295,20 +372,25 @@ export default {
|
|
id: 'polyline-layer',
|
|
id: 'polyline-layer',
|
|
map: _this.map,
|
|
map: _this.map,
|
|
styles: {
|
|
styles: {
|
|
- style_blue: new TMap.PolylineStyle({
|
|
|
|
|
|
+ style_blue: new window.TMap.PolylineStyle({
|
|
color: '#3777FF',
|
|
color: '#3777FF',
|
|
- width: 8,
|
|
|
|
- borderWidth: 5,
|
|
|
|
|
|
+ width: 10,
|
|
|
|
+ borderWidth: 4,
|
|
borderColor: '#FFF',
|
|
borderColor: '#FFF',
|
|
- lineCap: 'butt',
|
|
|
|
- showArrow: true
|
|
|
|
|
|
+ lineCap: 'square',
|
|
|
|
+ showArrow: true,
|
|
|
|
+ arrowOptions: {
|
|
|
|
+ width: 8,
|
|
|
|
+ height: 12,
|
|
|
|
+ space: 80,
|
|
|
|
+ }
|
|
})
|
|
})
|
|
},
|
|
},
|
|
geometries: [
|
|
geometries: [
|
|
{
|
|
{
|
|
id: 'pl_1',
|
|
id: 'pl_1',
|
|
styleId: 'style_blue',
|
|
styleId: 'style_blue',
|
|
- paths: _this.path
|
|
|
|
|
|
+ paths: paths
|
|
}
|
|
}
|
|
]
|
|
]
|
|
})
|
|
})
|
|
@@ -361,51 +443,17 @@ export default {
|
|
},
|
|
},
|
|
initMap() {
|
|
initMap() {
|
|
// 设置地图中心点
|
|
// 设置地图中心点
|
|
- const center = new TMap.LatLng(36.092574, 103.728268)
|
|
|
|
|
|
+ const center = new TMap.LatLng(36.076698,103.805328)
|
|
// 定义工厂模式函数
|
|
// 定义工厂模式函数
|
|
const myOptions = {
|
|
const myOptions = {
|
|
- zoom: 17, // 设置地图缩放级别
|
|
|
|
|
|
+ zoom: 13.8, // 设置地图缩放级别
|
|
center: center
|
|
center: center
|
|
}
|
|
}
|
|
// 初始化重新定位
|
|
// 初始化重新定位
|
|
this.map = new TMap.Map('container', myOptions)
|
|
this.map = new TMap.Map('container', myOptions)
|
|
-
|
|
|
|
- // 初始化几何图形及编辑器
|
|
|
|
- // const marker = new TMap.MultiMarker({
|
|
|
|
- // map: this.map
|
|
|
|
- // })
|
|
|
|
const polyline = new TMap.MultiPolyline({
|
|
const polyline = new TMap.MultiPolyline({
|
|
map: this.map
|
|
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
|
|
|
|
- })*/
|
|
|
|
- /* ,
|
|
|
|
- {
|
|
|
|
- overlay: polygon,
|
|
|
|
- id: 'polygon'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- overlay: circle,
|
|
|
|
- id: 'circle'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- overlay: rectangle,
|
|
|
|
- id: 'rectangle'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- overlay: ellipse,
|
|
|
|
- id: 'ellipse'
|
|
|
|
- }*/
|
|
|
|
this.editor = new TMap.tools.GeometryEditor({
|
|
this.editor = new TMap.tools.GeometryEditor({
|
|
// TMap.tools.GeometryEditor 文档地址:https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
|
|
// TMap.tools.GeometryEditor 文档地址:https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
|
|
map: this.map, // 编辑器绑定的地图对象
|
|
map: this.map, // 编辑器绑定的地图对象
|
|
@@ -416,7 +464,7 @@ export default {
|
|
id: 'polyline'
|
|
id: 'polyline'
|
|
}
|
|
}
|
|
],
|
|
],
|
|
- actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
|
|
|
|
|
|
+ actionMode: window.TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
|
|
activeOverlayId: 'polyline', // 激活图层
|
|
activeOverlayId: 'polyline', // 激活图层
|
|
snappable: true // 开启吸附
|
|
snappable: true // 开启吸附
|
|
})
|
|
})
|
|
@@ -425,21 +473,6 @@ export default {
|
|
// 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle(矩形)图层
|
|
// 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle(矩形)图层
|
|
// 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle(矩形)图层
|
|
// 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle(矩形)图层
|
|
const id = geometry.id
|
|
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
|
|
const _this = this
|
|
if (this.editor.getActiveOverlay().id === 'polyline') {
|
|
if (this.editor.getActiveOverlay().id === 'polyline') {
|
|
// 获取折线路径坐标
|
|
// 获取折线路径坐标
|