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"><divv-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"><labelclass="block-label":style="{ borderColor: item.colorStyle }"><spanclass="block-label_span":style="{ background: item.colorStyle, opacity: 0.2 }"></span></label><el-inputv-model="item.name"clearableplaceholder="请输入内容"style="width: 150px"/></div><div class="displayRow alignItemsCenter jscontentbet mb10"><label class="region-list_block-label">起送价：</label><el-inputv-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-inputv-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"><buttonclass="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, //当前选择的区域indexmapListSetting: [{name: '', //区域名称minPriceout: '0.00', //起送价pscost: '0.00', //配送费selected: true,locations_object: [],colorStyle: '#1791fc',area_type:'1', //配送范围类型 0按半径 1自定义范围inkm:'1.000' //半径},],initia_locations_object:[], //根据中心点生成的初始位置//区域颜色colormapColor: [{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=ielement.selected = true}else{element.selected = false}if(i<this.areas.length){element.colorStyle = this.mapColor[i].color}})this.mapListSetting=this.areas}},mounted() {var that=thisthis.init() //初始化MapsetTimeout(function(){//created事件里，若areas值长度大于0，则使用areas传来的数据，反之执行默认初始化数据;that.mapListSetting.forEach((element, i) => {if(i<that.mapListSetting.length){that.drawtype = element.area_typethat.circleArea = element.inkmthat.initAreas(i)if(i+1==that.mapListSetting.length){that.drawtype = that.mapListSetting[0].area_type}}if (i==0) {that.drawtype = element.area_typethat.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].colorStyleif (this.drawtype == '1') {let path = this.mapListSetting[i].locations_objectif (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 = thislet 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.polygonPathsthat.delivery_area()console.log('polygonPaths', this.polygonPaths)})}else{this.polyEditor.on('adjust', function (event) {//console.log(event);that.circleArea = (event.radius)/1000that.mapListSetting.forEach((element, index) => {if (that.mapListIndex == index) {element.inkm = that.circleAreathat.delivery_area()}})})}},//添加配送区域addOpenPoly() {if (this.mapListSetting.length >= 10) returnthis.mapListSetting.forEach((element, i) => {this.mapColor.forEach((e,j)=>{if(element.colorStyle==e.color){this.mapColor.splice(j,1)}})})var that = thisthat.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 = trueelement.area_type = that.drawtypeelement.inkm = that.circleAreathat.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 = truethat.drawtype = element.area_typethat.circleArea = element.inkmthat.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=truethis.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.circleAreathis.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.isFullscreenif (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>
