安装
npm i @amap/amap-jsapi-loader --save
效果
baseMap.vue
<template>
<div>
<div class="container" id ="container"></div>
<div class="input-card" style="width: 100%" v-if="isEdit">
<a-button class="btn1" type="primary" @click="createPolygon()" style="margin-bottom: 5px">新建</a-button>
<a-button class="btn2" type="primary" @click="openPoly()" style="margin-bottom: 5px">开始编辑</a-button>
<a-button class="btn3" type="primary" @click="closePoly()" style="margin-bottom: 5px">结束编辑</a-button>
<!--<button class="btn" @click="clearPoly()">清空</button>-->
</div>
</div>
</template>
<script>
export default {
name: 'baseMap',
props: {
name: {
type: String,
default: function() {
return ''
}
},
isEdit: {
type: Boolean,
default: function() {
return false
}
},
areas: {
type: Array,
default: function() {
return []
}
},
center: {
type: Array,
default: function() {
return [123.842305,42.286129]
}
}
},
data() {
return { polyEditor: null, polygonPaths: [], map: null, polygons: [] }
},
watch: {},
mounted() {
this.init()
},
methods: {
async init() {
await this.initMap()
this.initAreas()
if (this.isEdit) {
console.log("this.isEdit",this.isEdit);
this.initPoly()
}
},
async initMap() {
this.map = new window.AMap.Map('container', {
center: this.center,
zoom: 12,
plugin: [ //一些工具插件
{
pName: 'MapType', //地图类型
defaultType: 0,
events: {
init(instance) {
}
}
}
]
})
// 缩放地图到合适的视野级别
this.map.setFitView()
},
initAreas() {
for (let i = 0; i < this.areas.length; i++) {
let area = this.areas[i]
let path = []
for (let j = 0; j < area.length; j++) {
path.push([area[j].lng, area[j].lat])
}
if (path.length <= 0) {
continue
}
var polygon = new window.AMap.Polygon({
path: path,
strokeColor: 'green',
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: '#1791fc',
zIndex: 50,
bubble: true
})
this.polygons.push(polygon)
}
if (this.polygons.length <= 0) {
return
}
//地图上新增矢量多边形
this.map.add(this.polygons)
},
initPoly() {
if (this.polygons.length > 0) {
this.polyEditor = new window.AMap.PolygonEditor(this.map, this.polygons[0])
} else {
this.polyEditor = new window.AMap.PolygonEditor(this.map)
}
// this.polyEditor.open()
let _this = this
//关闭多边形编辑polygonEditor.close()触发该方法；
this.polyEditor.on('end', function(event) {
// event.target 即为编辑后的多边形对象,event.target.getPath()得到编辑完成后的点数组
let pointArr = event.target.getPath()
this.polygonPaths = []
for (let i = 0; i < pointArr.length; i++) {
this.polygonPaths.push({ lat: pointArr[i].lat, lng: pointArr[i].lng })
}
_this.$emit('getPolygonMap', this.polygonPaths)
console.log('polygonPaths', this.polygonPaths)
})
},
openPoly() {
this.polyEditor.open()
},
createPolygon(){
this.polyEditor.close();
this.polyEditor.setTarget();
this.polyEditor.open();
},
closePoly() {
this.polyEditor.close()
},
clearPoly() {
this.$emit('clearPolygonMap')
this.map.destroy()
this.reset()
this.init()
},
reset() {
this.polyEditor = null
this.polygonPaths = []
this.map = null
this.polygons = []
}
}
}
</script>
<style>
.container {
width: 100%;
min-height: 768px;
position: absolute;
}
.btn1 {
position: relative;
width: 90px;
height: 30px;
top: 13px;
left: 10px;
cursor: pointer;
z-index: 10;
}
.btn2 {
position: relative;
width: 90px;
height: 30px;
top: 13px;
left: 20px;
cursor: pointer;
z-index: 10;
}
.btn3 {
position: relative;
width: 90px;
height: 30px;
top: 13px;
left: 30px;
cursor: pointer;
z-index: 10;
}
</style>
调用
<template>
<div>
<BaseMap ref="PolygonMap"
:isEdit="true"
:areas="areas"
:center="center"
@getPolygonMap="getPolygonMap"
@clearPolygonMap="clearPolygonMap"
></BaseMap>
</div>
</template>
<script>
import BaseMap from './baseMap'
export default {
name: 'Test',
components: { BaseMap },
data() {
return {
center: [123.842305,42.286129],
areas: []
}
},
created() {
},
mounted() {
},
methods: {
getPolygonMap(polygon) {
//接收坐标集合
console.log("polygon",polygon);
},
clearPolygonMap() {
//清空坐标集合
this.areas = []
}
}
}
</script>
