后台完成绘图后位移

guoshilong

2022-09-06 f9d3a259d075beffd21abfdc58345ff8588f3c2d

后台完成绘图后位移

 src/components/leafletDraw.vue

@@ -33,7 +33,8 @@

            imgUrl: "",
            file: "",
            regionFull: false
            regionFull: false,
            tempBounds:""
        }
    },
    created () {
@@ -194,8 +195,26 @@

            var str = window.location.search.substring(1)
            var parmasObj = this.getUrlParams(str)

            if(parmasObj.status){//后台镜头移动
                if(this.rectangleLayer.getBounds() != this.tempBounds){
                    if(this.map.getZoom()>16){
                        this.rectangleLayer.getBounds()._northEast.lng = this.rectangleLayer.getBounds()._northEast.lng+0.007
                        this.tempBounds = this.rectangleLayer.getBounds()
                        this.map.flyToBounds(this.rectangleLayer.getBounds(),{maxZoom:18}); 
                    }else{
                        this.rectangleLayer.getBounds()._northEast.lng = this.rectangleLayer.getBounds()._northEast.lng+0.06
                        this.tempBounds = this.rectangleLayer.getBounds()
                        this.map.flyToBounds(this.rectangleLayer.getBounds(),{maxZoom:18}); 
                    }
                }
            }else{//小程序镜头移动
                this.map.flyToBounds(this.rectangleLayer.getBounds(),{maxZoom:18}); 
            }

            setTimeout(() => {
            if(parmasObj.status){//后台截图
                domtoimage.toPng(document.getElementById('map'), { width: 970, height: 400 })
                    domtoimage.toPng(document.getElementById('map'), { width: 450, height: 450 })
                .then( (dataUrl) => {

                    var base64Image = dataUrl // 后台返回的base64数据
@@ -214,26 +233,22 @@


            }else{//小程序截图
                domtoimage.toPng(document.getElementById('map'), { width: 375, height: 750 })
                    domtoimage.toPng(document.getElementById('map'), { width: 375, height: 600 })
                .then( (dataUrl) => {

                    var base64Image = dataUrl // 后台返回的base64数据
                    var imgData = base64Image.replace(/[\r\n]/g, '') // 将回车换行换为空字符''
                    wx.miniProgram.postMessage({
                        data: { polygons: arr, area, bgUrl: imgData },
                    })

                    wx.miniProgram.navigateBack()



                })
                .catch(function (error) {
                    console.error('oops, something went wrong!', error)
                }) 
            }   

            }, 1500);
        },

        getUrlParams(urlParams) {
            var obj = {}
            var arrList = urlParams.split('&')
@@ -314,8 +329,6 @@
                let area = this.$turf.area(this.$turf.polygon([arr]))

                window.parent.postMessage(area,"*")

                this.map.flyToBounds(this.rectangleLayer.getBounds()); 

            })
        },

 src/components/revampDraw.vue

@@ -37,7 +37,8 @@

            imgUrl: "",
            file: "",
            regionFull: false
            regionFull: false,
            tempBounds:""
        }
    },
    created () {
@@ -161,7 +162,6 @@
                console.log(e, '添加顶点')
            })

            // this.map.flyToBounds(this.rectangleLayer.getBounds()); 
        },

        addPolygon (position) {
@@ -325,8 +325,44 @@
            var str = window.location.search.substring(1)
            var parmasObj = this.getUrlParams(str)

            if(parmasObj.status){//后台镜头移动
                if(this.polygonLayer){//编辑层
                    if(this.polygonLayer.getBounds() != this.tempBounds){
                    if(this.map.getZoom()>16){
                        this.polygonLayer.getBounds()._northEast.lng = this.polygonLayer.getBounds()._northEast.lng+0.007
                        this.tempBounds = this.polygonLayer.getBounds()
                        this.map.flyToBounds(this.polygonLayer.getBounds(),{maxZoom:18}); 
                    }else{
                        this.polygonLayer.getBounds()._northEast.lng = this.polygonLayer.getBounds()._northEast.lng+0.06
                        this.tempBounds = this.polygonLayer.getBounds()
                        this.map.flyToBounds(this.polygonLayer.getBounds(),{maxZoom:22}); 
                    }
                }
                }else{
                    if(this.rectangleLayer.getBounds() != this.tempBounds){
                    if(this.map.getZoom()>16){
                        this.rectangleLayer.getBounds()._northEast.lng = this.rectangleLayer.getBounds()._northEast.lng+0.009
                        this.tempBounds = this.rectangleLayer.getBounds()
                        this.map.flyToBounds(this.rectangleLayer.getBounds(),{maxZoom:18}); 
                    }else{
                        this.rectangleLayer.getBounds()._northEast.lng = this.rectangleLayer.getBounds()._northEast.lng+0.06
                        this.tempBounds = this.rectangleLayer.getBounds()
                        this.map.flyToBounds(this.rectangleLayer.getBounds(),{maxZoom:20}); 
                    }
                }
                }
            }else{//小程序镜头移动
                if(this.polygonLayer){
                    //移动编辑层镜头到中心
                    this.map.flyToBounds(this.polygonLayer.getBounds(),{maxZoom:18});
                }else{
                    this.map.flyToBounds(this.rectangleLayer.getBounds(),{maxZoom:18});
                }
            }

            setTimeout(() => {
            if(parmasObj.status){//后台截图
                domtoimage.toPng(document.getElementById('map'), { width: 970, height: 400 })
                    domtoimage.toPng(document.getElementById('map'), { width: 450, height: 450 })
                .then( (dataUrl) => {

                    var base64Image = dataUrl // 后台返回的base64数据
@@ -347,7 +383,7 @@

            }else{//小程序截图

                domtoimage.toPng(document.getElementById('map'), { width: 375, height: 750 })
                    domtoimage.toPng(document.getElementById('map'), { width: 375, height: 600 })
                .then( (dataUrl) => {

                    var base64Image = dataUrl // 后台返回的base64数据
@@ -365,6 +401,9 @@
                    console.error('oops, something went wrong!', error)
                }) 
            }   
            }, 1100);

            


            // domtoimage.toPng(document.getElementById('map'), { width: 375, height: 750 })
@@ -464,7 +503,7 @@
                let area = this.$turf.area(this.$turf.polygon([arr]))
                window.parent.postMessage(area,"*")

                this.map.flyToBounds(this.rectangleLayer.getBounds()); 
                // this.map.flyToBounds(this.rectangleLayer.getBounds()); 
            })
        },