vue-baidu-map矩形拖动及编辑

本文介绍了如何在百度地图中使用BaiduMap和Vue-Baidu-Map组件绘制可整体拖动的矩形,通过初始化对角线并限制编辑,实现在地图上自由调整矩形。关键代码展示了如何控制矩形四点和对角线的交互以保持形状不变。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

百度地图里面,只有折线、多边形和圆形, 那么怎么去绘制矩形,并且实现矩形可以整体拖动呢?

首先,我们知道,矩形四个点的规律,分别是

左下角:{lng:this.mapCenter.lng - 0.01,lat:this.mapCenter.lat -0.01},

左上角:{lng:this.mapCenter.lng - 0.01,lat:this.mapCenter.lat + 0.01},

 右上角:{lng:this.mapCenter.lng + 0.01,lat:this.mapCenter.lat + 0.01},

 右下角:{lng:this.mapCenter.lng + 0.01,lat:this.mapCenter.lat - 0.01}

因此,可以通过这种方式去初始化一个正方形,如果你要自己去绘制的话,可以借助drawManage

编辑原理:

 绘制出来的矩形如果随意编辑,就会变成多边形,因此,我们限制初始化的矩形不可编辑,给矩形添加一条对角线,通过编辑对角线,拖动对角线,让矩形根据对角线的变化来变化,实现举行的编辑,效果如图:

 完整代码:

<div :style="{height: tableHeight + 'px'}">
            <baidu-map style="height: 100%" class="map" :center="mapCenter" :zoom="18" :scroll-wheel-zoom="true"
                @ready="handler" :map-click="false" @mousemove="moveEvent" :dragging="mapDragging">
                
                <bm-polygon :path="overlays" stroke-color="#0000ff" :stroke-opacity="0.3" fill-color="#39B1FC" :fill-opacity="0.1"
                    :stroke-weight="1" :editing="false"  @lineupdate="updatePolygonPath" @mouseover="mapDragging=false"
		            @mouseout="mapDragging=true"
		            @mousedown="areaDragging=true;mapDragging=false"
		            @mouseup="areaDragging=false"/>
                <bm-polyline :path="polylinePath" stroke-color="#0000ff" :stroke-opacity="0.3" :stroke-weight="1" :editing="true"
                    @lineupdate="updatePolylinePath"></bm-polyline>
            </baidu-map>
        </div>

 

<script>
    import {BaiduMap,BmPolyline,BmPolygon} from 'vue-baidu-map';
    export default {
        name: 'face',
        components: {BaiduMap,BmPolyline,BmPolygon},
        data() {
            return {
                mapDragging: true,//允许地图拖动
                areaDragging: false,//允许区域拖动
                mouseLocation: {lng: 0, lat: 0},
                tableHeight: 500,
                mapCenter: {lng: 113.23726062635106, lat: 23.09034633025317},
                polylinePath: [],
                overlays:[],
                map: null
            }
        },
        watch: {
        },
        computed: {},
        methods: {
            // 初始化地图
            handler ({BMap, map}) {
                map.getPanes().labelPane.className += 'image-container'; //在原来的后面加这个
                this.map = map;
                // 初始化一个矩形
                this.overlays = [
                    {lng:this.mapCenter.lng - 0.01,lat:this.mapCenter.lat -0.01},
                    {lng:this.mapCenter.lng - 0.01,lat:this.mapCenter.lat + 0.01},
                    {lng:this.mapCenter.lng + 0.01,lat:this.mapCenter.lat + 0.01},
                    {lng:this.mapCenter.lng + 0.01,lat:this.mapCenter.lat - 0.01},
                ]
                //初始化矩形对角线
                this.polylinePath = [
                    {lng:this.mapCenter.lng + 0.01,lat:this.mapCenter.lat + 0.01},
                    {lng:this.mapCenter.lng - 0.01,lat:this.mapCenter.lat - 0.01}
                ]
            },
            /*更新矩形对角线 */
            updatePolylinePath (e) {
                this.polylinePath = e.target.getPath();
                //对角线中间有可编辑点,也可以拖动进行编辑,为了防止异常,保证对角线始终是一条直线,我们只取折线的起点和终点两个点
                this.polylinePath = [this.polylinePath[0],this.polylinePath[this.polylinePath.length-1]]
                if(!this.polylinePath || !this.polylinePath.length){
                    return
                }

                let ysMarker = this.polylinePath[0]
                let zxMarker = this.polylinePath[this.polylinePath.length-1]
                // 根据对角线的两个点,计算出矩形的四点,更新矩形
                this.overlays = [{
                    lat: ysMarker.lat,
                    lng: ysMarker.lng
                },{
                    lat: ysMarker.lat,
                    lng: zxMarker.lng
                },{
                    lat: zxMarker.lat,
                    lng: zxMarker.lng
                },{
                    lat: zxMarker.lat,
                    lng: ysMarker.lng
                }]
            },
            /**矩形拖动
             * 计算出鼠标移动的起点和终点的位置,计算出经纬度差,再给原始矩形的四个点加上拖动的经纬度差
             */
            moveEvent(e){
                if(this.areaDragging){
                    if(this.mouseLocation.lng == 0 && this.mouseLocation.lat == 0){
                        this.mouseLocation.lng = e.point.lng
                        this.mouseLocation.lat = e.point.lat
                        return
                    }
                    const newLng = e.point.lng,
                    newLat = e.point.lat,
                    lngDiff = newLng - this.mouseLocation.lng,
                    latDiff = newLat - this.mouseLocation.lat
                    this.overlays.forEach((item)=>{
                        item.lng += lngDiff
                        item.lat += latDiff
                        item.lng = Math.floor(item.lng * 100000) / 100000
                        item.lat = Math.floor(item.lat * 100000) / 100000
                    })
                    this.polylinePath.forEach((item)=>{
                        item.lng += lngDiff
                        item.lat += latDiff
                        item.lng = Math.floor(item.lng * 100000) / 100000
                        item.lat = Math.floor(item.lat * 100000) / 100000
                    })
                    this.mouseLocation.lng = newLng
                    this.mouseLocation.lat = newLat
                    return
                }
                if(this.mouseLocation.lng != 0 || this.mouseLocation.lat != 0){
                  this.mouseLocation.lng = 0
                  this.mouseLocation.lat = 0
                }
            },
        },
        created() {
        },
        mounted() {
        },
        destroyed() {
        }
    }
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值