添加后台截图

guoshilong

2022-09-02 fbe398c6c281a2d42d1ffcb415a3679e7bcc964c

添加后台截图

 src/components/leafletDraw.vue

@@ -7,7 +7,6 @@
        </div>
        <!-- <button class="disDraw" @click="disDraw()">关闭绘制</button> -->
        <!-- <button class="disDraw" @click="drawPolygon()">关闭绘制</button> -->

        <div id="map"></div>
    </div>
</template>
@@ -187,24 +186,57 @@

            let area = this.$turf.area(this.$turf.polygon([arr]))

            domtoimage.toPng(document.getElementById('map'), { width: 375, height: 750 })
                .then(function (dataUrl) {
            var str = window.location.search.substring(1)
            var parmasObj = this.getUrlParams(str)
            if(parmasObj.status!=""){//后台截图
                domtoimage.toPng(document.getElementById('map'), { width: 970, height: 400 })
                .then( (dataUrl) => {

                    var base64Image = dataUrl // 后台返回的base64数据
                    var imgData = base64Image.replace(/[\r\n]/g, '') // 将回车换行换为空字符''

                    var obj = {
                        url:imgData,
                        polygons:arr,
                        area:area
                    }
                    window.parent.postMessage(obj,"*")
                })
                .catch(function (error) {
                    console.error('oops, something went wrong!', error)
                })  


            }else{//小程序截图
                domtoimage.toPng(document.getElementById('map'), { width: 375, height: 750 })
                .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)
                })
                }) 
            }   

        },
        getUrlParams(urlParams) {
            var obj = {}
            var arrList = urlParams.split('&')
            arrList.forEach(function (item) {
                var arr = item.split('=') //["name", "%E5%BC%A0%E4%B8%89"]
                obj[arr[0]] = window.decodeURIComponent(arr[1]) //{name: "张三", age: "18"}
            })
            return obj
        },

        disDraw () {
            this.map.pm.disableDraw("Polygon")

 src/components/revampDraw.vue

@@ -171,7 +171,7 @@
            obj.forEach(item => {
                latlngs.push([item.lat, item.lng])
            })

            this.polygons = obj
            this.polygonLayer = that.$L.polygon(latlngs, options).addTo(that.map)

            that.editMapLayer()
@@ -305,23 +305,76 @@

            let area = this.$turf.area(this.$turf.polygon([arr]))

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

            var str = window.location.search.substring(1)
            var parmasObj = this.getUrlParams(str)
            if(parmasObj.status!=""){//后台截图
                domtoimage.toPng(document.getElementById('map'), { width: 970, height: 400 })
                .then( (dataUrl) => {

                    var base64Image = dataUrl // 后台返回的base64数据
                    var imgData = base64Image.replace(/[\r\n]/g, '') // 将回车换行换为空字符''

                    var obj = {
                        url:imgData,
                        polygons:arr,
                        area:area
                    }
                    window.parent.postMessage(obj,"*")
                })
                .catch(function (error) {
                    console.error('oops, something went wrong!', error)
                })  


            }else{//小程序截图
                domtoimage.toPng(document.getElementById('map'), { width: 375, height: 750 })
                .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)
                })
                }) 
            }   


            // domtoimage.toPng(document.getElementById('map'), { width: 375, height: 750 })
            //     .then(function (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)
            //     })

        },

        getUrlParams(urlParams) {
            var obj = {}
            var arrList = urlParams.split('&')
            arrList.forEach(function (item) {
                var arr = item.split('=') //["name", "%E5%BC%A0%E4%B8%89"]
                obj[arr[0]] = window.decodeURIComponent(arr[1]) //{name: "张三", age: "18"}
            })
            return obj
        },

        disDraw () {