Update index.js

locat/components/image-transform/index.js

@@ -342,79 +342,79 @@
     }
 
     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) {
-                    current.push(file)
+                    if (i === locals.length - 1) {
+                        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()
+                }
+            }
 
-        Object.keys(imagesXYZ).sort((a, b) => a - b).forEach(key => {
-            imagesArray.push(
-                imagesXYZ[key].sort((a, b) => parseInt(a.name) - parseInt(b))
-            )
-        })
+            delete imagesXYZ.key
 
-        return imagesArray
-    }
+            Object.keys(imagesXYZ).sort((a, b) => a - b).forEach(key => {
+                imagesArray.push(
+                    imagesXYZ[key].sort((a, b) => parseInt(a.name) - parseInt(b))
+                )
+            })
 
+            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="upload-layer">
-          目录：<input type="file" @change="imageChange" directory webkitdirectory multiple>
+         
           单文件：<input type="file" @change="imageChange">
         </div>
         <div class="ctrls" :style="boxStyle" @mousedown.stop.prevent="startMove($event, 'move')"></div>
@@ -446,26 +446,45 @@
             }
         },
         methods: {
-            async imageChange(e) {
-                let imagesArray = []
-
-                if (e.target.files.length > 1) {
-                    const files = {}
-                    for (let file of e.target.files) {
-                        files[file.webkitRelativePath] = file
-                    }
-                    imagesArray = analysisFiles(files)
-                } else {
-                    imagesArray = [
-                        [e.target.files[0]]
-                    ]
-                }
-                if (this.imgCanvas) {
-                    ctx = this.imgCanvas.getContext('2d')
-                    ctx.clearRect(-10000, -10000, 10000, 10000)
+            imageChange(e) {
+                const files = e.target.files;
+                if (files && files[0]) {
+                    const file = files[0];
+                    // onload 里面不能用this
+                    let img = new Image();
+                    img.src = window.URL.createObjectURL(file);
+                    img.onload = async() => {
+                        if (img.width % 256 == 0 && img.height % 256 == 0) {
+                            let imagesArray = []
+
+                            if (e.target.files.length > 1) {
+                                const files = {}
+                                for (let file of e.target.files) {
+                                    files[file.webkitRelativePath] = file
+                                }
+                                imagesArray = analysisFiles(files)
+                            } else {
+                                imagesArray = [
+                                    [e.target.files[0]]
+                                ]
+                            }
+                            if (this.imgCanvas) {
+                                ctx = this.imgCanvas.getContext('2d')
+                                ctx.clearRect(-10000, -10000, 10000, 10000)
+                            }
+                            this.imgCanvas.imageLayer.refresh()
+                            await this.drawCanvas(imagesArray, [], {
+                                lat: this.lat,
+                                lon: this.lon
+                            })
+                        } else {
+                            alert('图片宽高需为256的倍数')
+                        }
+                    };
                 }
-                this.imgCanvas.imageLayer.refresh()
-                await this.drawCanvas(imagesArray, [], { lat: this.lat, lon: this.lon })
+
+
+
             },
             async drawCanvas(imagesArray, transfroms, { lat, lon } = {}) {
                 try {