添加参数

locat/addDataSet.html

@@ -174,6 +174,7 @@
     <script src="./js/vue.js"></script>
     <script src="./js/axios.min.js"></script>
     <script src="./js/proj4.js"></script>
+    <script src="./js/three.js"></script>
     <script src="./components/image-transform/index.js"></script>
     <script type="text/javascript">
         //输入经纬度就可以定位
@@ -182,6 +183,7 @@
     <script>
         //坐标转换定义  部分 定义一个 cgc_2000的38度带投影坐标系
         proj4.defs( "EPSG:99999", "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80  +units=m +no_defs");
+        proj4.defs("EPSG:4490","+proj=longlat +ellps=GRS80 +no_defs");
         var projection = new ol.proj.Projection({
             code: "EPSG:99999",
             extent: [334238.8538694997, 425861.702215328, 599418.034383447, 5936877.5664797],

locat/components/image-transform/index.js

@@ -13,12 +13,33 @@
             },
             screenToLatlan({ x, y }) {
                 const real = map.getCoordinateFromPixel([x, y])
-                const latlan = ol.proj.transform(real, 'EPSG:4326', 'EPSG:99999')
+                // const latlan = ol.proj.transform(real, 'EPSG:3857', 'EPSG:99999', 'EPSG:99999')
+                var latlan =  proj4("EPSG:3857","EPSG:4490",real);
                 return latlan
             }
         }
     }
 
+    function toArray(quaternion){
+        var rot90 =  (new THREE.Quaternion).setFromAxisAngle(new THREE.Vector3(0,0,1), THREE.Math.degToRad(-90)) //add 转入时旋转90度
+       , rot90Invert = rot90.clone().inverse()//add 转出时旋回90度
+        var t1 = quaternion.clone().multiply(rot90Invert); 
+        var e = t1.toArray();
+        return [e[3], e[0], e[1], e[2]] 
+    }
+    
+    function getQuaternion(angle){//angle:0-360 角度
+        var quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,THREE.Math.degToRad(-angle)));
+        return toArray(quaternion)
+        
+    }
+    
+    function getSize(imgWidth, scale){//imgWidth：图片宽度， scale缩放值（x==y）
+        var level = imgWidth / 1024;  //以1024为基准
+        return 95.54628610610962 * level * scale;
+    } 
+   
+
     const loadImageLayer = (map, args) => {
         const {
             lon,
@@ -436,13 +457,15 @@
         <div class="ctrls" :style="boxStyle" @mousedown.stop.prevent="startMove($event, 'move')"></div>
         <div class="cctrls" v-if="box.tl">
           <span class="tl" :style="{left: box.tl.x + 'px', top: box.tl.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'tl')"></span>
-          <span class="tc" :style="{left: box.tc.x + 'px', top: box.tc.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'tc')"></span>
           <span class="tr" :style="{left: box.tr.x + 'px', top: box.tr.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'tr')"></span>
-          <span class="rc" :style="{left: box.rc.x + 'px', top: box.rc.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'rc')"></span>
-          <span class="lc" :style="{left: box.lc.x + 'px', top: box.lc.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'lc')"></span>
+          <!-- 
+            <span class="tc" :style="{left: box.tc.x + 'px', top: box.tc.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'tc')"></span>
+            <span class="rc" :style="{left: box.rc.x + 'px', top: box.rc.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'rc')"></span>
+            <span class="bc" :style="{left: box.bc.x + 'px', top: box.bc.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'bc')"></span>
+            <span class="lc" :style="{left: box.lc.x + 'px', top: box.lc.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'lc')"></span>
+        -->
           <span class="br" :style="{left: box.br.x + 'px', top: box.br.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'br')"></span>
           <span class="bl" :style="{left: box.bl.x + 'px', top: box.bl.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'bl')"></span>
-          <span class="bc" :style="{left: box.bc.x + 'px', top: box.bc.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'bc')"></span>
           <span class="cc" :style="{left: box.cc.x + 'px', top: box.cc.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'rotate')"></span>
         </div>
         <div class="box-info" v-if="boxPos.tl">
@@ -799,7 +822,7 @@
                 promises.push(
                     request.updateCoord({
                         ...this.boxPos,
-                        transfroms: this.transfroms
+                        transfroms: this.transfroms,
                     })
                 )
                 return Promise.all(promises)
@@ -853,6 +876,11 @@
                     let imatrix = ctx.getTransform()
                     ret.imatrix = {}
                     key.forEach(k => ret.imatrix[k] = imatrix[k])
+                    
+                    // 缩放，坐标，角度
+                    ret.map_size_m = getSize(this.imgCanvas.position[2], scale.x), 
+                    ret.location = ret.cc,
+                    ret.orientation = getQuaternion(rotate)
                     return ret
                 } else {
                     return {}

locat/style.css

@@ -317,6 +317,8 @@ input::-webkit-input-placeholder {
   }
   
   .box-info {
+    font-size: 10px;
+    line-height: 12px;
     padding: 10px;
     color: #fff;
     position: absolute;