文章詳情頁

最全vue的vue-amap使用高德地圖插件畫多邊形范圍的示例代碼

瀏覽：165日期：2022-06-12 08:31:05

一、在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 版本，默認為 1.4.4 v: ’1.4.10’})Vue.config.productionTip = falsenew Vue({ router, store, render: h => h(App)}).$mount(’#app’)

強烈推薦的第三種畫多邊形的效果圖：

***隱藏的彩蛋哦***

圖里的 “請輸入經緯度” ，可以輸入一堆的經緯度坐標，在按“Enter” ，可以直接形成多邊形；（注意：輸入的格式要和上面顯示的坐標全部選中Ctrl+c下來的格式一樣）

如：

106.628788 , 29.718379106.631187 , 29.718143106.632383 , 29.716281106.628819 , 29.717013

最全vue的vue-amap使用高德地圖插件畫多邊形范圍的示例代碼

二、第一種畫化：使用Geolocation畫多邊形（效果是在地圖點了，才會形成多邊形）

// 新增編輯查看 <template> <div class='point'> <el-header></el-header> <div class='action-bar'> <el-form :rules='rules' ref='formData' size='small' :model='formData'> <el-form-item label label- prop='location'> <el-input :disabled='!ifFalg' clearable v-model='formData.location' placeholder='名稱' maxlength='30' ></el-input> </el-form-item> <el-form-item label prop='longitude'> <el-input :disabled='!ifFalg' clearable v-model.number='formData.longitude' placeholder='經度 ' ></el-input> </el-form-item> <el-form-item label prop='latitude'> <el-input :disabled='!ifFalg' clearable v-model.number='formData.latitude' placeholder='緯度' ></el-input> </el-form-item> <el-button v-if='ifFalg' type='primary' @click='save' size='small'>保存</el-button> <el-button size='small' @click='close'>關閉</el-button> </el-form> </div> <div class='map-box'> <div class='map-tool'> <div v-if='ifFalg'> <el-checkbox v-model='enterType'>地圖上描點</el-checkbox> </div>  <div class='longlat'> <ul> <li v-for='(item, index) in lnglatpoints' :key='index'> {{item.longitude}} , {{item.latitude}} <i v-if='ifFalg' @click='deletes(item)' ></i> </li> </ul> <el-input v-if='ifFalg' size='small' clearable v-model='lngLat' @keyup.enter.native='submitEnter' placeholder='請輸入經緯度' ></el-input> <el-button v-if='ifFalg' size='small' @click='clear' type='primary' class='claer'>清除</el-button> </div> </div> <div id='map'> <el-amap ref='map' bubble :plugin='plugin' :zoom='map.zoom' :center='map.center' :events='events' > <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 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(’請輸入正確的經度’)) }}const testLatitude = (rule: any, value: string, callback: Function) => { if (util.regExp.latitudeRegExp.test(value)) { return callback() } else { return callback(new Error(’請輸入正確的緯度’)) }}@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 // 錄入坐標 | 地圖上描點 private cities = [] private formData = { location: ’’, longitude: ’’, latitude: ’’ } plugin = { pName: ’Geolocation’, events: {} } events = {} private test = 1 private rules = { location: [ { required: true, message: ’請輸入接送點名稱’, 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 // 地圖點擊事件 _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() } } } // 多邊形點擊事件 _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() }) } // 移除經緯度 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(’確認刪除繪制的接送區域？’, ’刪除’, { 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(() => {}) } // 輸入經緯度 submitEnter() { // eslint-disable-next-line const illegalRegExp = /^(D|d*.?d*,*s)|[^ds,.]|^d*.?d*$|(,.|.,)+|(d*.*d*,){2,}|(d*.){2,}|(d*s){2,}|(sd*.?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(’經緯度格式錯誤！’) } 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(’經緯度不能小于三組！’) 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畫多邊形（效果是：多邊形隨鼠標左鍵點擊，多邊形直接跟著變化）

三、第三種畫化：使用AMap.Polygon和AMap.PolyEditor畫多邊形（推薦，效果是：https://lbs.amap.com/api/javascript-api/example/overlayers/polygon-draw-and-edit）

注意哦：1、以為這種畫多邊形，先需要3個點來確定初始的多邊形，所以添加了一個功能：搜索（功能：點擊搜索名稱的經緯度；）；

2、然后我再 ‘范圍繪制’ 的方法里根據“搜索”得來的經緯度，手動的弄了3個經緯度數組。

3、然后就可以快樂的畫圖了。（這畫圖是真的方便，特別是畫范圍很復雜的）。

總結

到此這篇關于最全vue的vue-amap使用高德地圖插件畫多邊形范圍的文章就介紹到這了,更多相關vue-amap高德地圖插件畫多邊形范圍內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！

高德地圖

上一條：華為watchgt2pro怎么綁定支付寶下一條：vue使用axios實現excel文件下載的功能

相關文章：

1. 企業微信打卡定位怎么修改位置2. 快手設置備注名方法教程分享3. 谷歌瀏覽器怎樣保存書簽4. 貓眼電影如何邀請好友選座5. 如何查看微信公眾號是訂閱號還是服務號6. Word怎么設置文字對齊字符網格7. 遙望app如何關閉個性化廣告8. 閑魚怎么查看取件碼9. qq錢包掃碼支付教程10. 美團差評顯示多久自動刪除

排行榜

					
					如何查看微信公眾號是訂閱號還是服務號
遙望app如何關閉個性化廣告
快手設置備注名方法教程分享
貓眼電影如何邀請好友選座
Word怎么設置文字對齊字符網格
谷歌瀏覽器怎樣保存書簽
企業微信打卡定位怎么修改位置
俺來也如何取消訂單
美圖秀秀圖片美顏功能不生效怎么辦
qq錢包掃碼支付教程
如何設置迅雷影音渲染模式
				