您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了vue-amap如何實(shí)現(xiàn)使用高德地圖插件畫多邊形范圍,內(nèi)容簡(jiǎn)而易懂,希望大家可以學(xué)習(xí)一下,學(xué)習(xí)完之后肯定會(huì)有收獲的,下面讓小編帶大家一起來看看吧。
一、在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代碼如下:
import Vue from 'vue' import VueAMap from 'vue-amap' import ElementUI from 'element-ui' import App from './App.vue' import router from './router' import store from './store' import './registerServiceWorker' Vue.use(VueAMap) Vue.use(ElementUI) VueAMap.initAMapApiLoader({ // 高德的key key: '你的高德key', // 插件集合 plugin: [ 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geocoder', 'AMap.Geolocation' ], // 高德 sdk 版本,默認(rèn)為 1.4.4 v: '1.4.10' }) Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
強(qiáng)烈推薦的第三種畫多邊形的效果圖:
***隱藏的彩蛋哦***
圖里的 “請(qǐng)輸入經(jīng)緯度” ,可以輸入一堆的經(jīng)緯度坐標(biāo),在按“Enter” ,可以直接形成多邊形;(注意:輸入的格式要和上面顯示的坐標(biāo)全部選中Ctrl+c下來的格式一樣)
如:
106.628788 , 29.718379
106.631187 , 29.718143
106.632383 , 29.716281
106.628819 , 29.717013
二、第一種畫化:使用Geolocation畫多邊形(效果是在地圖點(diǎn)了,才會(huì)形成多邊形)
// 新增 編輯 查看 <template> <div class="point"> <el-header></el-header> <div class="action-bar"> <el-form class="inline-form" :rules="rules" ref="formData" size="small" :model="formData"> <el-form-item label label-width="220" prop="location"> <el-input :disabled="!ifFalg" class="name-input" clearable v-model="formData.location" placeholder="名稱" maxlength="30" ></el-input> </el-form-item> <el-form-item label prop="longitude"> <el-input :disabled="!ifFalg" class="my-input" clearable v-model.number="formData.longitude" placeholder="經(jīng)度 " ></el-input> </el-form-item> <el-form-item label prop="latitude"> <el-input :disabled="!ifFalg" class="my-input" clearable v-model.number="formData.latitude" placeholder="緯度" ></el-input> </el-form-item> <el-button class="my-button" v-if="ifFalg" type="primary" @click="save" size="small">保存</el-button> <el-button class="my-button" size="small" @click="close">關(guān)閉</el-button> </el-form> </div> <div class="map-box"> <div class="map-tool"> <div v-if="ifFalg"> <el-checkbox v-model="enterType">地圖上描點(diǎn)</el-checkbox> </div> <!-- <el-checkbox @change="checkbox" v-model="enterType">地圖上描點(diǎn)</el-checkbox> --> <div class="longlat"> <ul> <li v-for="(item, index) in lnglatpoints" :key="index"> {{item.longitude}} , {{item.latitude}} <i v-if="ifFalg" class="el-icon-close" @click="deletes(item)" ></i> </li> </ul> <el-input v-if="ifFalg" class="my-input" size="small" clearable v-model="lngLat" @keyup.enter.native="submitEnter" placeholder="請(qǐng)輸入經(jīng)緯度" ></el-input> <el-button v-if="ifFalg" size="small" @click="clear" type="primary" class="claer">清除</el-button> </div> </div> <div class="map" id="map"> <el-amap ref="map" bubble :plugin="plugin" :zoom="map.zoom" :center="map.center" :events="events" id="amap" > <el-amap-polygon :events="plugin.events" :path="path" :draggable="draggable" fillColor="#2b83f9" fillOpacity="0.5" strokeWeight="0" strokeColor="#2b83f9" strokeOpacity="0.5" ></el-amap-polygon> <!-- <el-amap-marker :position="marker.position" :events="plugin.events"></el-amap-marker> --> <el-amap-marker v-if="formData.type === 1" :position="map.center" :label="label"></el-amap-marker> </el-amap> </div> </div> </div> </template> <script lang="ts"> import * as api from '@/utils/api/index' import { Component, Vue } from 'vue-property-decorator' import eHeader from '@/components/header.vue' import { constants } from 'http2' import * as util from '@/utils/util.ts' const testLongitude = (rule: any, value: string, callback: Function) => { if (util.regExp.longitudeRegExp.test(value)) { return callback() } else { return callback(new Error('請(qǐng)輸入正確的經(jīng)度')) } } const testLatitude = (rule: any, value: string, callback: Function) => { if (util.regExp.latitudeRegExp.test(value)) { return callback() } else { return callback(new Error('請(qǐng)輸入正確的緯度')) } } @Component({ components: { 'el-header': eHeader } }) export default class point extends Vue { private breadcrumbId = 0 private id = '' private lngLat = '' private ifFalg = true private map = { zoom: 15, center: [106.55073, 29.56471] } private path: any = [] private draggable = false private lnglatpoints: any = [] private enterType = false // 錄入坐標(biāo) | 地圖上描點(diǎn) private cities = [] private formData = { location: '', longitude: '', latitude: '' } plugin = { pName: 'Geolocation', events: {} } events = {} private test = 1 private rules = { location: [ { required: true, message: '請(qǐng)輸入接送點(diǎn)名稱', trigger: 'blur' } ], longitude: [{ validator: testLongitude, trigger: 'blur' }], latitude: [{ validator: testLatitude, trigger: 'blur' }] } mounted() { this.id = this.$route.params.id this.breadcrumbId = Number(this.$route.query.breadcrumbId) if (this.breadcrumbId === 2) { this.ifFalg = false } if (this.id !== '-1') { this.details() } // this.city() let _this: any = this // 地圖點(diǎn)擊事件 _this.events = { click: (e: any) => { if (this.enterType) { this.path = [] console.log(e.lnglat) let lnglat = e.lnglat this.lnglatpoints.push({ latitude: lnglat.lat, longitude: lnglat.lng }) console.log(this.lnglatpoints) this.lnglatpoints.map((val: any, index: number) => { console.log(index) if (index === 0) { this.map.center = [val.longitude, val.latitude] } let arr = [val.longitude, val.latitude] this.path.push(arr) }) // this.setFitView() } } } // 多邊形點(diǎn)擊事件 _this.plugin.events = { click: (e: any) => { if (this.enterType) { this.path = [] console.log(e.lnglat) let lnglat = e.lnglat this.lnglatpoints.push({ latitude: lnglat.lat, longitude: lnglat.lng }) console.log(this.lnglatpoints) this.lnglatpoints.map((val: any, index: number) => { console.log(index) if (index === 0) { this.map.center = [val.longitude, val.latitude] } let arr = [val.longitude, val.latitude] this.path.push(arr) }) // this.setFitView() } } } }// 獲取接送范圍集合 details() { const loading = this.$loading({ lock: true, text: '加載中...' }) api.main.boss_line_point__get({ params: {param: this.id}}).then((res: any) => { if (res.data.success) { const response = res.data.data this.formData = response let points = res.data.data.points if (points != null) { for (let i = 0; i < points.length; i++) { points[i].id = i } this.lnglatpoints = points this.lnglatpoints.map((val: any, index: number) => { if (index === 0) { this.map.center = [val.longitude, val.latitude] } let arr = [val.longitude, val.latitude] this.path.push(arr) }) } else { this.map.center = [ Number(this.formData.longitude), Number(this.formData.latitude) ] this.label.content = this.formData.location } setTimeout(this.setFitView, 0) } else { this.$message.error(res.data.message) } loading.close() }) } // 移除經(jīng)緯度 deletes(data: any) { let e: any = this this.path = [] for (let i = 0; i < e.lnglatpoints.length; i++) { if ( data.latitude === e.lnglatpoints[i].latitude && data.longitude === e.lnglatpoints[i].longitude ) { e.lnglatpoints.splice(i, 1) } } console.log(e.path) this.lnglatpoints.map((val: any, index: number) => { let arr = [val.longitude, val.latitude] this.path.push(arr) if (index === 0) { this.map.center = [val.longitude, val.latitude] } console.log(this.path) }) } clear() { this.$confirm('確認(rèn)刪除繪制的接送區(qū)域?', '刪除', { confirmButtonText: '確定', cancelButtonText: '取消', type: 'warning' }) .then(() => { let self: any = this this.path = [] this.lnglatpoints = [] // this.map.center = [106.5507300000, 29.5647100000] this.lngLat = '' self.formData.points = [] }) .catch(() => {}) } // 輸入經(jīng)緯度 submitEnter() { // eslint-disable-next-line const illegalRegExp = /^(\D|\d*\.?\d*,*\s)|[^\d\s,\.]|^\d*\.?\d*$|(,\.|\.,)+|(\d*\.*\d*,){2,}|(\d*\.){2,}|(\d*\s){2,}|(\s\d*\.?\d*|\D)$/g const replaceWhiteSpaceRegExp = /(?<=(,|\.|\s))\s+|\s+(?=(,|\.))|^\s|\s+$/g this.lngLat = this.lngLat.replace(replaceWhiteSpaceRegExp, '') if (illegalRegExp.test(this.lngLat)) { return this.$message.error('經(jīng)緯度格式錯(cuò)誤!') } const lnglatArray = this.lngLat.split(' ') lnglatArray.forEach(lnglatString => { const lnglatObject = { longitude: lnglatString.split(',')[0], latitude: lnglatString.split(',')[1] } this.lnglatpoints.push(lnglatObject) }) this.path = [] this.lnglatpoints.map((val: any, index: number) => { let arr = [val.longitude, val.latitude] this.path.push(arr) this.lngLat = '' if (index === 0) { this.map.center = [val.longitude, val.latitude] } }) } setFitView() { const vm: any = this let map = vm.$refs.map.$$getInstance() map.setFitView() } close() { this.$router.push({ name: 'pointList' }) } save() { let e: any = this let params: any = {} if (this.id !== '-1') { // 編輯 e.formData.id = this.id params.id = this.id } e.formData.points = this.lnglatpoints if (e.formData.location === '' || e.formData.location === null) { this.$message.warning('名稱不能為空!') return } if (this.lnglatpoints.length < 3 && e.formData.type === 2) { this.$message.warning('經(jīng)緯度不能小于三組!') return } params.points = this.lnglatpoints params.location = this.formData.location params.longitude = this.formData.longitude params.latitude = this.formData.latitude if (this.id !== '-1') { api.main.boss_line_point_update_post({ data: params }).then((res: any) => { if (res.data.success) { this.$message.success('保存成功!') this.$router.push({ name: 'pointList' }) } else { this.$message.error(res.data.message) } }) } else { api.main .boss_line_point_addAndBindLine_post({ data: params }) .then((res: any) => { if (res.data.success) { this.$message.success('保存成功!') this.$router.push({ name: 'pointList' }) } else { this.$message.error(res.data.message) } }) } } } </script> <style lang="scss" scoped> ul, li { list-style: none; margin: 0; padding: 0; } .inline-form { display: flex; display: -webkit-flex; flex-direction: row; flex-wrap: wrap; .el-form-item { margin-bottom: 10px; margin-left: 15px; display: flex; } .el-button { margin-left: 15px; height: 32px; } } .action-bar { box-sizing: border-box; padding: 10px; padding-bottom: 0; border: { top: 1px solid #ddd; bottom: 1px solid #ddd; } .my-input { width: 150px; } .name-input { width: 260px; } } .el-select-dropdown__item { background-color: white; text-indent: 10px; } .claer { margin-top: 15px; float: right; } $map_height: calc(100vh - 55px - 50px - 75px - 15px); .map-box { position: relative; height: $map_height; .map-tool { position: absolute; width: 220px; z-index: 170; top: 0; left: 0; max-height: 100%; box-sizing: border-box; padding: 10px; overflow-y: auto; background-color: #fff; box-shadow: 2px 4px 7px 1px #dedede; } .map { transition: all 0.6s; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } } .swiper-box { position: relative; z-index: 161; display: flex; align-items: center; flex-direction: row; justify-content: center; width: 100%; transition: transform ease-in 0.6s; transform: translateX(0); white-space: nowrap; .swiper-item { width: 100%; height: $map_height; } } .hide-text-area { transform: translateX(-100%); } .gray-map { filter: grayscale(90%); } .longlat { margin-top: 15px; padding-bottom: 15px; ul { li { padding: 6px; background-color: #ddd; border-radius: 4px; margin-bottom: 15px; font-size: 14px; color: #666; position: relative; } } } .el-icon-close { display: inline-block; position: absolute; right: 10px; color: #000 !important; cursor: pointer; } .my-button { margin-bottom: 10px; } </style>
三、第二種畫化:使用AMap.MouseTool畫多邊形(效果是:多邊形隨鼠標(biāo)左鍵點(diǎn)擊,多邊形直接跟著變化)
// 新增 編輯 查看 <template> <div class="point"> <el-header></el-header> <div class="action-bar"> <el-form class="inline-form" :rules="rules" ref="formData" size="small" :model="formData"> <el-form-item label prop="location"> <el-input :disabled="!ifFalg" class="name-input" clearable v-model="formData.location" placeholder="名稱" maxlength="30" ></el-input> </el-form-item> <el-form-item label prop="longitude"> <el-input :disabled="!ifFalg" class="my-input" clearable v-model.number="formData.longitude" placeholder="經(jīng)度 " ></el-input> </el-form-item> <el-form-item label prop="latitude"> <el-input :disabled="!ifFalg" class="my-input" clearable v-model.number="formData.latitude" placeholder="緯度" ></el-input> </el-form-item> <el-button class="my-button" v-if="ifFalg" type="primary" @click="save" size="small">保存</el-button> <el-button class="my-button" size="small" @click="close">關(guān)閉</el-button> </el-form> </div> <div class="map-box"> <div class="map-tool"> <div v-if="ifFalg"> <el-checkbox >地圖上描點(diǎn)</el-checkbox> </div> <div class="longlat"> <ul><li v-for="(item, index) in lnglatpoints" :key="index"> {{item.longitude}} , {{item.latitude}} <i v-if="ifFalg" class="el-icon-close" @click="deletes(item)" ></i> </li> </ul> <br> <div> <span >輸入范圍經(jīng)緯度:</span> <el-input type="textarea" autosize placeholder="請(qǐng)輸入內(nèi)容" v-model="lnglatpointsString"> </el-input> </div> <el-button v-if="ifFalg" size="small" @click="clear1" type="primary" class="claer1">確定</el-button> <el-button v-if="ifFalg" size="small" @click="clear" type="primary" class="claer">清除</el-button> </div> </div> <div class="map" id="map"> <el-amap ref="map" bubble :zoom="map.zoom" :center="map.center" :events="mapEvents" id="amap" > <el-amap-polygon :events="plugin.events" :path="path" fillColor="#2b83f9" fillOpacity="0.5" strokeWeight="0" strokeColor="#2b83f9" strokeOpacity="0.5" ></el-amap-polygon> <el-amap-marker v-if="formData.type === 1" :position="map.center" :label="label"></el-amap-marker> </el-amap> </div> <div class="my-tools"> <el-row> <el-button type="primary" v-if="ifFalg" @click="drawPolygon()">鼠標(biāo)繪制</el-button> <el-button type="primary" v-if="ifFalg" @click="polygonEditor.close()">結(jié)束編輯</el-button> </el-row> </div> </div> </div> </template> <script lang="ts">同上 /** * 繪制多邊形 */ private drawPolygon () { let vm: any = this let map = vm.$refs.map.$$getInstance() map.plugin(['AMap.MouseTool'], function () { var mouseTool = new AMap.MouseTool(map) var drawPolygon = mouseTool.polygon() AMap.event.addListener(mouseTool, 'draw', function (e: any) { e.obj.Je.visible = false let path = e.obj.getPath() vm.drawPolygonsToMap(path) path.forEach((point:any) => { vm.lnglatpoints.push({ latitude: point.lat, longitude: point.lng }) }); // vm.mapDates =path // e.obj.hide() mouseTool.close() }) }) } 同上 } </script> <style lang="scss" scoped> 和上面一樣 </style>
三、第三種畫化:使用AMap.Polygon和AMap.PolyEditor畫多邊形(推薦,效果是:https://lbs.amap.com/api/javascript-api/example/overlayers/polygon-draw-and-edit)
注意哦:1、以為這種畫多邊形,先需要3個(gè)點(diǎn)來確定初始的多邊形,所以添加了一個(gè)功能:搜索 (功能:點(diǎn)擊搜索名稱的經(jīng)緯度;);
2、然后我再 ‘范圍繪制' 的方法里根據(jù)“搜索”得來的經(jīng)緯度,手動(dòng)的弄了3個(gè)經(jīng)緯度數(shù)組。
3、然后就可以快樂的畫圖了。(這畫圖是真的方便,特別是畫范圍很復(fù)雜的)。
// 新增 編輯 查看 <template> <div class="point"> <el-header></el-header> <div class="action-bar"> <el-form class="inline-form" :rules="rules" ref="formData" size="small" :model="formData"> <el-form-item label prop="location"> <el-input :disabled="!ifFalg" class="name-input" clearable v-model="formData.location" placeholder="名稱" maxlength="30" ></el-input> </el-form-item> <el-button class="my-button" type="info" @click="getLocation" size="small">搜索</el-button> <el-form-item label prop="longitude"> <el-input :disabled="!ifFalg" class="my-input" clearable v-model.number="formData.longitude" placeholder="經(jīng)度 " ></el-input> </el-form-item> <el-form-item label prop="latitude"> <el-input :disabled="!ifFalg" class="my-input" clearable v-model.number="formData.latitude" placeholder="緯度" ></el-input> </el-form-item> <el-button class="my-button" v-if="ifFalg" type="primary" @click="save" size="small">保存</el-button> <el-button class="my-button" size="small" @click="close">關(guān)閉</el-button> </el-form> </div> <div class="map-box"> <div class="map-tool"> <div v-if="ifFalg"> <el-checkbox >地圖上描點(diǎn)</el-checkbox> </div> <div class="longlat"> <ul> <li v-for="(item, index) in lnglatpoints" :key="index"> {{item.longitude}} , {{item.latitude}} <i v-if="ifFalg" class="el-icon-close" @click="deletes(item)" ></i> </li> </ul> <br> <div> <span >輸入范圍經(jīng)緯度:</span> <el-input type="textarea" autosize placeholder="請(qǐng)輸入內(nèi)容" v-model="lnglatpointsString"> </el-input> </div> <el-button v-if="ifFalg" size="small" @click="clear1" type="primary" class="claer1">確定</el-button> <el-button v-if="ifFalg" size="small" @click="clear" type="primary" class="claer">清除</el-button> </div> </div> 同上 <div class="my-tools"> <el-row> <el-button type="primary" v-if="ifFalg" @click="drawPolygon()">鼠標(biāo)繪制</el-button> <el-button type="primary" v-if="ifFalg" @click="polygonEditor.close()">結(jié)束編輯</el-button> </el-row> </div> </div> </div> </template> <script lang="ts"> 同上 //畫多邊形 private drawPolygon(){ let vm: any = this if (vm.formData.location === '' || vm.formData.location === null) { this.$message.warning('請(qǐng)先輸入名稱,才能開始畫范圍!') return } let map = new AMap.Map("map", { center:[106.55073, 29.56471], zoom: 15 }); // 多邊形覆蓋物節(jié)點(diǎn)坐標(biāo)數(shù)組 let polygonArr:any = [] let lng = Number(this.formData.longitude) let lat = Number(this.formData.latitude) if(vm.path.length > 0){ polygonArr = vm.path }else{ polygonArr.push([lng, lat]) polygonArr.push([lng, lat - 0.001]) polygonArr.push([lng - 0.001, lat - 0.001]) } //使用 AMap.Polygon構(gòu)建多邊形 let polygon = new AMap.Polygon({ path:polygonArr, strokeColor: "#FF33FF", strokeWeight: 6, strokeOpacity: 0.2, fillOpacity: 0.4, fillColor: '#1791fc', zIndex: 50, }) //將多邊形增加到地圖上 map.add(polygon) // 縮放地圖到合適的視野級(jí)別 map.setFitView([ polygon ]) //構(gòu)造折線編輯對(duì)象,并開啟折線的編輯狀態(tài) map.plugin(["AMap.PolyEditor"],function(){ let polygonEditor = new AMap.PolyEditor(map,polygon); vm.polygonEditor =polygonEditor polygonEditor.open(); //關(guān)閉多邊形編輯polygonEditor.close()觸發(fā)該方法; polygonEditor.on('end', function(event:any) { // event.target 即為編輯后的多邊形對(duì)象,event.target.getPath()得到編輯完成后的點(diǎn)數(shù)組 let pointArr = event.target.getPath() vm.lnglatpoints = [] pointArr.forEach((point:any)=>{ vm.lnglatpoints.push({latitude: point.lat,longitude: point.lng}) }) vm.path = [] vm.lnglatpoints.map((val: any, index: number) => { let arr = [val.longitude, val.latitude] vm.path.push(arr) if (index === 0) { vm.map.center = [val.longitude, val.latitude] } }) }) }); } /** * 地理編碼(地址 -> 坐標(biāo)) */ private getLocation () { let loc = this.formData.location AMap.plugin('AMap.Geocoder', () => { let geocoder = new AMap.Geocoder() geocoder.getLocation(loc, (status: string, result: any) => { if (status === 'complete' && result.info === 'OK') { let { lat, lng } = result.geocodes[0].location if (lat && lng) { this.map.center = [lng, lat] this.formData.longitude=lng this.formData.latitude=lat } } }) }) } 同上 } </script> <style lang="scss" scoped> 和上面一樣 </style>
以上就是關(guān)于vue-amap如何實(shí)現(xiàn)使用高德地圖插件畫多邊形范圍的內(nèi)容,如果你們有學(xué)習(xí)到知識(shí)或者技能,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。