fix：修复资源文件路径不对

components/image-transform/index.js

@@ -1,24 +1,56 @@
 (() => {
     // 初始地图
     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: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
             }
         }
+        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);
+        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,
@@ -28,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])
         );
@@ -89,9 +122,9 @@
         rotate && ctx.rotate(rotate * (Math.PI / 180))
         scale && ctx.scale(scale[0], scale[1])
         oper && oper()
-        // scale && ctx.scale(1 / scale, 1 / scale)
-        // rotate && ctx.rotate(-rotate * (Math.PI / 180))
-        // translate && ctx.translate(-translate.x, -translate.y)
+            // scale && ctx.scale(1 / scale, 1 / scale)
+            // rotate && ctx.rotate(-rotate * (Math.PI / 180))
+            // translate && ctx.translate(-translate.x, -translate.y)
         ctx.translate(-center.x, -center.y)
     }
 
@@ -142,7 +175,7 @@
             ctx.fillStyle = 'rgba(0,0,0,0.1)'
             ctx.fillRect(0, 0, canvas.width, canvas.height)
             transformCanvasCall(
-                canvas, { ...transform, scale: doScale },
+                canvas, {...transform, scale: doScale },
                 () => {
                     transform.draw && transform.draw(ctx)
                     let width = 0
@@ -205,8 +238,8 @@
                     }
                 })
                 console.log(scale, size)
-                // pos.x -= imgData.width / 2 * scale
-                // pos.y -= imgData.height / 2 * scale
+                    // pos.x -= imgData.width / 2 * scale
+                    // pos.y -= imgData.height / 2 * scale
                 canvas.width = size[0];
                 canvas.height = size[1]
                 canvas.posToReal = genImgCanvasPosToReal(map, canvas);
@@ -225,6 +258,7 @@
         })
         const image = new ol.layer.Image({ source: imageCanvas })
         canvas.imageLayer = imageCanvas
+        canvas.__layer = image
         return {
             image,
             canvas
@@ -313,9 +347,9 @@
     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 root = 'http://192.168.0.135:9294'
     const request = {
         uploadFiles(files) {
             const fromData = new FormData()
@@ -333,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`)
@@ -343,106 +384,107 @@
     }
 
     const analysisFiles = (files) => {
-        const imagesArray = []
-        const formatError = () => {
-            alert('目录不规范 请上传 z/x/y.png 格式目录，且在最底级目录放置图片文件')
-        }
+            const imagesArray = []
+            const formatError = () => {
+                alert('目录不规范 请上传 z/x/y.png 格式目录，且在最底级目录放置图片文件')
+            }
 
-        let imagesXYZ = {}
-        for (let dir in files) {
-            let file = files[dir]
-            let locals = dir.split(/[\\|//]/)
-            if (locals.length < 3) return formatError()
-            let current = imagesXYZ
-            for (let i = 0; i < locals.length; i++) {
-                let dir = locals[i]
-
-                if (i !== locals.length - 1) {
-                    if (!current[dir]) {
-                        current[dir] = i === locals.length - 2 ? [] : {}
-                    }
-                    current = current[dir]
+            let imagesXYZ = {}
+            for (let dir in files) {
+                let file = files[dir]
+                let locals = dir.split(/[\\|//]/)
+                if (locals.length < 3) return formatError()
+                let current = imagesXYZ
+                for (let i = 0; i < locals.length; i++) {
+                    let dir = locals[i]
+
+                    if (i !== locals.length - 1) {
+                        if (!current[dir]) {
+                            current[dir] = i === locals.length - 2 ? [] : {}
+                        }
+                        current = current[dir]
 
-                    if (i === locals.length - 3) {
-                        current.key = 'z'
+                        if (i === locals.length - 3) {
+                            current.key = 'z'
+                        }
                     }
-                }
 
-                if (i === locals.length - 1 && Array.isArray(current)) {
-                    current.push(file)
+                    if (i === locals.length - 1 && Array.isArray(current)) {
+                        current.push(file)
+                    }
                 }
             }
-        }
 
-        (function analysis(updateXYZ) {
-            if (updateXYZ.key === 'z') {
-                imagesXYZ = updateXYZ
-                return;
-            }
-            const names = Object.keys(updateXYZ).sort((a, b) => b - a)
-            names.forEach(key => {
-                if (key !== names[0]) {
-                    delete updateXYZ[key]
+            (function analysis(updateXYZ) {
+                if (updateXYZ.key === 'z') {
+                    imagesXYZ = updateXYZ
+                    return;
                 }
-            })
-            analysis(updateXYZ[names[0]])
-        })(imagesXYZ);
-
-        if (!(imagesXYZ && imagesXYZ.key === 'z' && !Array.isArray(imagesXYZ))) {
-            return formatError()
-        }
+                const names = Object.keys(updateXYZ).sort((a, b) => b - a)
+                names.forEach(key => {
+                    if (key !== names[0]) {
+                        delete updateXYZ[key]
+                    }
+                })
+                analysis(updateXYZ[names[0]])
+            })(imagesXYZ);
 
-        for (let key in imagesXYZ) {
-            if (!Array.isArray(imagesXYZ[key]) && key !== 'key') {
+            if (!(imagesXYZ && imagesXYZ.key === 'z' && !Array.isArray(imagesXYZ))) {
                 return formatError()
             }
-        }
 
-        delete imagesXYZ.key
+            for (let key in imagesXYZ) {
+                if (!Array.isArray(imagesXYZ[key]) && key !== 'key') {
+                    return formatError()
+                }
+            }
 
-        const getNameNum = (str) => {
-            let rg = str.match(/[\/\\]([^\/\\]*)?\.[^\/\\]*$/)
-            return weight = rg ? parseInt(rg[1]) : 999
-        }
+            delete imagesXYZ.key
 
-        Object.keys(imagesXYZ).sort((a, b) => a - b).forEach(key => {
-            imagesArray.push(
-                imagesXYZ[key].sort((a, b) => {
-                    let wa = typeof a === 'string' 
-                        ? getNameNum(a) 
-                        : parseInt(a.name)
-                        
-                    let wb = typeof b === 'string' 
-                        ? getNameNum(b) 
-                        : parseInt(b.name)
-                    return wa - wb
-                })
-            )
-        })
+            const getNameNum = (str) => {
+                let rg = str.match(/[\/\\]([^\/\\]*)?\.[^\/\\]*$/)
+                return weight = rg ? parseInt(rg[1]) : 999
+            }
 
+            Object.keys(imagesXYZ).sort((a, b) => a - b).forEach(key => {
+                imagesArray.push(
+                    imagesXYZ[key].sort((a, b) => {
+                        let wa = typeof a === 'string' ?
+                            getNameNum(a) :
+                            parseInt(a.name)
+
+                        let wb = typeof b === 'string' ?
+                            getNameNum(b) :
+                            parseInt(b.name)
+                        return wa - wb
+                    })
+                )
+            })
 
-        return imagesArray
-    }
-    //  目录：<input type="file" @change="imageChange" directory webkitdirectory multiple>
+
+            return imagesArray
+        }
+        //  目录：<input type="file" @change="imageChange" directory webkitdirectory multiple>
     Vue.component('imageTranform', {
         props: ['mapOl'],
         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">
           <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">
@@ -469,7 +511,7 @@
                     // onload 里面不能用this
                     let img = new Image();
                     img.src = window.URL.createObjectURL(file);
-                    img.onload = async () => {
+                    img.onload = async() => {
                         if (img.width % 256 == 0 && img.height % 256 == 0) {
                             let imagesArray = []
 
@@ -516,11 +558,11 @@
                                     rotate && ctx.rotate(rotate * (Math.PI / 180))
                                     scale && ctx.scale(scale[0], scale[1])
                                     center && ctx.translate(-center.x, -center.y)
-                                    // if (center) {
-                                    //   ctx.fillStyle = "geend";
-                                    //     // 绘制成矩形
-                                    //   ctx.fillRect(center.x, center.y, 100, 100);
-                                    // }
+                                        // if (center) {
+                                        //   ctx.fillStyle = "geend";
+                                        //     // 绘制成矩形
+                                        //   ctx.fillRect(center.x, center.y, 100, 100);
+                                        // }
                                 })
                             })
 
@@ -582,7 +624,7 @@
                     }
                 } else {
                     this.mapDown && this.imgCanvas.imageLayer.refresh()
-                    // const [start, end] = this.box
+                        // const [start, end] = this.box
 
                     // this.isHover = e.clientX > start.x && e.clientX < end.x &&
                     //   e.clientY > start.y && e.clientY < end.y
@@ -799,7 +841,7 @@
                 promises.push(
                     request.updateCoord({
                         ...this.boxPos,
-                        transfroms: this.transfroms
+                        transfroms: this.transfroms,
                     })
                 )
                 return Promise.all(promises)
@@ -809,7 +851,10 @@
                     pos: this.boxPos,
                     img: this.args.img
                 }
-            }
+            },
+            readyUpload() {
+                this.$refs.updom.click()
+            },
         },
         computed: {
             boxStyle() {
@@ -834,7 +879,7 @@
                         }
                     }
                     let rotate = 0
-                    let scale = {x: 1, y: 1}
+                    let scale = { x: 1, y: 1 }
                     this.transfroms.forEach(items => {
                         items.forEach(item => {
                             if (item.rotate) {
@@ -853,17 +898,25 @@
                     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 {}
                 }
-            }
+            },
+        },
+        destroyed() {
+            this.map.remove()
         },
         mounted() {
             Promise.all([
                 request.getDetail(),
                 request.getSceneInfo()
-            ]).then(async ([res1, res2]) => {
+            ]).then(async([res1, res2]) => {
                 const {
                     path,
                     position
@@ -876,9 +929,9 @@
                     await this.drawCanvas(
                         analysisFiles(files),
                         position ? position.transfroms : [], {
-                        lat: location[1],
-                        lon: location[0],
-                    }
+                            lat: location[1],
+                            lon: location[0],
+                        }
                     )
                 }
 
@@ -890,7 +943,7 @@
                 ev.stopPropagation()
                 ev.preventDefault()
                 this.moveHandle.bind(this)(ev)
-                // this.move.bind(this)(ev)
+                    // this.move.bind(this)(ev)
             })
             document.documentElement.addEventListener('mousedown', ev => {
                 this.mapStartHandle.bind(this)(ev)
@@ -900,8 +953,11 @@
                 ev.preventDefault()
                 this.upMove.bind(this)()
             })
-            this.map = initMap(this.mapOl)
 
-        }
+            this.$nextTick(() => {
+                this.map = initMap(this.mapOl)
+
+            })
+        },
     })
 })();