最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
一、在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 = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
强烈推荐的第三种画多边形的效果图：
***隐藏的彩蛋哦***
图里的 “请输入经纬度” ，可以输入一堆的经纬度坐标，在按“Enter” ，可以直接形成多边形；（注意：输入的格式要和上面显示的坐标全部选中Ctrl+c下来的格式一样）
如：
106.628788 , 29.718379
106.631187 , 29.718143
106.632383 , 29.716281
106.628819 , 29.717013
二、第一种画化：使用Geolocation画多边形（效果是在地图点了，才会形成多边形）
// 新增 编辑 查看
<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="经度 "
></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">关闭</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>
<!-- <el-checkbox @change="checkbox" v-model="enterType">地图上描点</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="请输入经纬度"
></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('请输入正确的经度'))
}
}
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)|[^\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('经纬度格式错误！')
}
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画多边形（效果是：多边形随鼠标左键点击，多边形直接跟着变化）
// 新增 编辑 查看
<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="经度 "
></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">关闭</el-button>
</el-form>
</div>
<div class="map-box">
<div class="map-tool">
<div v-if="ifFalg">
<el-checkbox >地图上描点</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 >输入范围经纬度：</span>
<el-input
type="textarea"
autosize
placeholder="请输入内容"
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()">鼠标绘制</el-button>
<el-button type="primary" v-if="ifFalg" @click="polygonEditor.close()">结束编辑</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个点来确定初始的多边形，所以添加了一个功能：搜索 （功能：点击搜索名称的经纬度；）；
2、然后我再 ‘范围绘制' 的方法里根据“搜索”得来的经纬度，手动的弄了3个经纬度数组。
3、然后就可以快乐的画图了。（这画图是真的方便，特别是画范围很复杂的）。
// 新增 编辑 查看
<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="经度 "
></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">关闭</el-button>
</el-form>
</div>
<div class="map-box">
<div class="map-tool">
<div v-if="ifFalg">
<el-checkbox >地图上描点</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 >输入范围经纬度：</span>
<el-input
type="textarea"
autosize
placeholder="请输入内容"
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()">鼠标绘制</el-button>
<el-button type="primary" v-if="ifFalg" @click="polygonEditor.close()">结束编辑</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('请先输入名称，才能开始画范围！')
return
}
let map = new AMap.Map("map", {
center:[106.55073, 29.56471],
zoom: 15
});
// 多边形覆盖物节点坐标数组
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构建多边形
let polygon = new AMap.Polygon({
path:polygonArr,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: '#1791fc',
zIndex: 50,
})
//将多边形增加到地图上
map.add(polygon)
// 缩放地图到合适的视野级别
map.setFitView([ polygon ])
//构造折线编辑对象，并开启折线的编辑状态
map.plugin(["AMap.PolyEditor"],function(){
let polygonEditor = new AMap.PolyEditor(map,polygon);
vm.polygonEditor =polygonEditor
polygonEditor.open();
//关闭多边形编辑polygonEditor.close()触发该方法；
polygonEditor.on('end', function(event:any) {
// event.target 即为编辑后的多边形对象,event.target.getPath()得到编辑完成后的点数组
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]
}
})
})
});
}
/**
* 地理编码（地址 -> 坐标）
*/
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>
总结
到此这篇关于最全vue的vue-amap使用高德地图插件画多边形范围的文章就介绍到这了,更多相关vue-amap高德地图插件画多边形范围内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
相关文章
Penelope
2021-02-20
Vanora
2021-05-04
Kita
2021-05-26
Dabria
2021-02-18
Claire
2021-05-21
Chipo
2023-07-21
Jacinthe
2023-07-22
Winona
2023-07-22
Ophelia
2023-07-22
Agnes
2023-07-22
Aurora
2023-07-22
Glory
2023-07-22
Pelagia
2023-07-22
Ianthe
2023-07-22
Nafisa
2023-07-22
Nora
2023-07-28
Rhea
2023-08-08