高德地图JS API 2.0绘制编辑多个矢量图形（圆形和多边形）

1650880115625

官网地址：JS API 2.0 示例中心

功能：1.可选择绘制类型（圆形或多边形），2.可选择不同区域并随当前区域自适应地图缩放。 3.编辑图形时可根据大小自适应地图缩放。

默认初始矢量图：1.圆形：根据中心点位置，半径1公里圆。2、多边形矢量图默认生成正方形。根据中心点位置，计算生成1公里四个方位的位置。
代码如下：

<template>
  <div>
    <div id="container">
      <div class="region_list">
        <div class="region-list-bg">
          <div
            v-for="(item, i) in mapListSetting"
            :key="i"
            :class="[
              'region-list_block',
              'boxCardBlock',
              item.selected ? 'activeListBlock' : '',
            ]"
            @click="selectDelivery(i)"
          >
            <div v-if="mapListSetting.length != 1">
              <a class="close-modal-sub closeSmall" v-on:click.stop="RemoveItem(i)">
                ×
              </a>
            </div>
            <div class="displayRow alignItemsCenter jscontentbet mb10">
              <label
                class="block-label"
                :style="{ borderColor: item.colorStyle }"
              >
                <span
                  class="block-label_span"
                  :style="{ background: item.colorStyle, opacity: 0.2 }"
                ></span>
              </label>
              <el-input
                v-model="item.name"
                clearable
                placeholder="请输入内容"
                style="width: 150px"
              />
            </div>
            <div class="displayRow alignItemsCenter jscontentbet mb10">
              <label class="region-list_block-label">起送价：</label>
              <el-input
                v-model="item.minPriceout"
                placeholder="00.00"
                style="width: 110px"
                @blur="regExpChange(item.minPriceout,'minPriceout',i)"
                oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
              >
                <template slot="prepend">￥</template>
              </el-input>
            </div>
            <div class="displayRow alignItemsCenter jscontentbet" v-show="compute_type!='2'">
              <label class="region-list_block-label">配送费：</label>
              <el-input
                v-model="item.pscost"
                placeholder="00.00"
                style="width: 110px"
                @blur="regExpChange(item.pscost,'pscost',i)"
                oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
              >
                <template slot="prepend">￥</template>
              </el-input>
            </div>
            <div class="region-list_block-arrow">
            </div>
          </div>
          <div class="addPsqy" v-if="mapListSetting.length <= 10">
            <button
              class="region-list_add"
              type="button"
              @click="addOpenPoly()"
            >
              添加配送区域
            </button>
          </div>
        </div>
      </div>
      <div class="region_type">
        <div class="region_type_contain">
          <div class="region-type_row displayRow alignItemsCenter">
            <label class="region-type_label">配送区域：</label>
            <div class="mr20">
              <el-radio v-model="drawtype" label="0" @change="selectedTypeRadio">
                按半径框选
              </el-radio>
              <el-radio v-model="drawtype" label="1" @change="selectedTypeRadio">
                自定义框选
              </el-radio>
            </div>
            <div class="ml20">
              <label class="region-type_label">半径距离：</label>
              <div class="region-type_custom" v-if="drawtype=='1'">
                区域内
              </div>
              <span v-if="drawtype=='0'">
                <el-input  v-model="circleArea"  style="width: 70px"  @change="changeCircleArea"/>
                公里内
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="fullscreen" @click="clickFun">
        <vab-icon :icon="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'" style="font-size:20px"/>
      </div>
      
    </div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import screenfull from 'screenfull'

export default {
  name: 'MapEdit',
  props: {
    //引用组件页面传来的值
    areas: {
      type: Array,
      default: function () {
        return []
      },
    },
    //中心点
    center: {
      type: Array,
      default: function () {
        return [116.403322, 39.920255]
      },
    },
    //绘制类型
    compute_type: {
      type: String,
      default: function () {
        return "2"
      },
    }
  },
  data() {
    return {
      isFullscreen:false,
      polyEditor: null,  //当前编辑的矢量图
      polygonPaths: [],  //编辑后的多边形对象
      map: null,   //初始化地图
      polygons: [],  //绘制的矢量图数组

      mapListIndex:0, //当前选择的区域index
      mapListSetting: [
        {
          name: '', //区域名称
          minPriceout: '0.00', //起送价
          pscost: '0.00',  //配送费
          selected: true,
          locations_object: [],
          colorStyle: '#1791fc',
          area_type:'1', //配送范围类型 0按半径 1自定义范围
          inkm:'1.000'  //半径
        },
      ],
      initia_locations_object:[], //根据中心点生成的初始位置
      //区域颜色color
      mapColor: [
        { color: '#1791fc' },
        { color: 'rgb(45, 166, 65)' },
        { color: 'rgb(133, 199, 0)' },
        { color: 'rgb(237, 106, 12)' },
        { color: 'rgb(250, 171, 12)' },
        { color: 'rgb(212, 42, 141)' },
        { color: 'rgb(138, 63, 212)' },
        { color: 'rgb(250, 210, 12)' },
        { color: 'rgb(17, 160, 173)' },
        { color: 'rgb(212, 0, 0)' },
      ],
      drawtype: '1', //1 自定义框选， 0 按半径框选
      circleArea:'1.000', 
    }
  },
  watch: {
    'areas':function(){
      //console.log(this.areas);  
    }
  },
  created(){
    console.log(this.areas);
    if(!this.areas) return;
    if(this.areas.length>0){
      this.areas.forEach((element, i) => {
        element.area_type=element.area_type.toString()
        if(i==0){
          this.mapListIndex=i
          element.selected = true
        }else{
          element.selected = false
        }
        if(i<this.areas.length){
          element.colorStyle = this.mapColor[i].color
        }
      })
      this.mapListSetting=this.areas
    }
  },
  mounted() {
    var that=this
    this.init() //初始化Map

    setTimeout(function(){
      //created事件里，若areas值长度大于0，则使用areas传来的数据，反之执行默认初始化数据;
      that.mapListSetting.forEach((element, i) => {
        if(i<that.mapListSetting.length){
          that.drawtype = element.area_type
          that.circleArea =  element.inkm
          that.initAreas(i)
          
          if(i+1==that.mapListSetting.length){
            that.drawtype = that.mapListSetting[0].area_type
          }
        }
        if (i==0) {
          that.drawtype = element.area_type
          that.initPoly(i)
        } 
        
      })
     
    },2000)
    
  },
  
  methods: {
    //点标记
    addMarker() {
      var startMarker = new AMap.Marker({
        position: new AMap.LngLat(this.center[0],this.center[1]),
      });
      this.map.add(startMarker);
    },
    // 简单实现绘制正方形，side 正方形边长，单位米
    // 若需要绘制其他矩形，需自行修改代码
    GetFourPoint(latLng,side){
      var lng=latLng[0]
      let lat=latLng[1]
      path();
      function path(){
        const centerPoint = new AMap.LngLat(lng, lat);
        const upLeftPoint = centerPoint.offset(-side / 2, side / 2);
        const upRightPoint = centerPoint.offset(side / 2, side / 2);
        const leftBottomPoint = centerPoint.offset(-side / 2, -side / 2);
        const rightBottomPoint = centerPoint.offset(side / 2, -side / 2);
        return [
          [upRightPoint.lng, upRightPoint.lat],
          [upLeftPoint.lng, upLeftPoint.lat],
          [leftBottomPoint.lng, leftBottomPoint.lat],
          [rightBottomPoint.lng, rightBottomPoint.lat],
        ];
      }
      this.initia_locations_object=path()  //根据中心点生成的初始位置
      if(!this.areas || this.areas.length==0){
        this.mapListSetting[0].locations_object=path()
      }
      //回显的数据locations_object为null时，默认赋值初始值
      this.mapListSetting.forEach(function(e,index){
        if(!e.locations_object){
          e.locations_object=path()
        }
      })
      // console.log(path());
    },
    async init() {
      await this.initMap()
    },
    async initMap() {
      let AMap = await AMapLoader.load({
        key: '3517b919f6bd44b972cf9f958da111fe',
        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',
          'AMap.ControlBar',
          'AMap.Marker'
        ],
      })
      this.map = new AMap.Map('container', {
        center: this.center,
        resizeEnable: true,
        zoom: 14,
        plugin: [
          //一些工具插件
          {
            pName: 'MapType', //地图类型
            defaultType: 0,
            events: {
              init(instance) {},
            },
          },
        ],
      }) 
      
     
      this.map.addControl(new AMap.ControlBar({position:{ top: "10px", left: 90, right: "10px", } }));
      this.map.addControl(new AMap.ToolBar({position:{ top: '110px', left: 0, right: '40px', } }));
      //this.map.addControl(new AMap.Scale( {position:{ right: '10px', bottom:"10px"} } )); 比例尺
      // 缩放地图到合适的视野级别
      this.map.setFitView()
      
      this.GetFourPoint(this.center, 2000) 
      this.addMarker()
      this.map.on('click', this.showInfoClick);
    },
    //地图点击事件用来测试）
    showInfoClick(e){
      var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置单击了地图！'
      console.log(text)
    },
    initAreas(i,type) {
      if(type=="editType"){
        this.polyEditor.close()
        this.map.remove([this.polygons[i]])
        this.polygons.splice(i, 1)
      }
      
      let col = this.mapListSetting[i].colorStyle

      if (this.drawtype == '1') {
        let path = this.mapListSetting[i].locations_object
        if (path.length <= 0) {
          return
        }

        var polygon = new AMap.Polygon({
          path: path,
          strokeColor: col,
          strokeWeight: 2,
          strokeOpacity: 1,
          fillOpacity: 0.1,
          fillColor: col,
          zIndex: 50,
          bubble: true,
        })
      } else {
        //console.log(i,col)
        var polygon = new AMap.Circle({
          center: this.center,
          radius: this.circleArea*1000, //半径
          borderWeight: 3,
          strokeColor: col,
          strokeOpacity: 1,
          strokeWeight: 2,
          strokeOpacity: 1,
          fillOpacity: 0.4,
          strokeDasharray: [10, 10],
          fillColor: col,
          zIndex: 50,
        })
      }
      
      if(type=="editType"){
        this.polygons.splice(i, 0, polygon)
      }else{
        this.polygons.push(polygon)
      }
      
      if (this.polygons.length <= 0) {
        return
      }
      //地图上新增矢量多边形
      // console.log(this.polygons)
      this.map.add(this.polygons)
    },
    initPoly(i) {
      var that = this
      let opts = {
        editOptions:{strokeColor: this.mapListSetting[i].colorStyle,  fillColor: this.mapListSetting[i].colorStyle,} 
      }
      // console.log(this.polygons)
      if (this.polygons.length > 0) {
        if(this.drawtype=="1"){
          this.polyEditor = new AMap.PolygonEditor( this.map,  this.polygons[i], opts)
        }else{
          this.polyEditor =  new AMap.CircleEditor(this.map, this.polygons[i], opts)
        }
      } else {
        if(this.drawtype=="1"){
          this.polyEditor = new AMap.PolygonEditor(this.map)
        }else{
          this.polyEditor =  new AMap.CircleEditor(this.map)
        }
      }
      that.polyEditor.open()
      this.delivery_area()

     //自适应地图缩放
      that.map.setFitView(that.polygons[i], false, [130, 60, 100, 60])
      that.polyEditor.on('adjust',function(){
        that.map.setFitView(that.polygons[i], false, [130, 60, 100, 60])
      })

      //关闭多边形编辑polygonEditor.close()触发该方法；
      if(this.drawtype=="1"){
        this.polyEditor.on('adjust', 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([
              pointArr[i].lng,
              pointArr[i].lat,
            ])
          }
          that.mapListSetting[i].locations_object=this.polygonPaths
          that.delivery_area()
          console.log('polygonPaths', this.polygonPaths)
        })
      }else{
        this.polyEditor.on('adjust', function (event) {
          //console.log(event);
          that.circleArea = (event.radius)/1000
          that.mapListSetting.forEach((element, index) => {
            if (that.mapListIndex == index) {
              element.inkm = that.circleArea
              that.delivery_area()
            }
          })
        })
      }
    },
    //添加配送区域
    addOpenPoly() {
      if (this.mapListSetting.length >= 10) return

      this.mapListSetting.forEach((element, i) => {
        this.mapColor.forEach((e,j)=>{
          if(element.colorStyle==e.color){
            this.mapColor.splice(j,1)
          }
        })
      })

      var that = this
      that.polyEditor.close()
      this.mapListSetting.push({
        name: '',
        minPriceout: '0.00',
        pscost: '0.00',
        selected: false,
        locations_object: this.initia_locations_object,
        colorStyle : that.mapColor[0].color
      })
      this.circleArea = '1.000'
      this.initAreas(this.mapListSetting.length - 1)
      this.mapListSetting.forEach((element, i) => {
        if (i + 1 == this.mapListSetting.length) {
          element.selected = true
          element.area_type = that.drawtype
          element.inkm = that.circleArea
          that.initPoly(i)
          that.mapListIndex=i
        } else {
          element.selected = false
        }
      })
    },
    //选择编辑的区域
    selectDelivery(i) {
      var that = this
      //console.log(i)
      that.mapListIndex=i,
      that.polyEditor.close()
      that.mapListSetting.forEach((element, index) => {
        if (i == index) {
          element.selected = true
          that.drawtype = element.area_type
          that.circleArea = element.inkm
          that.initPoly(i)
        } else {
          element.selected = false
        }
      })
      // console.log(that.mapListSetting[i].selected);
    },
    //删除编辑区域
    RemoveItem(i) {
      this.mapListSetting.splice(i, 1)
      this.map.remove([this.polygons[i]])
      this.polygons.splice(i, 1)
      
      this.mapColor.push({color:this.mapListSetting[i].colorStyle})
      
      //console.log(i, i+1,this.mapListSetting.length)
      if(i==this.mapListSetting.length){
        this.mapListSetting[i-1].selected=true
        this.mapListIndex=i-1
      }
      if(this.polygons.length==1) {
        this.selectDelivery(0)
      }
    },
    //选择绘制类型
    selectedTypeRadio() {
      this.mapListSetting.forEach((element, index) => {
        if (this.mapListIndex == index) {
          element.area_type=this.drawtype
        }
      })
      //console.log(this.mapListIndex);
      this.initAreas(this.mapListIndex, "editType")
      this.initPoly(this.mapListIndex)
    },
    //更改半径距离
    changeCircleArea(){
      this.mapListSetting.forEach((element, index) => {
        if (this.mapListIndex == index) {
          element.inkm=this.circleArea
          this.initAreas(this.mapListIndex, "editType")
          this.initPoly(this.mapListIndex)
        }
      })
    },
    //保存（这里是向父组件传值）
    delivery_area(){
      this.$emit('getPolygonMap', this.mapListSetting)
    },
    //全屏
    clickFun(){
      const element = document.getElementById('container');//指定全屏区域元素
			if (!screenfull.isEnabled) {
          this.$baseMessage('开启全屏失败', 'error', 'vab-hey-message-error')
      }
      
      this.isFullscreen=!screenfull.isFullscreen
      if (screenfull.isEnabled) {
	      screenfull.request(element);
	   }
      screenfull.toggle()
	},
	//保留两位小数
    regExpChange(val,str,i){
      this.$set(this.mapListSetting[i], str, Number(val).toFixed(2))
    }
  },
}
</script>

<style>
.region-list_block .el-input-group__prepend {
  padding: 0 10px !important;
}
</style>
<style scoped lang="scss">
.displayRow{
  display:flex;
  flex-flow:row;
}
.displayColumn{
  display:flex;
  flex-flow:column; 
}
.alignItemsCenter{
  align-items: center;
}
.jscontentbet{
  justify-content: space-between;
}
#container {
  width: 100%;
  height: 600px;
  position: relative;
  min-width: 660px;
  background: #f3f3f3;
  color: #333333;
}
.region_list {
  width: 210px;
  max-height: 96%;
  position: absolute;
  background: #fff;
  top: 12px;
  left: 12px;
  z-index: 2;
  overflow-y: scroll;
  box-sizing: border-box;
  box-shadow: 0 0 5px #afafaf;
}
.region_list::-webkit-scrollbar {
  width: 0px;
  opacity: 0;
}
.region-list_block {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 22px 12px 12px;
  border: 1px solid transparent;
  border-bottom-color: #ebedf0;
}
.addPsqy {
  width: 100%;
}
.region-list_add {
  display: block;
  padding: 0;
  margin: 10px auto;
  font-size: 14px;
  width: 196px;
  color: #323233;
  line-height: 32px;
  background: #fff;
  outline: none;
  border: 1px solid #dcdee0;
  border-radius: 2px;
  cursor: pointer;
}
.activeListBlock {
  border-color: #1890ff;
}
.block-label {
  width: 15px;
  height: 15px;
  border: solid 1px #ccc;
}
.block-label_span {
  width: 100%;
  height: 100%;
  display: block;
}
.closeSmall {
  top: 4px;
  right: 4px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  line-height: 16px;
}
/** */
.region_type {
  width: 100%;
  position: absolute;
  z-index: 1;
  padding: 12px 12px 12px 244px;
  box-sizing: border-box;
}
.region_type_contain {
  padding: 10px 12px 10px 20px;
  display: flex;
  flex-direction: column;
  background: hsla(0, 0%, 100%, 0.85);
  box-shadow: 0 0 5px #afafaf;
  font-size: 14px;
  max-width: 565px;
}
.region-type_row {
  padding: 10px 0;
  white-space: nowrap;
  overflow-x: auto;
}
.region-type_custom{
  display: inline-block;
}
.region-type_custom::before{
  display: inline-block;
  content: "";
  width: 22px;
  height: 22px;
  margin-top: -4px;
  margin-right: 8px;
  vertical-align: middle;
  background-size: 100%!important;
  background-position: 50%;
  background-repeat: no-repeat;
  background: url('../../../../public/img/icons/area.png');
}
// 选中角标
.activeListBlock .region-list_block-arrow{
  position: absolute;
  right: 0;
  bottom: 0;
  border: 10px solid #1890ff;
  border-top-color: transparent;
  border-left-color: transparent;
}
.region-list_block-arrow::before,.region-list_block-arrow::after{
  position: absolute;
  display: block;
  content: "";
  height: 2px;
  background: #fff;
}
.activeListBlock .region-list_block-arrow::before {
  width: 5px;
  left: -3px;
  bottom: -8px;
  transform: rotate(35deg);
}
.activeListBlock .region-list_block-arrow::after {
  width: 12px;
  left: -1px;
  bottom: -5px;
  transform: rotate(130deg);
}
.fullscreen{
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  border-radius: 50%;
  display: block;
  background: #fff;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
</style>