- <template>
- <div>
-
-
-
- <div class="input-card" style="width: 500px" v-if="isEdit">
- <el-button type="primary" class="btn" @click="clickmap()" style="margin-bottom: 5px">绘制点</el-button>
- <el-button type="danger" class="btn" @click="removeMarker()" style="margin-bottom: 5px">清除点</el-button>
- <el-button type="primary" class="btn" @click="openPoly()" style="margin-bottom: 5px">绘制面</el-button>
- <el-button type="success" class="btn" @click="closePoly()" style="margin-bottom: 5px">结束面</el-button>
- <el-button type="danger" class="btn" @click="clearPoly()">清空</el-button>
- </div>
- <div id="container"></div>
- </div>
- </template>
- <script>
- import AMapLoader from '@amap/amap-jsapi-loader'
-
- export default {
- name: 'AMapPolygon2_0',
- 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 [121.59996, 31.197646]
- }
- },
- // lnglat: {
- // type: Array,
- // default: function() {
- // return []
- // }
- // },
- },
- data() {
- return { polyEditor: null, polygonPaths: [], map: null, polygons: [],lnglat:[],markers:[],markArray:[] }
- },
- watch: {},
- mounted() {
- this.init()
-
- },
- methods: {
- async init() {
- await this.initMap()
- this.initAreas()
- if (this.isEdit) {
- this.initPoly()
- }
- },
- async initMap() {
- let AMap = await AMapLoader.load({
- key: '9b9c04d2714e93c08fd240ad35d0f20a',
- version: '2.0',
- plugins: [
- 'AMap.PolygonEditor',
- 'AMap.Autocomplete',
- 'AMap.PlaceSearch',
- 'AMap.Scale',
- 'AMap.OverView',
- 'AMap.ToolBar',
- 'AMap.MapType',
- 'AMap.PolyEditor',
- 'AMap.CircleEditor',
- 'AMap.Geolocation',
- 'AMap.Geocoder',
- 'AMap.AMapUI']
-
- })
- this.map = new 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 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 AMap.PolygonEditor(this.map, this.polygons[0])
- } else {
- this.polyEditor = new 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.$emit('clearPolygonMap')
- this.map.destroy()
- this.init()
- this.reset()
- setTimeout(()=> {
- this.polyEditor.open()
- this.map.remove(this.markers);
- this.map.off("click", this.clickMapHandler);
- },10)
- // this.reset()
- },
- 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 = []
- },
- //绘制点
- clickmap(){
- this.map.destroy()
- this.init()
- // this.$emit('clearPolygonMap')
- setTimeout(()=> {
- this.map.remove(this.markers);
- this.map.on("click", this.clickMapHandler);
- },100)
- },
- //标记
- clickMapHandler(e) {
- this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
- this.setMarker(this.lnglat);
- },
- // 添加标记
- setMarker(lnglat) {
- console.log("位置", lnglat); // lnglat=[经度,纬度]
- this.markArray.push(lnglat)
- let marker = new AMap.Marker({
- position: lnglat,
- });
- marker.setMap(this.map);
- this.markers.push(marker); // 在data中记录标记点
- this.$emit('getmarkers',lnglat)
- },
- // 删除之前后的标记点
- removeMarker() {
- // 判断是否存被标记的点,有--->移除
- if (this.markers) {
- this.map.remove(this.markers);
- this.map.off("click", this.clickMapHandler);
- this.$emit('getmarkers',[])
- }
- },
- }
- }
- </script>
- <style scoped lang="scss">
- #container {
- width: 100%;
- height: 380px;
- }
- </style>