I’ve been cleaning up the code recently and I feel this feature is quite interesting to record
['AMap.MouseTool'.'AMap.PolyEditor'.'AMap.Autocomplete'.'AMap.PlaceSearch']
Copy the codeThe specific code is as follows
<template>
<div class="map">
<div class="GDMap" ref="GDMap" id="GDMap"></div>
<div class="btns">
<el-cascader
class="city"
v-model="city"
:options="cityOptions"
:props="{ expandTrigger: 'hover' }"
></el-cascader>
<el-input id="name" name="name" v-model="roadName" placeholder="Please enter the road name"></el-input>
<div class="btnsdiv">
<el-button class="btnItem" type="primary" plain @click="queryLine">Query section</el-button>
<el-button class="btnItem" type="info" plain @click="draw">Began to draw</el-button>
<el-button class="btnItem" type="danger" plain @click="delectLine">To delete lines</el-button>
<el-button class="btnItem" type="success" plain @click="comit">submit</el-button>
</div>
</div>
<div class="seachRoad">
<el-input id="keyword" ref="keyword" type="text" placeholder="Please enter road name keyword :(search after selection)" v-model="seachText"></el-input>
</div>
</div>
</template>
<script>
import AMap from 'AMap' // Introduce amap
import axios from 'axios'
import roadApi from '.. /api/road'
export default {
data () {
return {
seachText: ' '.autocomplete: ' '.GDMap: null.city: ['Shanghai'.'Shanghai'].cityOptions: [].roadName: ' '.mouseTool: null.polyline: null.currentLine: null.PolyEditor: null.path: [].lineList: []
}
},
created () {
this.initCity()
},
mounted () {
this.GDMap = new AMap.Map('GDMap', {
zoom: 10./ / level
center: [121.523362.31.172272].// Center point coordinates
mapStyle: 'amap://styles/be21eca74ae720ac8eac408ebb004414'
})
this.initMap()
},
methods: {
async initCity () {
var res = await axios.get('/js/city.json')
res.data.provinces.forEach(item= > {
var cityItem = {
value: item.provinceName,
label: item.provinceName,
children: []
}
item.citys.forEach(val= > {
cityItem.children.push({
value: val.citysName,
label: val.citysName
})
})
this.cityOptions.push(cityItem)
})
},
initMap () {
var _this = this
this.GDMap.plugin(['AMap.MouseTool'.'AMap.PolyEditor'.'AMap.Autocomplete'.'AMap.PlaceSearch'].function () {
// The mouse plug-in is initialized
_this.mouseTool = new AMap.MouseTool(_this.GDMap)
AMap.event.addListener(_this.mouseTool, 'draw'.function (e) {
_this.polyline = e.obj
_this.lineList.push(_this.polyline)
// Register click events for line and control modification deletion
_this.polylineClick(_this.polyline)
})
// Search the path
_this.mapSeachRoad()
})
},
// Search the path
mapSeachRoad () {
var autoOptions = {
city: this.city[1].// city, default national
input: document.getElementById('keyword')}this.autocomplete = new AMap.Autocomplete(autoOptions)
var placeSearch = new AMap.PlaceSearch({
city: this.city[1].map: this.GDMap
})
AMap.event.addListener(this.autocomplete, 'select'.function (e) {
placeSearch.search(e.poi.name)
})
},
async queryLine () {
// Clear the history before querying
this.lineList = []
this.path = []
this.GDMap.clearMap()
var res = await roadApi.getLineByRoadName({
roadName: this.roadName,
city: this.city[1]})console.log(res)
for (let i = 0; i < res.data.length; i++) {
var path = [
new AMap.LngLat(parseFloat(res.data[i].startLng), parseFloat(res.data[i].startLat)),
new AMap.LngLat(parseFloat(res.data[i].endLng), parseFloat(res.data[i].endLat))
]
var seachPolyline = new AMap.Polyline({
path: path,
borderWeight: 2.// Line width, default is 1
strokeWeight: 5.cursor: 'crosshair'.fillColor: '#00b0ff'.strokeColor: 'red'.lineJoin: 'round' // The style of the inflection point
})
var _this = this
this.GDMap.plugin(['AMap.PolyEditor'].function () {
_this.polylineClick(seachPolyline)
})
this.lineList.push(seachPolyline)
this.GDMap.add(seachPolyline)
}
},
polylineClick (polyline) {
var _this = this
polyline.on('click'.function (w) {
// Close the draw that is being drawn, and close any modifiers that may appear before it
_this.mouseTool.close(false)
// Close the previously opened modifier
if(_this.PolyEditor ! = =null) {
_this.PolyEditor.close()
}
_this.currentLine = w.target
_this.PolyEditor = new AMap.PolyEditor(_this.GDMap, w.target)
_this.PolyEditor.open()
})
},
draw () {
// Close the previously opened modifier
if (this.PolyEditor ! = =null) {
this.PolyEditor.close()
}
this.polyline = this.mouseTool.polyline({
cursor: 'auto'.strokeColor: 'red'.strokeWeight: '4'.draggable: 'true'
})
},
delectLine () {
if (this.currentLine ! =null) {
this.lineList = this.lineList.filter(val= >val ! = =this.currentLine)
this.GDMap.remove(this.currentLine)
this.currentLine = null
// Since clicking on a line automatically opens the modifier, close it and use deleteType to control whether the callback is executed
this.PolyEditor.close()
} else {
this.$message.warning('Please select the line first')}},async comit () {
// Close the previously opened modifiers to prevent users from submitting the modified data without closing the modifiers
if (this.PolyEditor ! = =null) {
this.PolyEditor.close()
}
this.lineList.forEach((val, inx) = > {
const paths = {
type: inx,
path: []
}
val.getPath().forEach(item= > {
paths.path.push(item)
})
this.path.push(paths)
})
let comitPath = []
for (let i = 0; i < this.path.length; i++) {
// Get the path to each line
var linePath = this.path[i].path
// Traverses the path
for (let j = 0; j < linePath.length; j++) {
// If you haven't reached the last coordinate point yet
if(j ! == (linePath.length -1)) {
comitPath.push({
id: ' '.startLng: linePath[j].lng,
startLat: linePath[j].lat,
endLng: linePath[j + 1].lng,
endLat: linePath[j + 1].lat,
index: j,
roadName: this.roadName,
city: this.city[1]
})
}
}
}
comitPath = JSON.stringify(comitPath)
console.log(comitPath)
var res = await roadApi.add({
road: comitPath,
roadName: this.roadName
})
console.log(res)
this.lineList = []
this.GDMap.clearMap()
this.path = []
this.$message.success('Submitted successfully')}}}</script>
Copy the code