最全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 '...

一、在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')

第三种画多边形的效果图:

    注意:1、这种画多边形,开始就需要一个初始的多边形;

       2、所以,输入要画多边形范围的地名,点击搜索,地图会跳转到搜索的地方,同时得到经纬度;

       3、点“范围绘制”时,我再方法里根据第2步的经纬度,初始了一个多边形;

    ****隐藏彩蛋****

  下图的 “请输入经纬度” 可以输入一大组的经纬度,按回车键,也可以画出多边形,在按“范围绘制”也可以更改;(格式如下:)

这个格式就是复制的地图上显示的经纬度坐标
106.2246 , 29.59258 106.225064 , 29.593287 106.226137 , 29.593558 106.22692 , 29.593083

二、第一种画化:使用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)|[^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('保存成功!'
                        
  • 发表于 2020-07-17 17:20
  • 阅读 ( 131 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除