地图数据对接

locat/addDataSet.html

@@ -247,7 +247,7 @@
             },
             methods: {
                 getImageTransform() {
-                    console.log(this.$refs.imageTranform.getInfo())
+                    this.$refs.imageTranform.uploadData()
                 },
                 initMap(divid) {
                     this.pointLayerArray = [];

locat/components/image-transform/index.js

@@ -190,12 +190,11 @@
 
 
   // 加载url
+  const canvas = document.createElement('canvas')
   const loadImage = (map, args, itude) => {
-
-    const canvas = document.createElement('canvas');
+    console.log('create canvas')
     const imageCanvas = new ol.source.ImageCanvas({
       canvasFunction(extent, scale, _2, size) {
-        console.log('-------------')
         const pos = itudeToCanvasPos(map, extent, itude)
         const imgData = { width: 0, height: 0 }
         args.img.forEach(imgs => {
@@ -206,7 +205,6 @@
             imgData.height = height
           }
         })
-        console.log(scale)
         // pos.x -= imgData.width / 2 * scale
         // pos.y -= imgData.height / 2 * scale
         canvas.width = size[0];
@@ -236,9 +234,10 @@
 
   // 返回本地url
   const blobImageLoad = (arrayImages, minWidth, minHeight) => {
-    console.log(arrayImages)
     const analysis = (blob) => new Promise((resolve, reject) => {
-      const url = window.URL.createObjectURL(blob);
+      const url = typeof blob !== 'string' 
+        ? window.URL.createObjectURL(blob)
+        : blob
       const img = new Image()
 
       img.onload = () => {
@@ -303,6 +302,103 @@
   }
 
 
+  const isDev = !window.location.pathname.split('/')[2]
+  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 request = {
+    uploadFiles(files) {
+      const fromData = new FormData()
+      files.forEach(({dir, file}) => {
+        fromData.append(dir, file)
+      })
+      return axios({
+        headers: { 'Content-Type': 'multipart/form-data' },
+        method: 'POST',
+        data: fromData,
+        url: `${root}/indoor/${sceneCode}/api/mapSmall/upload`
+      })
+    },
+    getDetail() {
+      return axios.post(`${root}/indoor/${sceneCode}/api/mapSmall/detail`)
+    },
+    updateCoord(data) {
+      return axios.post(
+        `${root}/indoor/${sceneCode}/api/update/coord`,
+        { param: data }
+      )
+    },
+    getSceneInfo() {
+      return axios.get(`${root}/indoor/${sceneCode}/api/datasets`)
+    }
+  }
+
+  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]
+
+          if (i === locals.length - 3) {
+            current.key = 'z'
+          }
+        }
+        
+        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]
+        }
+      })
+      analysis(updateXYZ[names[0]])
+    })(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()
+      }
+    }
+
+    delete imagesXYZ.key
+
+    Object.keys(imagesXYZ).sort((a, b) => a - b).forEach(key => {
+      imagesArray.push(
+        imagesXYZ[key].sort((a, b) => parseInt(a.name) - parseInt(b))
+      )
+    })
+
+    return imagesArray
+  }
 
   Vue.component('imageTranform', {
     props: ['mapOl'],
@@ -344,74 +440,26 @@
     methods: {
       async imageChange(e) {
         let imagesArray = []
+
         if (e.target.files.length > 1) {
-          const formatError = () => {
-            e.target.value = null
-            console.log(imagesXYZ)
-            alert('目录不规范 请上传 z/x/y.png 格式目录，且在最底级目录放置图片文件')
-          }
-          let imagesXYZ = {}
+          const files = {}
           for (let file of e.target.files) {
-            let locals = file.webkitRelativePath.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 - 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]
-              }
-            })
-            analysis(updateXYZ[names[0]])
-          })(imagesXYZ);
-
-          if (!(imagesXYZ && imagesXYZ.key === 'z' && !Array.isArray(imagesXYZ))) {
-            return formatError()
+            files[file.webkitRelativePath] = file
           }
-
-          for (let key in imagesXYZ) {
-            if (!Array.isArray(imagesXYZ[key]) && key !== 'key') {
-              return formatError()
-            }
-          }
-
-          delete imagesXYZ.key
-
-          Object.keys(imagesXYZ).sort((a, b) => a - b).forEach(key => {
-            imagesArray.push(
-              imagesXYZ[key].sort((a, b) => parseInt(a.name) - parseInt(b))
-            )
-          })
+          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 })
+      },
+      async drawCanvas(imagesArray, transfroms, {lat, lon} = {}) {
         try {
-          this.transfroms = []
+          this.transfroms = transfroms || []
           this.args = {
             draw: (ctx) => {
               this.transfroms.forEach(transform => {
@@ -435,15 +483,15 @@
               })
             },
             file: imagesArray,
-            lon: 113.59963069739054,
-            lat: 22.364821730960752,
+            lon: lon || 113.59963069739054,
+            lat: lat || 22.364821730960752,
             translate: {x: 0, y: 0},
             scale: [1, 1],
             direction: 0
           }
-          console.log('---0---')
           this.imgCanvas = await this.map.loadImage(this.args)
         } catch(e) {
+          console.error(e)
           alert(e)
         }
       },
@@ -633,6 +681,38 @@
 
         
       },
+      uploadData() {
+        if (!this.args) {
+          return true
+        }
+        
+        const promises = []
+        const files = []
+        for (let i = 0; i < this.args.img.length; i++) {
+          const images = this.args.img[i]
+          for (let j = 0; j < images.length; j++) {
+            const file = images[j][2]
+            if (typeof file !== 'string') {
+              const suffix = file.type.substr(file.type.indexOf('/') + 1)
+              files.push({ dir: `${i}/${j}.${suffix}`, file })
+            }
+          }
+        }
+
+        if (files.length) {
+          promises.push(
+            request.uploadFiles(files)
+          )
+        }
+
+        promises.push(
+          request.updateCoord({
+            ...this.boxPos,
+            transfroms: this.transfroms
+          })
+        )
+        return Promise.all(promises)
+      },
       getInfo() {
         return {
           pos: this.boxPos, 
@@ -669,6 +749,33 @@
       }
     },
     mounted() {
+      Promise.all([
+        request.getDetail(),
+        request.getSceneInfo()
+      ]).then(async ([res1, res2]) => {
+        const {
+          path, 
+          position
+        } = res1.data.data
+        const { location } = res2.data[0]
+
+        if (path && path.length > 0) {
+          const files = {}
+          path.forEach(path => (files[path] = root + path))
+          await this.drawCanvas(
+            analysisFiles(files),
+            position ? position.transfroms : [],
+            {
+              lat: location[1],
+              lon: location[0],
+            }
+          )
+        }
+
+        this.lat = location[1]
+        this.lon = location[0]
+      })
+
       document.documentElement.addEventListener('mousemove', ev => {
         ev.stopPropagation()
         ev.preventDefault()