更改坐标系

locat/addDataSet.html

@@ -136,10 +136,10 @@
                             </div>
                         </div>
 
-                        <p class="itemTitle">EPSG 坐标系 4326</p>
+                        <p class="itemTitle">EPSG 坐标系 </p>
                         <div class="formItem">
                             <div class="allIpt">
-                                <input type="text" v-model="EPSG" name="EPSG" id="EPSG" value="EPSG:4326" />
+                                <input type="text" v-model="EPSG" name="EPSG" id="EPSG" />
                             </div>
 
                         </div>
@@ -173,12 +173,33 @@
 
     <script src="./js/vue.js"></script>
     <script src="./js/axios.min.js"></script>
+    <script src="./js/proj4.js"></script>
     <script src="./components/image-transform/index.js"></script>
     <script type="text/javascript">
         //输入经纬度就可以定位
     </script>
 
     <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");
+        var projection = new ol.proj.Projection({
+            code: "EPSG:99999",
+            extent: [334238.8538694997, 425861.702215328, 599418.034383447, 5936877.5664797],
+            units: 'm',
+            axisOrientation: 'neu',
+            global: false
+        });
+        //结合proj4在ol中自定义坐标系
+        ol.proj.addProjection(projection);
+        ol.proj.addCoordinateTransforms("EPSG:4326", "EPSG:99999",
+            function (coordinate) {
+                return proj4("EPSG:4326", "EPSG:99999", coordinate);
+            },
+            function (coordinate) {
+                return proj4("EPSG:99999", "EPSG:4326", coordinate);
+            }
+        );  
+
         new Vue({
             el: '#app',
             data() {
@@ -199,7 +220,7 @@
                     blon: '123',
                     blat: '22',
                     balt: '0',
-                    EPSG: 'EPSG:4326',
+                    EPSG: 'EPSG:99999',
                     ageControlLocation1: [],
                     ageControlLocation2: [],
                     gpsControlCoordinate1: [],
@@ -294,7 +315,7 @@
                     vLayer.type = "con_point";
                     this.map.addLayer(vLayer)
                     this.pointLayerArray.push(vLayer);
-                    let labelCoords = ol.proj.transform([lon, lat], "EPSG:4326", "EPSG:3857");
+                    let labelCoords = ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:99999');
                     let feature = new ol.Feature({
                         geometry: new ol.geom.Point(labelCoords)
                     });

locat/components/image-transform/index.js

@@ -13,7 +13,7 @@
             },
             screenToLatlan({ x, y }) {
                 const real = map.getCoordinateFromPixel([x, y])
-                const latlan = ol.proj.transform(real, 'EPSG:3857', 'EPSG:4326')
+                const latlan = ol.proj.transform(real, 'EPSG:4326', 'EPSG:99999')
                 return latlan
             }
         }
@@ -116,6 +116,7 @@
 
     const genImgCanvasTransfrom = (canvas, arrayImgs, scale, initPos) =>
         (transform) => {
+            console.log(scale)
             const ctx = canvas.getContext('2d');
             const dscale = transform.scale || [1, 1]
             const resize = 1 / (scale * 10)
@@ -203,6 +204,7 @@
                         imgData.height = height
                     }
                 })
+                console.log(scale, size)
                 // pos.x -= imgData.width / 2 * scale
                 // pos.y -= imgData.height / 2 * scale
                 canvas.width = size[0];