小程序地图模式根据农场变化坐标

guoshilong

2022-09-27 1767c2c878ec1892ae560f81b32b5afdd2ceebfd

 src/components/revampDraw.vue

@@ -1,7 +1,7 @@
<template>
    <div ref="imageWrapper">
        <div class="btn-grounp">
            <button v-if="addShow" class="draw" @click="draw()">重新绘制</button>
            <button v-if="addShow&&rewrite" class="draw" @click="draw()">重新绘制</button>
            <button v-if="!addShow" class="repeal" @click="repeal()">撤销</button>
            <button v-if="regionFull" class="save" @click="save()">保存</button>
        </div>
@@ -37,7 +37,9 @@

            imgUrl: "",
            file: "",
            regionFull: false
            regionFull: false,
            rewrite:false,
            tempBounds:""
        }
    },
    created () {
@@ -47,6 +49,7 @@
            // 用户编辑
            this.addShow = true
            this.regionFull = true
            this.rewrite = true
        } else {
            // 单纯展示
            this.addShow = false
@@ -160,8 +163,7 @@
                // 添加顶点
                console.log(e, '添加顶点')
            })

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

        addPolygon (position) {
@@ -223,11 +225,11 @@
                doubleClickZoom: false, // 禁用双击放大
                attributionControl: false // 移除右下角leaflet标识
            })
            this.$L.tileLayer('http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0', {
            this.$L.tileLayer('https://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0', {
                subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
            }).addTo(this.map)

            this.$L.tileLayer('http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0', {
            this.$L.tileLayer('https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0', {
                subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
            }).addTo(this.map)
            //   this.map.removeLayer(name)  // 移除图层
@@ -248,7 +250,7 @@
            }

            this.regionFull = false

            this.rewrite = false
            this.getlatLngs()

            this.map.pm.enableDraw("Polygon", {
@@ -279,7 +281,7 @@

            this.regionFull = false


            this.rewrite = true

            // Object.values(this.map._layers).forEach(item => {
            //     if (item._leaflet_id == this.rectangleLayer._leaflet_id) {
@@ -325,46 +327,91 @@
            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
            if(parmasObj.status){//后台镜头移动
                this.rewrite = false
                this.regionFull = false
                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}); 
                    }
                    window.parent.postMessage(obj,"*")
                })
                .catch(function (error) {
                    console.error('oops, something went wrong!', error)
                })  
                }
                }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});
                }
            }

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

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

                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 },
                        var obj = {
                            url:imgData,
                            polygons:arr,
                            area:area
                        }
                        window.parent.postMessage(obj,"*")
                    })
                    .catch(function (error) {
                        console.error('oops, something went wrong!', error)
                    })  

                    wx.miniProgram.navigateBack()
                    setTimeout(() => {
                        this.rewrite = true
                        this.regionFull = true
                    }, 1000);
                    return

                    
                }else{//小程序截图

                })
                .catch(function (error) {
                    console.error('oops, something went wrong!', error)
                }) 
            }   
                    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)
                    }) 
                }   
            }, 1000);

            


            // domtoimage.toPng(document.getElementById('map'), { width: 375, height: 750 })
@@ -411,7 +458,7 @@
            this.map.on('pm:drawstart', ({ workingLayer }) => {

                this.addShow = false

                this.rewrite = false
                that.rectangleLayer = workingLayer

                workingLayer.on('pm:vertexadded', e => {
@@ -429,7 +476,7 @@

                that.addShow = true
                that.regionFull = true

                that.rewrite = true
                // 绘制坐标
                that.polygons = e.layer._latlngs[0]

@@ -464,7 +511,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()); 
            })
        },

@@ -515,7 +562,8 @@
        line-height: 44px;
        border: none;
        border-radius: 22px;

        color: #000;
        background: #fff;
        width: 150px;
        height: 66px;
        font-size: 30px;
@@ -526,7 +574,8 @@
        // height: 44px;
        border-radius: 22px;
        border: none;

        color: #000;
        background: #fff;
        width: 150px;
        height: 66px;
        font-size: 30px;