修改关键点设置

src/assets/js/common.js

@@ -2357,6 +2357,68 @@ var HttpReq = function(){
 					data:data,
 				})
 			},
+			//设置控制点——关键点信息表
+			apiCpointQuery: function(param){
+				return request({
+					url: '/api/Cpoint',
+					method: 'get',
+					params:param,
+				})
+			},
+			apiCpointAdd: function(data){
+				return request({
+					url: '/api/Cpoint',
+					method: 'POST',
+					data:data,
+				}).then((res) => {
+					return res
+				})
+			},
+			apiCpointUpdate: function(data){
+				return request({
+					url: '/api/Cpoint',
+					method: 'PUT',
+					data:data,
+				})
+			},
+			apiCpointDel: function(data){
+				return request({
+					url: '/api/Cpoint',
+					method: 'Delete',
+					data:data,
+				})
+			},
+			//设置控制点——关键点连接信息表
+			apiPathmapQuery: function(param){
+				return request({
+					url: '/api/Pathmap',
+					method: 'get',
+					params:param,
+				})
+			},
+			apiPathmapAdd: function(data){
+				return request({
+					url: '/api/Pathmap',
+					method: 'POST',
+					data:data,
+				}).then((res) => {
+					return res
+				})
+			},
+			apiPathmapUpdate: function(data){
+				return request({
+					url: '/api/Pathmap',
+					method: 'PUT',
+					data:data,
+				})
+			},
+			apiPathmapDel: function(data){
+				return request({
+					url: '/api/Pathmap',
+					method: 'Delete',
+					data:data,
+				})
+			},
 			
 			
 

src/components/mars3d/Map4.vue

@@ -20,6 +20,9 @@
   import * as mars3d from 'mars3d'
   import * as Cesium from 'mars3d-cesium/Build/Cesium/Cesium'
   import  { initGraphicManager,initLayerManager,bindLayerContextMenu } from './js/graphicManager'
+  import zhuangchetubiao from '../../assets/images/cutGraph/zhuangchedian1.png'
+  import xiechetubiao from '../../assets/images/cutGraph/xiechedian1.png'
+  import kongzhidiantubiao from '../../assets/images/cutGraph/kongzhidian1.png'
   
   
   // 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/install.html)
@@ -35,14 +38,14 @@
     name: 'mars3dViewer',
   
     created(){
-      this.getCoordinate();
+      // this.getCoordinate();
     },
   
     data(){
       return{
         zuobianData:[],
         toJavaCoordinates:[],
-        weilanName:[],
+        controlPointId:0,
       }
     },
   
@@ -85,28 +88,8 @@
   
     methods: {
       //后台获取数据
-      getCoordinate() {
-        let that = this;
-        // HttpReq.truckDispatching.screenMapSetUpQuery({size:9999}).then((res) => {
-              // 	if(true){;
-              // 		//console.log(res);
-        //     let data1 = [];
-        //     for(let key  in res){
-        //       that.weilanName.push(key);
-        //       let arrays = [];
-        //       res[key].forEach(function(item){
-        //         var arr = [];
-        //         arr[0] = item.lon;
-        //         arr[1] = item.lat;
-        //         arr[2] = "500";
-        //         arrays.push(arr);
-        //       })
-        //       data1.push(arrays)
-        //     }
-        //     that.zuobianData = data1
-            //console.log("zuobianData",that.zuobianData);
-            //console.log("weilanName",that.weilanName);
-  
+      getCoordinate(data) {
+        this.zuobianData = data;
         if (this.appendToBody) {
           document.body.appendChild(this.$el)
         }
@@ -118,30 +101,71 @@
             this.initMars3d(data.map3d)// 构建地图
           })
         }
-              // 	}
-              // })
       },
       //上传关键点数据
-      uploaded(text,color){
-        let newData = [...this.toJavaCoordinates];
-        newData.pop();
-          let allObj = {};
-          allObj.name = text;
-          allObj.zuobiao = newData;
-          allObj.color = color;
-          this.toJavaCoordinates = [];
-          //console.log(allObj);
-          //发送添加电子围栏请求
-          HttpReq.truckDispatching.screenMapSetUpAdd(allObj).then((res) => {
+      uploaded(text,type,way){
+        if(way == 'add'){
+          if(JSON.stringify(this.toJavaCoordinates) == '[]'){
             this.$notify({
-              title: '区域信息上传成功，即将重新加载！',
-              type: 'success',
+              title: '未选择'+ type +'位置！',
+              type: 'error',
               duration: 2500
+            })
+          }else{
+            let lastData = {};
+            lastData.name = text;
+            lastData.type = type;
+            lastData.lon = this.toJavaCoordinates[0][0];
+            lastData.lat = this.toJavaCoordinates[0][1];
+            HttpReq.truckDispatching.apiCpointAdd(lastData).then((res) => {
+              this.$notify({
+                title: '关键点信息上传中，请勿操作！',
+                type: 'success',
+                duration: 2000,
+                dangerouslyUseHTMLString: true,
+              });
+              this.$nextTick(()=>{
+                if(res.code == 200){
+                  this.$notify({
+                    title: '关键点信息上传成功，即将刷新页面！',
+                    type: 'success',
+                    duration: 2000,
+                    dangerouslyUseHTMLString: true,
                   });
                   setTimeout(function (){
                     window.location.reload();
                   },2000);
-          }).catch(function(error) { });
+                }
+              })
+            })
+          }
+        }else if(way == 'edit'){
+          let lastData = {};
+          lastData.id = this.controlPointId;
+          lastData.name = text;
+          HttpReq.truckDispatching.apiCpointUpdate(lastData).then((res) => {
+            this.$notify({
+              title: '关键点信息上传中，请勿操作！',
+              type: 'success',
+              duration: 2000,
+              dangerouslyUseHTMLString: true,
+            });
+            this.$nextTick(()=>{
+              if(res.code == 200){
+                this.$notify({
+                  title: '关键点信息上传成功，即将刷新页面！',
+                  type: 'success',
+                  duration: 2000,
+                  dangerouslyUseHTMLString: true,
+                });
+                // setTimeout(function (){
+                //   window.location.reload();
+                // },2000);
+              }
+            })
+          })
+        }
+        
       },
       //创建地图
       initMars3d(options) {
@@ -161,16 +185,33 @@
         this[`map${this.mapKey}`] = map
         
         //围栏回显
-        // that.zuobianData.forEach(function(item,index){
-        //   var graphicLayer = new mars3d.layer.GraphicLayer();
-        //   map.addLayer(graphicLayer);
-        //   initLayerManager(graphicLayer,that.weilanName[index]);
-        //   that.addGraphic_01(graphicLayer,item,that.weilanName[index]);
-        // })
+        that.zuobianData.forEach(function(item,index){
+          var graphicLayer = new mars3d.layer.GraphicLayer();
+          map.addLayer(graphicLayer);
+          initLayerManager(graphicLayer);
+          that.bindLayerPopup(graphicLayer,item)
+          that.addDemoGraphic1(graphicLayer,item);
+        })
 
         // 抛出事件
         this.$emit('onload', map)
       },
+      //关键点位置
+      addDemoGraphic1(graphicLayer,item) {
+        const graphic = new mars3d.graphic.BillboardEntity({
+          name: item.name,
+          position: [item.lon, item.lat, 1000],
+          style: {
+            image: item.type == '装车点' ? zhuangchetubiao : item.type == '卸车点' ? xiechetubiao : kongzhidiantubiao,
+            scale: 0.15,
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            clampToGround: true,
+            label: { text: item.name, pixelOffsetY: -40, color: 'blue'},
+          },
+        })
+        graphicLayer.addGraphic(graphic)
+      },
       //关键点设置
       btnStartDraw(){
         this.toJavaCoordinates = [];
@@ -202,6 +243,13 @@
           },
         });
       },
+      bindLayerPopup(graphicLayer,item) {
+        let that = this;
+        graphicLayer.bindPopup(function (event) {
+          that.$parent.clickPointFn(item);
+          that.controlPointId = item.id;
+        })
+      },
      
     }
   }