From f9d3a259d075beffd21abfdc58345ff8588f3c2d Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Tue, 06 Sep 2022 15:10:31 +0800
Subject: [PATCH] 后台完成绘图后位移
---
src/components/leafletDraw.vue | 83 ++++++++++++--------
src/components/revampDraw.vue | 111 ++++++++++++++++++---------
2 files changed, 123 insertions(+), 71 deletions(-)
diff --git a/src/components/leafletDraw.vue b/src/components/leafletDraw.vue
index 116c71a..f05694b 100644
--- a/src/components/leafletDraw.vue
+++ b/src/components/leafletDraw.vue
@@ -33,7 +33,8 @@
imgUrl: "",
file: "",
- regionFull: false
+ regionFull: false,
+ tempBounds:""
}
},
created () {
@@ -194,46 +195,60 @@
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){//后台镜头移动
+ 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});
}
- window.parent.postMessage(obj,"*")
- })
- .catch(function (error) {
- console.error('oops, something went wrong!', error)
- })
+ }
+ }else{//小程序镜头移动
+ this.map.flyToBounds(this.rectangleLayer.getBounds(),{maxZoom:18});
+ }
+ setTimeout(() => {
+ if(parmasObj.status){//后台截图
+ domtoimage.toPng(document.getElementById('map'), { width: 450, height: 450 })
+ .then( (dataUrl) => {
- }else{//小程序截图
- domtoimage.toPng(document.getElementById('map'), { width: 375, height: 750 })
- .then( (dataUrl) => {
+ var base64Image = dataUrl // 后台返回的base64数据
+ var imgData = base64Image.replace(/[\r\n]/g, '') // 将回车换行换为空字符''
- 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()
-
-
-
- })
- .catch(function (error) {
- console.error('oops, something went wrong!', error)
- })
- }
-
+ }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)
+ })
+ }
+ }, 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());
})
},
diff --git a/src/components/revampDraw.vue b/src/components/revampDraw.vue
index afc8f85..84f32a2 100644
--- a/src/components/revampDraw.vue
+++ b/src/components/revampDraw.vue
@@ -37,7 +37,8 @@
imgUrl: "",
file: "",
- regionFull: false
+ regionFull: false,
+ tempBounds:""
}
},
created () {
@@ -160,8 +161,7 @@
// 添加顶点
console.log(e, '添加顶点')
})
-
- // this.map.flyToBounds(this.rectangleLayer.getBounds());
+
},
addPolygon (position) {
@@ -325,46 +325,85 @@
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){//后台镜头移动
+ 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()
+ 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)
+ })
+ }
+ }, 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());
})
},
--
Gitblit v1.9.3