添加关键点页面功能

src/assets/js/common.js

@@ -2326,6 +2326,37 @@ var HttpReq = function(){
 					return res
 				})
 			},
+			//设置控制点——设置初始值
+			apiRatioQuery: function(param){
+				return request({
+					url: '/api/Ratio',
+					method: 'get',
+					params:param,
+				})
+			},
+			apiRatioAdd: function(data){
+				return request({
+					url: '/api/Ratio',
+					method: 'POST',
+					data:data,
+				}).then((res) => {
+					return res
+				})
+			},
+			apiRatioUpdate: function(data){
+				return request({
+					url: '/api/Ratio',
+					method: 'PUT',
+					data:data,
+				})
+			},
+			apiRatioDel: function(data){
+				return request({
+					url: '/api/Ratio',
+					method: 'Delete',
+					data:data,
+				})
+			},
 			
 			
 

src/components/mars3d/Map4.vue

+<template>
+    <div style="wight:100%;height:100%;position: relative;">
+      <div :id="`mars3d-container${mapKey}`"
+      :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div>
+  
+      <div class="infoview">
+        <div style="display: inline-block;color:red;font-weight:bolder;">每次只允许提交保存一个关键点</div>
+      </div>
+  
+    </div>
+  
+  </template>
+  
+  <script>
+  import Vue from 'vue'
+  import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
+  
+  // 使用免费开源版本
+  import 'mars3d/dist/mars3d.css'
+  import * as mars3d from 'mars3d'
+  import * as Cesium from 'mars3d-cesium/Build/Cesium/Cesium'
+  import  { initGraphicManager,initLayerManager,bindLayerContextMenu } from './js/graphicManager'
+  
+  
+  // 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/install.html)
+  // echarts插件
+  // import 'mars3d-echarts'
+  
+  // 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
+  Vue.prototype.mars3d = mars3d
+  Vue.prototype.Cesium = mars3d.Cesium
+  
+  var map;
+  export default {
+    name: 'mars3dViewer',
+  
+    created(){
+      this.getCoordinate();
+    },
+  
+    data(){
+      return{
+        zuobianData:[],
+        toJavaCoordinates:[],
+        weilanName:[],
+      }
+    },
+  
+    props: {
+      // 初始化配置参数
+      url: String,
+  
+      // 地图唯一性标识
+      mapKey: {
+        type: String,
+        default: ''
+      },
+  
+      // 自定义参数
+      options: Object,
+  
+      // 是否分屏显示
+      compare: {
+        type: Boolean,
+        default: false
+      },
+  
+      // 是否插入到body元素上
+      appendToBody: {
+        type: Boolean,
+        default: false
+      },
+  
+      // 自定义css类名
+      customClass: {
+        type: String,
+        default: ''
+      }
+    },
+  
+    destroy() {
+      this[`map${this.mapKey}`].destroy()
+      delete this[`map${this.mapKey}`]
+    },
+  
+    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);
+  
+            if (this.appendToBody) {
+              document.body.appendChild(this.$el)
+            }
+  
+            if (this.mapKey) {
+              this.initMars3d(this.options)
+            } else {
+              mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
+                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) => {
+            this.$notify({
+              title: '区域信息上传成功，即将重新加载！',
+              type: 'success',
+              duration: 2500
+            });
+            setTimeout(function (){
+              window.location.reload();
+            },2000);
+          }).catch(function(error) { });
+      },
+      //创建地图
+      initMars3d(options) {
+        let that = this;
+        if (this[`map${this.mapKey}`]) return
+  
+        const mapOptions = {
+          ...options,
+          ...this.options,
+          control: {
+            defaultContextMenu: false, //右键菜单
+          },
+        }
+  
+        // 创建三维地球场景
+        map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
+        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]);
+        // })
+
+        // 抛出事件
+        this.$emit('onload', map)
+      },
+      //关键点设置
+      btnStartDraw(){
+        this.toJavaCoordinates = [];
+        let that = this;
+        var graphicLayer3 = new mars3d.layer.GraphicLayer();
+        graphicLayer3.on(mars3d.EventType.click, function (event) {
+          var mpt = mars3d.LatLngPoint.fromCartesian(event.cartesian);
+          that.toJavaCoordinates.push(mpt.toString().split(','));
+          console.log(that.toJavaCoordinates);
+        });
+        map.addLayer(graphicLayer3);
+        initLayerManager(graphicLayer3);
+        graphicLayer3.startDraw({
+          type: "point",
+          style: {
+            color: "red",
+            outline: true,
+            outlineColor: "red",
+            outlineWidth: 10,
+            label: {
+              text: '新增关键点',
+              font_size: 18,
+              color: "blue",
+              distanceDisplayCondition: true,
+              distanceDisplayCondition_far: 500000,
+              distanceDisplayCondition_near: 0,
+              pixelOffset: new Cesium.Cartesian2(10, -25), //偏移量
+            },
+          },
+        });
+      },
+     
+    }
+  }
+  </script>
+  
+  <!-- Add "scoped" attribute to limit CSS to this component only -->
+  <style >
+  .cesium-viewer-toolbar{
+    
+    display: none !important;
+  }
+  .mars3d-compass{
+    display: none !important;
+  }
+  .mars3d-locationbar{
+    display: none !important;
+  }
+  .mars3d-distance-legend{
+    display: none !important;
+  }
+  .mars3d-container {
+    height: 100%;
+    width: 100vw;
+    overflow: hidden;
+  }
+  
+  /* 重写Cesium的css */
+  
+  /**cesium按钮背景色*/
+  .cesium-button {
+    background-color: #3f4854;
+    color: #e6e6e6;
+    fill: #e6e6e6;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+    line-height: 32px;
+  }
+  
+  .cesium-viewer-geocoderContainer .cesium-geocoder-input {
+    background-color: rgba(63, 72, 84, 0.7);
+  }
+  
+  .cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
+    background-color: rgba(63, 72, 84, 0.9);
+  }
+  
+  .cesium-viewer-geocoderContainer .search-results {
+    background-color: #3f4854;
+  }
+  
+  .cesium-geocoder-searchButton {
+    background-color: #3f4854;
+  }
+  
+  .cesium-infoBox-title {
+    background-color: #3f4854;
+  }
+  
+  .cesium-infoBox {
+    background: rgba(63, 72, 84, 0.9);
+  }
+  
+  .cesium-toolbar-button img {
+    height: 100%;
+  }
+  
+  .cesium-performanceDisplay-defaultContainer {
+    top: auto;
+    bottom: 35px;
+    right: 50px;
+  }
+  .cesium-performanceDisplay-ms,
+  .cesium-performanceDisplay-fps {
+    color: #fff;
+  }
+  
+  /**cesium工具栏位置*/
+  .cesium-viewer-toolbar {
+    top: auto;
+    left: auto;
+    right: 12px;
+    bottom: 35px;
+  }
+  
+  .cesium-viewer-toolbar > .cesium-toolbar-button,
+  .cesium-navigationHelpButton-wrapper,
+  .cesium-viewer-geocoderContainer {
+    margin-bottom: 5px;
+    float: right;
+    clear: both;
+    text-align: center;
+  }
+  
+  .cesium-baseLayerPicker-dropDown {
+    bottom: 0;
+    right: 40px;
+    max-height: 700px;
+    margin-bottom: 5px;
+  }
+  
+  .cesium-navigation-help {
+    top: auto;
+    bottom: 0;
+    right: 40px;
+    transform-origin: right bottom;
+  }
+  
+  .cesium-sceneModePicker-wrapper {
+    width: auto;
+  }
+  
+  .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
+    float: left;
+    margin: 0 3px;
+  }
+  
+  .cesium-viewer-geocoderContainer .search-results {
+    left: 0;
+    right: 40px;
+    width: auto;
+    position: absolute;
+    z-index: 999;
+  }
+  
+  .cesium-infoBox-title {
+    background-color: #3f4854;
+  }
+  
+  .cesium-infoBox {
+    top: 50px;
+    background: rgba(63, 72, 84, 0.9);
+  }
+  
+  /**左下工具栏菜单*/
+  .toolbar-dropdown-menu-div {
+    background: rgba(43, 44, 47, 0.8);
+    border: 1px solid #2b2c2f;
+    z-index: 999;
+    position: absolute;
+    right: 60px;
+    bottom: 40px;
+    display: none;
+  }
+  
+  .toolbar-dropdown-menu {
+    min-width: 110px;
+    padding: 0;
+  }
+  .toolbar-dropdown-menu > li {
+    padding: 0 3px;
+    margin: 2px 0;
+  }
+  .toolbar-dropdown-menu > li > a {
+    color: #edffff;
+    display: block;
+    padding: 4px 10px;
+    clear: both;
+    font-weight: normal;
+    line-height: 1.6;
+    white-space: nowrap;
+    text-decoration: none;
+  }
+  
+  .toolbar-dropdown-menu > li > a:hover,
+  .dropdown-menu > li > a:focus {
+    color: #fff;
+    background-color: #444d59;
+  }
+  
+  .toolbar-dropdown-menu > .active > a,
+  .dropdown-menu > .active > a:hover,
+  .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #444d59;
+  }
+  
+  .toolbar-dropdown-menu i {
+    padding-right: 5px;
+  }
+  
+  .infoview{
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 50vw;
+    z-index: 1000;
+  }
+  </style>
+  
\ No newline at end of file