目前网上vue封装的第三方组件都是基于高德1.0的版本,使用体验感较差,本文直接是基于2.0官网的API的矢量多边形功能
参考文档:
JSAPI 的加载-入门-教程-地图 JS API v2.0|高德地图API (amap.com)
多边形编辑器-矢量覆盖物编辑-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)
矢量图形-覆盖物-教程-地图 JS API v2.0|高德地图API (amap.com)
参考手册-地图 JS API v2.0 | 高德地图API (amap.com)
效果
功能
- 支持多个区域查看
- 单个区域编辑
安装
npm i @amap/amap-jsapi-loader --save
代码
<template> <div> <div id="container"></div> <div class="input-card" style="width: 120px" v-if="isEdit"> <button class="btn" @click="openPoly()" style="margin-bottom: 5px">开始编辑</button> <button class="btn" @click="closePoly()" style="margin-bottom: 5px">结束编辑</button> <button class="btn" @click="clearPoly()">清空</button> </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] } } }, data() { return { polyEditor: null, polygonPaths: [], map: null, polygons: [] } }, 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: '你的高德Key', 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.polyEditor.open() }, closePoly() { this.polyEditor.close() }, clearPoly() { this.$emit('clearPolygonMap') this.map.destroy() this.init() } } } </script> <style scoped lang="scss"> #container { width: 100%; height: 600px; } </style>
使用
<template> <div> <AMapPolygon2_0 ref="PolygonMap" :isEdit="true" :areas="areas" :center="center" @getPolygonMap="getPolygonMap" @clearPolygonMap="clearPolygonMap" ></AMapPolygon2_0> </div> </template> <script> import AMapPolygon2_0 from '@/components/AMapPolygon2_0' import { getGeo } from '@/api/system/amap' export default { name: 'Test', components: { AMapPolygon2_0 }, data() { return { center: [], path: [], areas: [] } }, created() { }, mounted() {
var path = [
{lng:116.403322, lat:39.920255},
{lng:116.410703, lat:39.897555},
{lng:116.402292, lat:39.892353},
{lng:116.389846, lat:39.891365}
]
this.areas.push(path) }, methods: { getPolygonMap(polygon) { //接收坐标集合 }, clearPolygonMap() { //清空坐标集合 }, } </script>