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

guoshilong

2022-09-27 1767c2c878ec1892ae560f81b32b5afdd2ceebfd

 src/components/leafletDraw.vue

@@ -2,12 +2,11 @@
    <div ref="imageWrapper">
        <div class="btn-grounp">
            <button v-if="addShow" class="draw" @click="draw()">开始绘制</button>
            <button v-if="!addShow" class="repeal" @click="repeal()">撤销</button>
            <button v-if="!addShow&&repealShow" class="repeal" @click="repeal()">撤销</button>
            <button v-if="regionFull" class="save" @click="save()">保存</button>
        </div>
        <!-- <button class="disDraw" @click="disDraw()">关闭绘制</button> -->
        <!-- <button class="disDraw" @click="drawPolygon()">关闭绘制</button> -->

        <div id="map"></div>
    </div>
</template>
@@ -25,6 +24,7 @@
            lng: "",
            lat: "",
            addShow: false,
            repealShow:false,

            currentPolygons: [],

@@ -34,7 +34,8 @@

            imgUrl: "",
            file: "",
            regionFull: false
            regionFull: false,
            tempBounds:""
        }
    },
    created () {
@@ -42,8 +43,11 @@
    },
    mounted () {
        this.addShow = true
        this.lng = 115.89886924863
        this.lat = 28.6780931500551
        // this.lng = 115.89886924863
        // this.lat = 28.6780931500551
        //南城县
        this.lng = 116.56705776
        this.lat = 27.42386903

        this.initDate()

@@ -93,6 +97,12 @@
        },

        initDate () {
            var str = window.location.search.substring(1)
            var obj = this.getUrlParams(str)
            if(obj.latitude&&obj.longitude){
                this.lat = obj.latitude
                this.lng = obj.longitude
            }
            this.map = this.$L.map("map", {
                center: [this.lat, this.lng], // 地图中心
                zoom: 14, //缩放比列
@@ -100,11 +110,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)

@@ -137,7 +147,7 @@
            this.complete.remove()

            this.addShow = true

            this.repealShow = false
            this.regionFull = false

            // Object.values(this.map._layers).forEach(item => {
@@ -184,23 +194,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)

                    var base64Image = dataUrl // 后台返回的base64数据
                    var imgData = base64Image.replace(/[\r\n]/g, '') // 将回车换行换为空字符''
            if(parmasObj.status){//后台镜头移动
                this.repealShow = false
                this.regionFull = false
                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}); 
            }

                    wx.miniProgram.postMessage({
                        data: { polygons: arr, area, bgUrl: imgData },
            setTimeout(() => {
                if(parmasObj.status){//后台截图
                    domtoimage.toPng(document.getElementById('map'), { width: 450, height: 450 })
                    .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)
                    }) 
                    
                    setTimeout(() => {
                        this.repealShow = true
                        this.regionFull = true
                    }, 1000);

                    wx.miniProgram.navigateBack()
                }else{//小程序截图
                    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);
        },

                })
                .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 () {
@@ -218,7 +281,7 @@
            this.map.on('pm:drawstart', ({ workingLayer }) => {

                this.addShow = false

                this.repealShow = false
                that.rectangleLayer = workingLayer

                console.log(workingLayer, 5465456)
@@ -235,7 +298,7 @@
            })

            this.map.on("pm:create", e => {

                that.repealShow = true
                that.regionFull = true

                // 绘制坐标
@@ -261,6 +324,19 @@
                e.layer.on('pm:vertexadded', e => {
                    console.log(e, "添加顶点")
                })

                var arr = []

                this.polygons.forEach(item => {
                    arr.push([item.lng, item.lat])
                })

                arr.push([this.polygons[0].lng, this.polygons[0].lat])

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

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

            })
        },

@@ -306,28 +382,43 @@
    font-size: 16px;

    .draw {
        width: 144px;
        height: 44px;
        // width: 144px;
        // height: 44px;
        line-height: 44px;
        background: #5abf78;
        color: #fff;
        border: none;
        border-radius: 22px;

        width: 216px;
        height: 66px;
        font-size: 30px;
    }

    .repeal {
        width: 100px;
        height: 44px;
        // width: 100px;
        // height: 44px;

        border-radius: 22px;
        border: none;
        color: #000;
        background: #fff;
        width: 150px;
        height: 66px;
        font-size: 30px;
    }

    .save {
        margin-left: 10px;
        width: 100px;
        height: 44px;
        // width: 100px;
        // height: 44px;
        border-radius: 22px;
        border: none;
        color: #000;
        background: #fff;
        width: 150px;
        height: 66px;
        font-size: 30px;
    }
}