百度地图矩形移动

Posted 2021-03-01 lijh03

思路：

用百度地图提供的API画出矩形，根据画出的矩形得到矩形的对角线。移动对角线，再根据移动后的对角线计算得到新的矩形。

引用vue-baidu-map

<template>
    <div>
        <div :style="{height: tableHeight + ‘px‘}">
            <baidu-map style="height: 100%" class="map" :center="mapCenter" :zoom="18" :scroll-wheel-zoom="true"
            mapType="BMAP_NORMAL_MAP" :inertial-dragging="false" @ready="handler" :map-click="false">
                <!-- <bm-map-type :map-types="[‘BMAP_SATELLITE_MAP‘, ‘BMAP_NORMAL_MAP‘]" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> -->
                <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" :offset="{width: 20, height: 70}"></bm-navigation>
                <bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>

                <bm-ground :bounds="mapBounds" imageURL="http://10.0.145.119:8090/file//2019-12-26/1577330504070.jpg">
                </bm-ground>
                
                <bm-polygon :path="overlays" stroke-color="#0000ff" :stroke-opacity="0.3" fill-color="#39B1FC" :fill-opacity="0.1"
                :stroke-weight="1" :editing="false"/>

                <bm-polyline :path="polylinePath" stroke-color="#0000ff" :stroke-opacity="0.3" :stroke-weight="1" :editing="isEditing"
                @lineupdate="updatePolylinePath"></bm-polyline>

            </baidu-map>
        </div>
        <!-- 其中sw表示矩形区域的西南角，参数ne表示矩形区域的东北角 -->
        <!-- map.getBounds().getNorthEast()    Point    返回矩形区域的东北角--右上角 -->
        <!-- map.getBounds().getSouthWest()    Point    返回矩形区域的西南角--左下角 -->
        <el-button @click="editingEvt">编辑</el-button>
    </div>
</template>

<script>

export default {
    // name: "massifImgMap",
    data(){
        return {
            tableHeight: 500,
            mapCenter: {lng: 113.23726062635106, lat: 23.09034633025317},
            overlays: [],
            mapBounds: {
                ne: {lng: 110, lat: 40}, sw:{lng: 0, lat: 0}
            },
            formerPosition: [],
            polylinePath: [],
            isEditing: false,//是否编辑
            map: null
        }
    },
    methods: {
        // 初始化地图
        handler ({BMap, map}) {
            // console.log(‘getPanes‘,map.getPanes())
            map.getPanes().labelPane.className += ‘image-container‘; //在原来的后面加这个
            // map.getPanes().labelPane.style.zIndex = 380;
            this.map = map;
            this._mouseDrawingEvt(BMap, map)
        },
        // 鼠标绘图
        _mouseDrawingEvt(BMap, map){
            //实例化鼠标绘制工具
            let drawingManager = new BMapLib.DrawingManager(map, {
                isOpen: false, //是否开启绘制模式
                enableDrawingTool: true, //是否显示工具栏
                drawingToolOptions: {
                    anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                    offset: new BMap.Size(10, 10), //偏离值
                    drawingModes: [BMAP_DRAWING_RECTANGLE],
                }
            });  
            //添加鼠标绘制工具监听事件，用于获取绘制结果
            drawingManager.addEventListener(‘overlaycomplete‘, this._overlaycomplete);
        },
        _overlaycomplete(e){
            this.overlays = e.overlay.getPath();//Array<Point> 返回多边型的点数组
            this.mapBounds = {
                ne: e.overlay.getBounds().getNorthEast(),   //返回矩形区域的东北角--右上角
                sw: e.overlay.getBounds().getSouthWest()    //返回矩形区域的西南角--左下角
            }
            // console.log(‘e.overlay‘,e.overlay.getBounds().getNorthEast())
            // 矩形对角线
            this.polylinePath = [
                e.overlay.getBounds().getNorthEast(),
                e.overlay.getBounds().getSouthWest()
            ]
            // 清除上一次绘制的图
            this.map.removeOverlay(e.overlay);
        },
        editingEvt(){
            this.isEditing = true;
        },
        updatePolylinePath (e) {
            this.polylinePath = e.target.getPath();
            if(!this.polylinePath || !this.polylinePath.length){
                return
            }
            console.log(‘this.polylinePath‘,this.polylinePath);
            let [ysMarker, zxMarker] = this.polylinePath;
            this.mapBounds = {
                ne: ysMarker,   //返回矩形区域的东北角--右上角
                sw: zxMarker    //返回矩形区域的西南角--左下角
            }
            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
            }]
        }
    },
    created(){},
};
</script>

<style lang="scss">
.image-container{
    div{
        text-align: center;
        &:after {
            content: "";
            display: inline-block;
            height: 100%;
            width: 0;
            vertical-align: middle;
        }
        img{
            width: auto !important;
            vertical-align: middle;
            max-width: 100%;
            max-height: 100%;
        }
    }
}
.hide-map-bg{
    .BMap_mask{
        background: #fff;
    }
}
</style>