修改地图编辑

common/request.js

@@ -3,7 +3,7 @@ import store from "@/store"
 export function host(host='default',suffix='/plant_manage'){
 	var url=process.env.NODE_ENV === 'development'?{
 			// default:`http://wmyrzw.natappfree.cc` //陈
-			default:`http://e6jad6.natappfree.cc` //马
+			default:`http://d996zw.natappfree.cc/` //马
 		}:{
 			default:`http://qv6mj8.natappfree.cc`
 		}

pages.js

@@ -25,7 +25,7 @@ module.exports = hot((pagesJson)=>{
 			list: [
 				// {name:"测试页面",path:"pages/demo"},
 				// {name: "地块管理",path: "pages/massif/mana/index","query": ""},
-				// {name: "地块基本信息",path: "pages/massif/info","query": ""},
+				{name: "地块基本信息",path: "pages/massif/info","query": ""},
 				{name: "登录",path: "pages/home/login","query": ""},
 				{name: "首页",path: "pages/home/index","query": ""},
 				{name: "仓库管理",path: "pages/warehouse/mana","query": ""},

pages.json

@@ -8,19 +8,5 @@
         "navigationBarBackgroundColor" : "#F8F8F8",
         "backgroundColor" : "#F8F8F8"
     },
-    "uniIdRouter" : {},
-    "condition" : {
-        "current" : 0,
-        "list" : []
-    },
-    "pages" : [
-        {
-            "path" : "pages/home/index",
-            "style" : {}
-        },
-        {
-            "path" : "pages/massif/info",
-            "style" : {}
-        }
-    ]
+    "uniIdRouter" : {}
 }

pages/massif/info.vue

@@ -19,7 +19,8 @@
 				@input="formData[k]=$event"
 				@selectRDate="selectDate"
 				@select="fields[k].value=$event.value.map(v=>v.value);formData[k]=$event.value[0].value"
-				@imgs="fields[k].value=$event"/>
+				@imgs="fields[k].value=$event"
+				@editorMap="editorMap"/>
 		</u-form>
 		<button class="cu-btn round bg-green shadow submit" @click="sumbit">保存</button>
 	</view>
@@ -130,8 +131,15 @@ import request from '@/common/request'
 				if(res.statu){
 					this.formData=res.data
 					this.fields.date.value=[res.data.beginTime, res.data.endTime]
-					this.fields.plantBaseInfoId.value=[res.data.plantBaseInfoId]//[this.fields.plantBaseInfoId.columns[0].findIndex(v=>v.value==res.data.plantBaseName)]
+					this.fields.plantBaseInfoId.value=[res.data.plantBaseInfoId]
 					this.fields.image.value=res.data.image.join(',')
+					this.fields.jw.value=this.formData.jw.split("|").map(v=>{
+						var point=v.split(",")
+						if(point.length==2){
+							return {longitude:point[0],latitude:point[1]}
+						}
+						return null
+					}).filter(v=>v)
 				}else{
 					uni.showModal({
 						title:"提示",
@@ -140,6 +148,10 @@ import request from '@/common/request'
 					})
 				}
 			},
+			editorMap(e){
+				this.fields.jw.value=e
+				this.formData.jw=e.map(v=>`${v.longitude},${v.latitude}`).join('|')
+			},
 		},
 		onBackPress(e){
 			var dForm=this.$refs.dForm.find(v=>v.field=='jw')

uni_modules/d-form/components/d-form/d-form.vue

@@ -189,7 +189,7 @@
 				</u-input>
 				<button v-if="btnText" @click="btnFun" class="cu-btn bg-green shadow">{{btnText}}</button>
 			</view>
-			<view v-else-if="type=='map'" class="map plant-dingweixiao" :class="{noData:true}" @click="openMap">选择经纬度</view>
+			<view v-else-if="type=='map'" class="map plant-dingweixiao" :class="{noData:value.length<=0}" @click="openMap">{{value.length>0?value[0].join():"选择经纬度"}}</view>
 			<view v-else-if="type=='select'" class="plant-youbian" :class="{noData: !value[0]}" @click="show=true">{{pickerContent}}</view>
 			<u-upload v-else-if="type=='upImg'" :fileList="imgs" previewFullImage multiple :maxCount="num" @delete="delImg" @afterRead="afterRead">
 				<view class="album">
@@ -338,6 +338,8 @@ import {dataType} from 'black-knight/lib/config/tools'
 				showMap:false,
 				maps:null,
 				markerList:[],
+				temp_markerList:[],
+				areaPolygon:null,
 			}
 		},
 		watch:{
@@ -426,58 +428,173 @@ import {dataType} from 'black-knight/lib/config/tools'
 			},
 			openMap(){
 				// uni.navigateTo({url:"/pages/massif/mapEditor"})
-				/* #ifdef APP-PLUS */
 				this.showMap=true
 
+				/* #ifdef APP-PLUS */
 				if(!this.maps){
 					var amap=uni.createMapContext("amap",this)
 					this.maps=amap.$getAppMap()
 					this.maps.setMapType(plus.maps.MapType.MAPTYPE_SATELLITE)
+					this.maps.centerAndZoom(new plus.maps.Point(102.712251,25.040609),10)
 
 					var polyline=new plus.maps.Polyline([])
 					polyline.setLineWidth(8)
 					polyline.setStrokeColor("#10C176")
-					this.maps.addOverlay(polyline)
 
+					this.value.forEach(v=>this.addMarker(v,polyline))
 					this.maps.onclick=(e)=>{
+						this.markerList.length<=0 && this.maps.addOverlay(polyline)
+							
 						if(this.value.length<=0){
-							var marker=new plus.maps.Marker(new plus.maps.Point(e.longitude, e.latitude));
-							marker.setIcon("/static/map_point_1.png");
-							marker.bringToTop()
-							marker.setDraggable(true)
-							marker.onDrag= e=>{
-								console.log("-----Drag:",JSON.stringify(e.getPoint()))
-							}
-							if(this.markerList.length<=0){
-								marker.onclick= e=>{
-									console.log('-------------asdf--------------------')
-								}
-							}
-							this.markerList.push(marker)
+							var marker=this.addMarker(e, polyline)
 							this.maps.addOverlay(marker);
 
-							polyline.setPath(this.markerList.map(v=>{
-								var point=v.getPoint()
+							this.markerList.length>=2 && polyline.setPath(this.markerList.map(({value})=>{
+								var point=value.getPoint()
 								return new plus.maps.Point(point.longitude, point.latitude)
 							}))
 						}
 					}
-					
-					// var polygon=new plus.maps.Polygon([
-					// 	new plus.maps.Point(116.39524,39.925301),
-					// 	new plus.maps.Point(116.400444,39.925285),
-					// 	new plus.maps.Point(116.400558,39.923282),
-					// 	new plus.maps.Point(116.395502,39.923082),
-					// ])
-					// polygon.setLineWidth(3)
-					// polygon.setStrokeColor("#10C176")
-					// polygon.setFillColor("#10C176")
-					// polygon.setFillOpacity(0.3)
-					// this.maps.addOverlay(polygon)
-					
 				}
 				/* #endif */
-			}
+			},
+			drawOver(){
+				this.$emit("editorMap",this.markerList.map(({value})=>value.getPoint()))
+				this.areaPolygon=new plus.maps.Polygon( this.markerList.map(({value})=>new plus.maps.Point(...Object.values(value.getPoint()))) )
+				this.areaPolygon.setLineWidth(3)
+				this.areaPolygon.setStrokeColor("#10C176")
+				this.areaPolygon.setFillColor("#10C176")
+				this.areaPolygon.setFillOpacity(0.3)
+				this.maps.addOverlay(this.areaPolygon)
+				this.markerList.forEach( marker=>{
+					marker.value.setDraggable(true)
+					this.addTempMarker(marker)
+					marker.value.onclick= this.onClick
+				})
+			},
+			addMarker({longitude,latitude},polyline){
+				var marker=new plus.maps.Marker(new plus.maps.Point(longitude, latitude));
+				marker.setIcon("/static/map_point_1.png");
+				marker.bringToTop()
+				marker.setDraggable(false)
+				marker.onDrag= this.onDrag
+				if(this.markerList.length<=0){
+					marker.onclick= e=>{
+						if(this.markerList.length>=3){
+							this.markerList[this.markerList.length-1].next=this.markerList[0].value
+							this.markerList[0].pre=this.markerList[this.markerList.length-1].value
+							this.drawOver()
+							this.maps.removeOverlay(polyline)
+							polyline.setPath([])
+						}
+					}
+				}
+				this.markerList.length>0 && (this.markerList[this.markerList.length-1].next=marker)
+				this.markerList.push({
+					value:marker,
+					pre:this.markerList[this.markerList.length-1]?.value||null,
+					next:null,
+				})
+				return marker
+			},
+			onDrag(e){
+				this.temp_markerList.filter(v=>v.next==e||v.pre==e).forEach(({value, pre, next})=>{
+					var point1=pre.getPoint()
+					var point2=next.getPoint()
+
+					value.setPoint(new plus.maps.Point(
+						Math.min(point1.longitude,point2.longitude)+Math.abs(point1.longitude-point2.longitude)/2,
+						Math.min(point1.latitude,point2.latitude)+Math.abs(point1.latitude-point2.latitude)/2
+					));
+				})
+
+				this.reComputArea()
+				this.$emit("editorMap",this.markerList.map(({value})=>value.getPoint()))
+			},
+			onClick(e){
+				if(this.markerList.length>3){
+					this.maps.removeOverlay(e)
+					this.markerList = this.markerList.filter(v=>v.value!=e)
+					var preMarker=this.markerList.find(v=>v.pre==e)
+					var nextMarker=this.markerList.find(v=>v.next==e)
+					preMarker.pre=nextMarker.value
+					nextMarker.next=preMarker.value
+
+					// this.maps.removeOverlay(this.temp_markerList.find(v=>v.next==e).value)
+					// this.maps.removeOverlay(this.temp_markerList.find(v=>v.pre==e).value)
+					// this.temp_markerList=this.temp_markerList.filter(v=>v.pre!=e&&v.next!=e)
+					// this.addTempMarker({value:preMarker.value, next:nextMarker.value})
+					this.temp_markerList.forEach(v=>this.maps.removeOverlay(v.value))
+					this.temp_markerList=[]
+					this.markerList.forEach(v=>this.addTempMarker(v))
+
+					this.reComputArea()
+				}else{
+					this.markerList=[]
+					this.temp_markerList=[]
+					this.areaPolygon=null
+					this.maps.clearOverlays()
+				}
+				
+				this.$emit("editorMap",this.markerList.map(({value})=>value.getPoint()))
+			},
+			reComputArea(){
+				this.areaPolygon?.setPath?.(this.markerList.map(({value})=>{
+					var point=value.getPoint()
+					return new plus.maps.Point(point.longitude, point.latitude)
+				}))
+			},
+			addTempMarker({value,pre,next}){
+				var point1=value.getPoint()
+				var point2=next.getPoint()
+
+				var marker=new plus.maps.Marker(new plus.maps.Point(
+					Math.min(point1.longitude,point2.longitude)+Math.abs(point1.longitude-point2.longitude)/2,
+					Math.min(point1.latitude,point2.latitude)+Math.abs(point1.latitude-point2.latitude)/2
+				));
+				marker.setIcon("/static/map_point_2.png");
+				marker.bringToTop()
+				marker.setDraggable(true)
+				marker.onDrag= e=>{
+					for(var i in this.temp_markerList){
+						if(this.temp_markerList[i].value==e){
+							var index=0
+							for(var j=0; j<this.markerList.length;j++){
+								this.markerList[j].value==this.temp_markerList[i].next && (index=j)
+							}
+							this.markerList.splice(index,0,{
+								value:e,
+								pre:this.temp_markerList[i].pre,
+								next:this.temp_markerList[i].next,
+							})
+							this.markerList.find(v=>v.value==this.temp_markerList[i].pre).next=e
+							this.markerList.find(v=>v.value==this.temp_markerList[i].next).pre=e
+							
+							this.addTempMarker({
+								value:this.temp_markerList[i].pre,
+								next:e,
+							})
+							this.addTempMarker({
+								value:e,
+								next:this.temp_markerList[i].next,
+							})
+						}
+					}
+					this.temp_markerList=this.temp_markerList.filter(v=>v.value!=e)
+					this.reComputArea()
+					e.setIcon('/static/map_point_1.png')
+					e.onDrag= this.onDrag
+					e.onclick= this.onClick
+
+					this.$emit("editorMap",this.markerList.map(({value})=>value.getPoint()))
+				}
+				this.maps.addOverlay(marker)
+				this.temp_markerList.push({
+					value:marker,
+					pre:value,
+					next:next
+				})
+			},
 		},
 	}
 </script>