From 1767c2c878ec1892ae560f81b32b5afdd2ceebfd Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Tue, 27 Sep 2022 16:32:03 +0800
Subject: [PATCH] 小程序地图模式根据农场变化坐标
---
src/components/leafletDraw.vue | 147 +++++++++++++++++++++++++++++++++++++++---------
1 files changed, 119 insertions(+), 28 deletions(-)
diff --git a/src/components/leafletDraw.vue b/src/components/leafletDraw.vue
index d1d05cb..362032a 100644
--- a/src/components/leafletDraw.vue
+++ b/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;
}
}
--
Gitblit v1.9.3