修改移动交互

locat/components/image-transform/index.js

@@ -89,9 +89,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)
     }
 
@@ -141,7 +141,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
@@ -191,21 +191,20 @@
     // 加载url
     const canvas = document.createElement('canvas')
     const loadImage = (map, args, itude) => {
-        console.log('create canvas')
         const imageCanvas = new ol.source.ImageCanvas({
             canvasFunction(extent, scale, _2, size) {
                 const pos = itudeToCanvasPos(map, extent, itude)
                 const imgData = { width: 0, height: 0 }
                 args.img.forEach(imgs => {
-                        let height = 0
-                        imgs.forEach(([img]) => height += img.height)
-                        imgData.width += imgs[0][0].width
-                        if (imgData.height < height) {
-                            imgData.height = height
-                        }
-                    })
-                    // pos.x -= imgData.width / 2 * scale
-                    // pos.y -= imgData.height / 2 * scale
+                    let height = 0
+                    imgs.forEach(([img]) => height += img.height)
+                    imgData.width += imgs[0][0].width
+                    if (imgData.height < height) {
+                        imgData.height = height
+                    }
+                })
+                // 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);
@@ -314,7 +313,7 @@
 
     const sceneCode = isDev ? 't-kJ2PEjZ' : 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()
@@ -342,77 +341,92 @@
     }
 
     const analysisFiles = (files) => {
-            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]
+        const imagesArray = []
+        const formatError = () => {
+            alert('目录不规范 请上传 z/x/y.png 格式目录，且在最底级目录放置图片文件')
+        }
 
-                        if (i === locals.length - 3) {
-                            current.key = 'z'
-                        }
+        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 - 1) {
-                        current.push(file)
+                    if (i === locals.length - 3) {
+                        current.key = 'z'
                     }
                 }
+
+                if (i === locals.length - 1 && Array.isArray(current)) {
+                    current.push(file)
+                }
             }
+        }
 
-            (function analysis(updateXYZ) {
-                if (updateXYZ.key === 'z') {
-                    imagesXYZ = updateXYZ
-                    return;
+        (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]
                 }
-                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);
+            })
+            analysis(updateXYZ[names[0]])
+        })(imagesXYZ);
 
-            if (!(imagesXYZ && imagesXYZ.key === 'z' && !Array.isArray(imagesXYZ))) {
+        if (!(imagesXYZ && imagesXYZ.key === 'z' && !Array.isArray(imagesXYZ))) {
+            return formatError()
+        }
+
+        for (let key in imagesXYZ) {
+            if (!Array.isArray(imagesXYZ[key]) && key !== 'key') {
                 return formatError()
             }
+        }
 
-            for (let key in imagesXYZ) {
-                if (!Array.isArray(imagesXYZ[key]) && key !== 'key') {
-                    return formatError()
-                }
-            }
+        delete imagesXYZ.key
 
-            delete imagesXYZ.key
+        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) => parseInt(a.name) - parseInt(b))
-                )
-            })
+        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="move"  @mouseup="upMove">
+      <div class="transform-layer"  @mousemove.stop.prevent="moveHandle"  @mouseup="upMove">
         <div class="upload-layer">
          
           单文件：<input type="file" @change="imageChange">
@@ -453,7 +467,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 = []
 
@@ -491,6 +505,7 @@
                     this.transfroms = transfroms || []
                     this.args = {
                         draw: (ctx) => {
+                            this.drawIng = false
                             this.transfroms.forEach(transform => {
                                 transform.forEach(({ translate, scale, rotate, center }) => {
                                     // 设置绘制颜色
@@ -499,11 +514,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);
+                                    // }
                                 })
                             })
 
@@ -559,10 +574,13 @@
                     return;
                 }
                 if (this.moveing && this.oper) {
-                    this.move(e)
+                    if (!this.time && !this.drawIng) {
+                        this.move(e)
+                        this.time = null
+                    }
                 } 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
@@ -582,7 +600,7 @@
                 }
             },
             move(ev) {
-                if (!this.moveing) return;
+                if (!this.moveing || this.drawIng) return;
                 const transfrom = this.transfroms[this.transfroms.length - 1]
                 const start = getScreenToCanvasPos(
                     this.imgCanvas,
@@ -598,8 +616,13 @@
 
 
                 if (this.oper === 'move') {
+                    transfrom.length = 0
                     transfrom.push({ translate: move })
                 } else if (this.oper === 'scale') {
+
+                    const doScale = (transfrom && transfrom[0] && transfrom[0].scale) || [1, 1]
+                    move.x = move.x * doScale[0]
+                    move.y = move.y * doScale[1]
                     const width = this.imgCanvas.position[2]
                     const height = this.imgCanvas.position[3]
                     let xScale, yScale
@@ -608,7 +631,13 @@
                         case 'tl':
                             xScale = (width - move.x) / width
                             yScale = (height - move.y) / height
-                            if (xScale > 0.1 && yScale > 0.1) {
+                            if (xScale < yScale) {
+                                yScale = xScale
+                            } else {
+                                xScale = yScale
+                            }
+                            if (xScale > 0 && yScale > 0) {
+                                transfrom.length = 0
                                 transfrom.push({
                                     scale: [xScale, yScale],
                                     center: { x: this.imgCanvas.position[2], y: this.imgCanvas.position[3] }
@@ -617,7 +646,8 @@
                             break;
                         case 'tc':
                             yScale = (height - move.y) / height
-                            if (yScale > 0.1) {
+                            if (yScale > 0) {
+                                transfrom.length = 0
                                 transfrom.push({
                                     scale: [1, yScale],
                                     center: { x: 0, y: this.imgCanvas.position[3] }
@@ -627,7 +657,13 @@
                         case 'tr':
                             xScale = (width + move.x) / width
                             yScale = (height - move.y) / height
-                            if (xScale > 0.1 && yScale > 0.1) {
+                            if (xScale > yScale) {
+                                yScale = xScale
+                            } else {
+                                xScale = yScale
+                            }
+                            if (xScale > 0 && yScale > 0) {
+                                transfrom.length = 0
                                 transfrom.push({
                                     scale: [xScale, yScale],
                                     center: { x: 0, y: this.imgCanvas.position[3] }
@@ -636,7 +672,8 @@
                             break;
                         case 'rc':
                             xScale = (width + move.x) / width
-                            if (xScale > 0.1) {
+                            if (xScale > 0) {
+                                transfrom.length = 0
                                 transfrom.push({
                                     scale: [xScale, 1],
                                     center: { x: 0, y: this.imgCanvas.position[3] }
@@ -645,7 +682,8 @@
                             break;
                         case 'lc':
                             xScale = (width - move.x) / width
-                            if (xScale > 0.1) {
+                            if (xScale > 0) {
+                                transfrom.length = 0
                                 transfrom.push({
                                     scale: [xScale, 1],
                                     center: { x: this.imgCanvas.position[2], y: this.imgCanvas.position[3] }
@@ -655,7 +693,13 @@
                         case 'br':
                             xScale = (width + move.x) / width
                             yScale = (height + move.y) / height
-                            if (xScale > 0.1 && yScale > 0.1) {
+                            if (xScale < yScale) {
+                                yScale = xScale
+                            } else {
+                                xScale = yScale
+                            }
+                            if (xScale > 0 && yScale > 0) {
+                                transfrom.length = 0
                                 transfrom.push({
                                     scale: [xScale, yScale],
                                     center: { x: 0, y: 0 }
@@ -665,7 +709,13 @@
                         case 'bl':
                             xScale = (width - move.x) / width
                             yScale = (height + move.y) / height
-                            if (xScale > 0.1 && yScale > 0.1) {
+                            if (xScale < yScale) {
+                                yScale = xScale
+                            } else {
+                                xScale = yScale
+                            }
+                            if (xScale > 0 && yScale > 0) {
+                                transfrom.length = 0
                                 transfrom.push({
                                     scale: [xScale, yScale],
                                     center: { x: this.imgCanvas.position[2], y: 0 }
@@ -674,7 +724,8 @@
                             break;
                         case 'bc':
                             yScale = (height + move.y) / height
-                            if (yScale > 0.1) {
+                            if (yScale > 0) {
+                                transfrom.length = 0
                                 transfrom.push({
                                     scale: [1, yScale],
                                     center: { x: 0, y: 0 }
@@ -689,15 +740,17 @@
                     let center = { x: width / 2, y: height / 2 }
 
                     // let zrotate = transfrom.
+                    transfrom.length = 0
                     transfrom.push({
                         rotate: move / 3,
                         center: center
                     })
                 }
-                this.startMovePos = {
-                    x: ev.clientX,
-                    y: ev.clientY
-                }
+                // this.startMovePos = {
+                //     x: ev.clientX,
+                //     y: ev.clientY
+                // }
+                this.drawIng = true
                 this.imgCanvas.imageLayer.refresh()
             },
             upMove() {
@@ -728,6 +781,14 @@
                 }
 
                 if (files.length) {
+                    if (files.length === 1) {
+                        const file = files[0]
+                        files.length = 0
+                        files.push({
+                            ...file,
+                            dir: file.file.name
+                        })
+                    }
                     promises.push(
                         request.uploadFiles(files)
                     )
@@ -770,6 +831,20 @@
                             ret[key] = this.map.screenToLatlan(this.box[key])
                         }
                     }
+                    let rotate = 0
+                    this.transfroms.forEach(items => {
+                        items.forEach(item => {
+                            if (item.rotate) {
+                                rotate = Number((rotate + Number(item.rotate)).toFixed(2))
+                            }
+                        })
+                    })
+                    ret.rotate = rotate
+                    let ctx = this.imgCanvas.getContext('2d')
+                    let key = ['a', 'b', 'c', 'd', 'e', 'f']
+                    let imatrix = ctx.getTransform()
+                    ret.imatrix = {}
+                    key.forEach(k => ret.imatrix[k] = imatrix[k])
                     return ret
                 } else {
                     return {}
@@ -780,7 +855,7 @@
             Promise.all([
                 request.getDetail(),
                 request.getSceneInfo()
-            ]).then(async([res1, res2]) => {
+            ]).then(async ([res1, res2]) => {
                 const {
                     path,
                     position
@@ -793,9 +868,9 @@
                     await this.drawCanvas(
                         analysisFiles(files),
                         position ? position.transfroms : [], {
-                            lat: location[1],
-                            lon: location[0],
-                        }
+                        lat: location[1],
+                        lon: location[0],
+                    }
                     )
                 }
 
@@ -807,7 +882,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)

locat/style.css

@@ -321,6 +321,7 @@ input::-webkit-input-placeholder {
     color: #fff;
     position: absolute;
     bottom: 0;
+    pointer-events: none;
     left: 0;
     background: rgba(0, 0, 0, 0.5);
   }