制作新需求

locat/addDataSet.html

@@ -26,7 +26,7 @@
             <div class="rightBox">
                 <div class="map-layer">
                     <div id="map" class="map"></div>
-                    <image-tranform :map-ol="map" v-if="map" ref="imageTranform" />
+                    <image-tranform :map-ol="map" v-if="map && showImageTranform" v-show="showImageTranform1" ref="imageTranform" />
                 </div>
 
             </div>
@@ -53,7 +53,7 @@
                                     平面图</p>
                                 <p class="desc">添加建筑物平面图，方便预览</p>
                             </div>
-                            <div class="btnton" @click="">
+                            <div class="btnton" @click="$refs.imageTranform && $refs.imageTranform.readyUpload">
                                 上传
                             </div>
                         </div>
@@ -63,9 +63,9 @@
                                     思维展厅.PNG
                                 </div>
                                 <div class="fileBtn">
-                                    <div class="fileBtnicon fileDel"></div>
-                                    <div class="fileBtnicon fileHide"></div>
-                                    <div class="fileBtnicon fileSave"></div>
+                                    <!-- <div class="fileBtnicon fileDel"></div> -->
+                                    <div class="fileBtnicon fileHide" @click="showImageTranform1 = !showImageTranform1"></div>
+                                    <div class="fileBtnicon fileSave" @click="getImageTransform"></div>
                                 </div>
                             </div>
                         </div>
@@ -254,6 +254,8 @@
             el: '#app',
             data() {
                 return {
+                    showImageTranform: true,
+                    showImageTranform1: true,
                     isEdit: false,
                     pointLayerArray: [],
                     map: null,

locat/components/image-transform/index.js

@@ -1,44 +1,55 @@
 (() => {
     // 初始地图
     const initMap = (map) => {
-        return {
+        let cacheCanvas
+        const ctrl = {
             map,
             async loadImage(args) {
+                ctrl.remove()
                 const { file, minWidth, minHeight } = args
                 args.img = args.img ?
                     args.img :
                     await blobImageLoad(file, minWidth, minHeight)
 
-                return loadImageLayer(map, args)
+                cacheCanvas = loadImageLayer(map, args)
+                return cacheCanvas
+            },
+            remove() {
+                if (cacheCanvas && cacheCanvas.__layer) {
+                    map.removeLayer(cacheCanvas.__layer)
+                }
+                cacheCanvas = null
             },
             screenToLatlan({ x, y }) {
                 const real = map.getCoordinateFromPixel([x, y])
-                // const latlan = ol.proj.transform(real, 'EPSG:3857', 'EPSG:99999', 'EPSG:99999')
-                var latlan =  proj4("EPSG:3857","EPSG:4490",real);
+                    // const latlan = ol.proj.transform(real, 'EPSG:3857', 'EPSG:99999', 'EPSG:99999')
+                var latlan = proj4("EPSG:3857", "EPSG:4490", real);
                 return latlan
             }
         }
+        return ctrl
     }
 
-    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); 
+    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]] 
+        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)));
+
+    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为基准
+
+    function getSize(imgWidth, scale) { //imgWidth：图片宽度， scale缩放值（x==y）
+        var level = imgWidth / 1024; //以1024为基准
         return 95.54628610610962 * level * scale;
-    } 
-   
+    }
+
 
     const loadImageLayer = (map, args) => {
         const {
@@ -49,6 +60,7 @@
         const { image: imageLayer, canvas } = loadImage(map, args, itude)
 
         map.addLayer(imageLayer);
+        // map.removeLayer(imageLayer);
         map.getView().setCenter(
             ol.proj.fromLonLat([lon, lat])
         );
@@ -246,6 +258,7 @@
         })
         const image = new ol.layer.Image({ source: imageCanvas })
         canvas.imageLayer = imageCanvas
+        canvas.__layer = image
         return {
             image,
             canvas
@@ -334,7 +347,7 @@
     const sceneName = window.location.pathname.split('/')[2]
     const isDev = !sceneName || sceneName === 'addDataSet.html'
 
-    const sceneCode = isDev ? 't-kJ2PEjZ' : window.location.pathname.split('/')[2]
+    const sceneCode = isDev ? 't-l03EZNS' : window.location.pathname.split('/')[2]
     const root = isDev ? `https://testlaser.4dkankan.com` : ''
         // const root = 'http://192.168.0.135:9294'
     const request = {
@@ -354,9 +367,16 @@
             return axios.post(`${root}/indoor/${sceneCode}/api/mapSmall/detail`)
         },
         updateCoord(data) {
-            return axios.post(
-                `${root}/indoor/${sceneCode}/api/update/coord`, { param: data }
-            )
+            return Promise.all([
+                axios.post(`${root}/indoor/${sceneCode}/api/update/coord`, { param: data }),
+                axios.put(`${root}/indoor/${sceneCode}/api/tiled_maps`, {
+                    location: data.location,
+                    map_size_m: data.map_size_m,
+                    orientation: data.orientation,
+                }),
+            ])
+
+            return axios.post(`${root}/indoor/${sceneCode}/api/update/coord`, { param: data })
         },
         getSceneInfo() {
             return axios.get(`${root}/indoor/${sceneCode}/api/datasets`)
@@ -450,9 +470,8 @@
         name: 'imageTranform',
         template: `
       <div class="transform-layer"  @mousemove.stop.prevent="moveHandle"  @mouseup="upMove">
-        <div class="upload-layer">
-         
-          单文件：<input type="file" @change="imageChange">
+        <div class="upload-layer" v-show="false">
+          单文件：<input type="file" @change="imageChange" ref="updom">
         </div>
         <div class="ctrls" :style="boxStyle" @mousedown.stop.prevent="startMove($event, 'move')"></div>
         <div class="cctrls" v-if="box.tl">
@@ -876,16 +895,22 @@
                     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)
+                    ret.map_size_m = getSize(this.imgCanvas.position[2], scale.x),
+                        ret.location = ret.cc,
+                        ret.orientation = getQuaternion(rotate)
                     return ret
                 } else {
                     return {}
                 }
-            }
+            },
+            readyUpload() {
+                this.$refs.updom.click()
+            },
+        },
+        destroyed() {
+            this.map.remove()
         },
         mounted() {
             Promise.all([
@@ -933,6 +958,6 @@
                 this.map = initMap(this.mapOl)
 
             })
-        }
+        },
     })
 })();