**
实现点击地图上站点，生成一条线路，左右联动式编辑位置及删除线路上某个站点，可操作表格序号实现位置变更，也可在地图上双击改变位置，更简单快捷的实现线路规划功能
**
可编辑表格中的序号改变线路穿线顺序，地图上双击已生成的线路上的某个站点时，弹出弹窗是否从当前位置添加某个站点，确认后单击某个站点添加到此站点后生成线路，还可点击继续添加到此位置。
使用高德api+elementUI+vue2.0
双击线路上站点时提示：
确认后单击地图上某个站点时添加到线路上，弹出是否继续添加到此位置，点击取消后再点击添加站点会添加到数组末尾，确认按钮默认从添加的此站点位置继续往后添加
//表格
<el-table :data="tableData"
:default-sort="{prop: 'id', order: 'ascending'}"
@sort-change="sortChange"
highlight-current-row border class="page-table-main" style="margin-top: 10px;">
<el-table-column sortable prop="id" label="序号" align="center" width="80">
<template slot-scope="scope">
<div style="display: flex;justify-content: center;">
<span style="margin-right: 10px;display: inline-block;">{{ scope.row.id }}</span>
<p class="edit">
<i class="el-icon-edit-outline" @click="open(scope.row,scope.$index)"></i>
</p>
</div>
</template>
</el-table-column>
<el-table-column property="siteName" label="站点名称" align="center"></el-table-column>
<el-table-column property="siteSid" label="站点ID" align="center"></el-table-column>
<el-table-column label="操作" width="100" align="center" fixed="right">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteSite(scope.$index, scope.row)" type="text"
size="small">删除站点
</el-button>
</template>
</el-table-column>
</el-table>
//地图
<div id="PositionAmap" class="map-body-mid" style="height:700px;"></div>
script中初始化地图，站点列表赋值，串线路
export default {
name: 'addLine',
data () {
return {
siteList:[
{
siteId:'001'
siteName:"泰华A"
},
{
siteId:'002'
siteName:"泰华B"
},
{
siteId:'003'
siteName:"泰华C"
},
{
siteId:'004'
siteName:"泰华D"
},
{
siteId:'005'
siteName:"泰华E"
},
{
siteId:'006'
siteName:"泰华F"
},
],
map: null,
marker: new AMap.Marker({
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
position: []
}),
polyEditor: null,
tableData: [], //生成的站点列表
dbIndex: 0,
isDbClick:false
}
},
mounted () {
this.init();
},
methods:{
init(){
this.map = new AMap.Map("PositionAmap", {
zoom: 11,
center: [108.953902, 34.26654],
resizeEnable: true
});
let center = this.map.getCenter();
//地图展示实时路况，可要也可不要
var trafficLayer = new AMap.TileLayer.Traffic({
zIndex: 10
});
trafficLayer.setMap(this.map);
//在地图上展示站点
this.initMarker(this.siteList)
},
initMarker(array){
this.map.setCenter([array[0].longitude, array[0].latitude])
array.forEach(item => {
let icon = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
if (item.siteId) {
this.marker = this.setMarker(item, icon)
}
})
},
setMarker(item, icon) {
let self = this;
let marker;
marker = new AMap.Marker({
map: self.map,
id: item.siteId,
icon: icon,
title: item.siteName,
position: [item.longitude, item.latitude]
});
marker.content = `<div><span>站点ID：</span>${item.siteId}</div><div><span>站点名称：</span>${item.siteName}</div>`;
// 设置文本标注内容
marker.setLabel({
content: item.siteName,
direction: "top"
});
//单击事件，单击时向数组最后添加站点生成线路
marker.on("click", e => {
//判断当前站点是否在生成的线路站点中
var contents = self.tableData.filter(item2 => item2.siteId === item.siteId)
if(contents.length === 0){
//判断是否dbIndex与站点列表最后的序列号相同，如果相同且双击事件为false那就是在最后一个位置添加，直接给数组中push并穿线即可
if(self.dbIndex != self.tableData[self.tableData.length-1] && self.isDbClick){
item.id = self.dbIndex+1;
self.tableData.splice(self.dbIndex+1,0,item);
self.$confirm('添加完成, 是否继续在此位置添加?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'success'
}).then(() => {
self.dbIndex ++;
}).catch(() => {
self.isDbClick = false;
});
}else{
self.dbIndex =self.tableData.length;
item.id = self.dbIndex;
self.tableData.push(item);
}
//整理tableData的序列号
self.getSortIndex()
if(self.polyline){
self.polyline.setMap(null);
}
self.drawLine()
}
});
//双击站点时将当前站点序列号记录
marker.on("dblclick", e => {
self.$confirm('在此站点后添加站点, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
self.isDbClick = true;
self.tableData.forEach((item2,index)=>{
if(item2.siteId === item.siteId){
self.dbIndex =index;
}
})
}).catch(() => {
self.isDbClick = false;
self.dbIndex =self.tableData.length
});
});
return marker;
},
// 绘制线路
drawLine() {
var siteLine = [];
for (var x in this.tableData) {
var arr = [];
arr.push(this.tableData[x].longitude);
arr.push(this.tableData[x].latitude);
siteLine.push(arr);
}
var routeLine2 = new AMap.Polyline({
path: siteLine,
isOutline: true,
outlineColor: "#f2f2f2",
borderWeight: 2,
strokeWeight: 5,
showDir: true,
strokeOpacity: 0.9,
strokeColor: "#0091ff",
lineJoin: "round"
});
routeLine2.setMap(this.map)
this.polyline = routeLine2;
// 调整视野达到最佳显示区域
// this.map.setFitView([routeLine2]);
},
//数组序号排序
getSortIndex(){
this.tableData.forEach((item, ind) => {
item['id'] = ind
})
},
/* 逻辑删除站点 */
deleteSite (ind) {
let that = this
this.$confirm('此操作将删除该站点, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
that.tableData.splice(ind, 1)
that.getSortIndex();
this.polyline.setMap(null);
this.drawLine()
}).catch(() => {})
},
//清空地图上站点
clearSite(){
this.map.remove(this.marker)
this.marker.setMap(null)
this.map.clearMap();
},
//修改表格序列号改变地图线路列表
open (row, index) {
this.$prompt('', '编辑', {confirmButtonText: '确定', cancelButtonText: '取消'})
.then(({value}) => {
row.id = value
const currRow = this.tableData.splice(index, 1)[0]
this.tableData.splice(value, 0, currRow)
this.getSortIndex();
if(this.polyline){
this.polyline.setMap(null);
}
this.drawLine()
})
.catch(() => {
this.$message({
type: 'info',
message: '取消输入'
})
})
}
}
}
左右联动式的地图串线功能就这样实现了，欢迎大家提出意见
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
