feat：提交功能

components/image-transform/index.js

@@ -0,0 +1,907 @@
+(() => {
+    // 初始地图
+    const initMap = (map) => {
+        return {
+            map,
+            async loadImage(args) {
+                const { file, minWidth, minHeight } = args
+                args.img = args.img ?
+                    args.img :
+                    await blobImageLoad(file, minWidth, minHeight)
+
+                return loadImageLayer(map, args)
+            },
+            screenToLatlan({ x, y }) {
+                const real = map.getCoordinateFromPixel([x, y])
+                const latlan = ol.proj.transform(real, 'EPSG:4326', 'EPSG:99999')
+                return latlan
+            }
+        }
+    }
+
+    const loadImageLayer = (map, args) => {
+        const {
+            lon,
+            lat
+        } = args
+        const itude = ol.proj.fromLonLat([lon, lat])
+        const { image: imageLayer, canvas } = loadImage(map, args, itude)
+
+        map.addLayer(imageLayer);
+        map.getView().setCenter(
+            ol.proj.fromLonLat([lon, lat])
+        );
+        map.getView().setZoom(19)
+
+        return canvas
+    }
+
+    // 经纬度转canvas坐标
+    const itudeToCanvasPos = (map, extent, itude) => {
+        //Canvas四至范围不同于当前地图四至范围，计算出南北方向与东西方向的偏移
+        const mapExtent = map.getView()
+            .calculateExtent(map.getSize())
+
+        //当前底图视图范围的投影坐标
+        const canvasOrigin = map.getPixelFromCoordinate(
+            [extent[0], extent[3]]
+        );
+
+        //添加到地图上的canvas图像的左上角
+        const mapOrigin = map.getPixelFromCoordinate(
+            [mapExtent[0], mapExtent[3]]
+        );
+
+        const delta = [
+            mapOrigin[0] - canvasOrigin[0],
+            mapOrigin[1] - canvasOrigin[1]
+        ];
+
+        const leftTop = map.getPixelFromCoordinate(itude)
+
+        return {
+            x: leftTop[0] + delta[0],
+            y: leftTop[1] + delta[1]
+        }
+    }
+
+    // 平移，旋转，放大当前canvas
+    const transformCanvasCall = (
+        canvas,
+        transform,
+        oper,
+        center = {
+            x: 0,
+            y: 0
+        }
+    ) => {
+        const ctx = canvas.getContext('2d')
+        const {
+            translate,
+            scale,
+            rotate
+        } = transform
+
+
+
+        ctx.translate(center.x, center.y)
+        translate && ctx.translate(translate.x, translate.y)
+        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)
+        ctx.translate(-center.x, -center.y)
+    }
+
+    const genImgCanvasItudeToReal = (map, canvas, extent) =>
+        (itude) => {
+            return genImgCanvasPosToReal(map, canvas)(
+                itudeToCanvasPos(map, extent, itude)
+            )
+        }
+
+    const genImgCanvasPosToReal = (map, canvas) =>
+        (pos) => {
+            const $real = map.getViewport()
+            const offsetWidth = (canvas.width - $real.offsetWidth) / 2
+            const offsetHeight = (canvas.height - $real.offsetHeight) / 2
+
+            return {
+                x: pos.x - offsetWidth,
+                y: pos.y - offsetHeight
+            }
+        }
+
+    const genImgCanvasTransfrom = (canvas, arrayImgs, scale, initPos) =>
+        (transform) => {
+            console.log(scale)
+            const ctx = canvas.getContext('2d');
+            const dscale = transform.scale || [1, 1]
+            const resize = 1 / (scale * 10)
+            const doScale = [
+                resize * dscale[0],
+                resize * dscale[1]
+            ]
+            const imgData = { width: 0, height: 0 }
+
+            arrayImgs.forEach(imgs => {
+                let height = 0
+                imgs.forEach(([img]) => height += img.height)
+                imgData.width += imgs[0][0].width
+                if (imgData.height < height) {
+                    imgData.height = height
+                }
+            })
+
+            initPos.x -= imgData.width / 2
+            initPos.y -= imgData.height / 2
+
+            // , translate: { x: -(imgData.width / 2) * doScale[0], y: -(imgData.height / 2) * doScale[1] } 
+            ctx.fillStyle = 'rgba(0,0,0,0.1)'
+            ctx.fillRect(0, 0, canvas.width, canvas.height)
+            transformCanvasCall(
+                canvas, { ...transform, scale: doScale },
+                () => {
+                    transform.draw && transform.draw(ctx)
+                    let width = 0
+                    arrayImgs.forEach(imgs => {
+                        let height = 0
+                        imgs.forEach(([img]) => {
+                            ctx.drawImage(img, width, height)
+                            height += img.height
+                        })
+                        width += imgs[0][0].width
+                    })
+                },
+                transform.center
+            )
+
+            const move = {
+                x: transform.translate.x - initPos.x,
+                y: transform.translate.y - initPos.y,
+            }
+            const start = {
+                x: initPos.x + move.x,
+                y: initPos.y + move.y,
+            }
+            const end = {
+                x: start.x + imgData.width * doScale[0],
+                y: start.y + imgData.height * doScale[1],
+            }
+
+            canvas.position = [
+                start,
+                end,
+                Math.abs(start.x - end.x) / resize,
+                Math.abs(start.y - end.y) / resize
+            ]
+
+            canvas.resize = resize
+            canvas.imgData = imgData
+            canvas.imgBox = [
+                canvas.posToReal(start),
+                canvas.posToReal(end),
+                Math.abs(start.x - end.x),
+                Math.abs(start.y - end.y)
+            ]
+        }
+
+
+    // 加载url
+    const canvas = document.createElement('canvas')
+    const loadImage = (map, args, itude) => {
+        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
+                    }
+                })
+                console.log(scale, size)
+                // 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);
+                canvas.transform = genImgCanvasTransfrom(canvas, args.img, scale, pos, imageCanvas);
+                canvas.itudeToReal = genImgCanvasItudeToReal(map, canvas, extent)
+                canvas.transform({
+                    ...args,
+                    translate: {
+                        x: (args.translate ? args.translate.x : 0) + pos.x,
+                        y: (args.translate ? args.translate.y : 0) + pos.y
+                    }
+                })
+
+                return canvas;
+            }
+        })
+        const image = new ol.layer.Image({ source: imageCanvas })
+        canvas.imageLayer = imageCanvas
+        return {
+            image,
+            canvas
+        }
+    }
+
+
+    // 返回本地url
+    const blobImageLoad = (arrayImages, minWidth, minHeight) => {
+        const analysis = (blob) => new Promise((resolve, reject) => {
+            const url = typeof blob !== 'string' ?
+                window.URL.createObjectURL(blob) :
+                blob
+            const img = new Image()
+
+            img.onload = () => {
+                if (img.width < minWidth || img.height < minHeight) {
+                    reject('图片宽高需要大于512')
+                } else {
+                    resolve([img, url, blob])
+                }
+            }
+            img.src = url
+        })
+
+        let arrasPromises = []
+        for (let images of arrayImages) {
+            let analys = []
+            for (let bolb of images) {
+                analys.push(analysis(bolb))
+            }
+            arrasPromises.push(
+                Promise.all(analys)
+            )
+        }
+
+        return Promise.all(arrasPromises)
+    }
+
+
+    // 获取逆转矩阵
+    const getCanvasInverImatrix = $canvas => {
+        const ctx = $canvas.getContext('2d')
+        const transform = ctx.getTransform()
+        return transform.invertSelf();
+    }
+
+    // canvas坐标转屏幕坐标
+    const getCanvasToScreenPos = ($canvas, { x, y }) => {
+        const {
+            a,
+            b,
+            c,
+            d,
+            e,
+            f
+        } = getCanvasInverImatrix($canvas)
+
+        const screenX = (c * y - d * x + d * e - c * f) / (b * c - a * d)
+        const screenY = (y - screenX * b - f) / d
+
+        return {
+            x: Math.round(screenX),
+            y: Math.round(screenY),
+        }
+    }
+
+    // 屏幕坐标转canvas坐标
+    const getScreenToCanvasPos = ($canvas, { x, y }) => {
+        const {
+            a,
+            b,
+            c,
+            d,
+            e,
+            f
+        } = getCanvasInverImatrix($canvas)
+
+        return {
+            x: Math.round(x * a + y * c + e),
+            y: Math.round(x * b + y * d + f)
+        };
+    }
+
+
+    const sceneName = window.location.pathname.split('/')[2]
+    const isDev = !sceneName || sceneName === 'addDataSet.html'
+
+    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 && 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]
+                }
+            })
+            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
+
+        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>
+    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>
+        <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="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">
+          <div v-for="(item, key) in boxPos" :key="key">
+            <span>{{key}}</span>
+            <span>{{item}}</span>
+          </div>
+        </div>
+      </div>
+    `,
+        data() {
+            return {
+                isHover: false,
+                box: {},
+                left: 0,
+                top: 0
+            }
+        },
+        methods: {
+            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的倍数')
+                        }
+                    };
+                }
+
+
+
+            },
+            async drawCanvas(imagesArray, transfroms, { lat, lon } = {}) {
+                try {
+                    this.transfroms = transfroms || []
+                    this.args = {
+                        draw: (ctx) => {
+                            this.drawIng = false
+                            this.transfroms.forEach(transform => {
+                                transform.forEach(({ translate, scale, rotate, center }) => {
+                                    // 设置绘制颜色
+                                    center && ctx.translate(center.x, center.y)
+                                    translate && ctx.translate(translate.x, translate.y)
+                                    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);
+                                    // }
+                                })
+                            })
+
+                            setTimeout(() => {
+                                this.updateBox(this.imgCanvas.imgBox)
+                            })
+                        },
+                        file: imagesArray,
+                        lon: lon || 113.59963069739054,
+                        lat: lat || 22.364821730960752,
+                        translate: { x: 0, y: 0 },
+                        scale: [1, 1],
+                        direction: 0
+                    }
+                    this.imgCanvas = await this.map.loadImage(this.args)
+                } catch (e) {
+                    console.error(e)
+                    alert(e)
+                }
+            },
+            updateBox() {
+                const calcPos = pos => getCanvasToScreenPos(this.imgCanvas, pos)
+                this.box = {
+                    tl: this.imgCanvas.posToReal(calcPos({ x: 0, y: 0 })),
+                    tc: this.imgCanvas.posToReal(calcPos({ x: this.imgCanvas.imgData.width / 2, y: 0 })),
+                    tr: this.imgCanvas.posToReal(calcPos({ x: this.imgCanvas.imgData.width, y: 0 })),
+                    rc: this.imgCanvas.posToReal(calcPos({ x: this.imgCanvas.imgData.width, y: this.imgCanvas.imgData.height / 2 })),
+                    lc: this.imgCanvas.posToReal(calcPos({ x: 0, y: this.imgCanvas.imgData.height / 2 })),
+                    br: this.imgCanvas.posToReal(calcPos({ x: this.imgCanvas.imgData.width, y: this.imgCanvas.imgData.height })),
+                    bl: this.imgCanvas.posToReal(calcPos({ x: 0, y: this.imgCanvas.imgData.height })),
+                    bc: this.imgCanvas.posToReal(calcPos({ x: this.imgCanvas.imgData.width / 2, y: this.imgCanvas.imgData.height })),
+                    cc: this.imgCanvas.posToReal(calcPos({ x: this.imgCanvas.imgData.width / 2, y: this.imgCanvas.imgData.height / 2 })),
+                }
+
+                let maxX = this.box.tl.x
+                let minX = this.box.tl.x
+                let maxY = this.box.tl.y
+                let minY = this.box.tl.y
+                Object.values(this.box).forEach(({ x, y }) => {
+                    x > maxX && (maxX = x)
+                    y > maxY && (maxY = y)
+                    x < minX && (minX = x)
+                    y < minY && (minY = y)
+                })
+                this.box.width = Math.abs(maxX - minX)
+                this.box.height = Math.abs(maxY - minY)
+            },
+            mapStartHandle() {
+                this.mapDown = true
+            },
+            moveHandle(e) {
+                if (!this.imgCanvas || !this.imgCanvas.imgBox) {
+                    return;
+                }
+                if (this.moveing && this.oper) {
+                    if (!this.time && !this.drawIng) {
+                        this.move(e)
+                        this.time = null
+                    }
+                } else {
+                    this.mapDown && this.imgCanvas.imageLayer.refresh()
+                    // const [start, end] = this.box
+
+                    // this.isHover = e.clientX > start.x && e.clientX < end.x &&
+                    //   e.clientY > start.y && e.clientY < end.y
+                }
+            },
+            startMove(ev, oper, dir) {
+                this.startTransform = {
+                    ...this.args
+                }
+                this.transfroms.push([])
+                this.moveing = true
+                this.oper = oper
+                this.dir = dir
+                this.startMovePos = {
+                    x: ev.clientX,
+                    y: ev.clientY
+                }
+            },
+            move(ev) {
+                if (!this.moveing || this.drawIng) return;
+                const transfrom = this.transfroms[this.transfroms.length - 1]
+                const start = getScreenToCanvasPos(
+                    this.imgCanvas,
+                    this.startMovePos
+                )
+                const end = getScreenToCanvasPos(
+                    this.imgCanvas, { x: ev.clientX, y: ev.clientY }
+                )
+                const move = {
+                    x: end.x - start.x,
+                    y: end.y - start.y
+                }
+
+
+                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
+
+                    switch (this.dir) {
+                        case 'tl':
+                            xScale = (width - move.x) / width
+                            yScale = (height - move.y) / height
+                            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] }
+                                })
+                            }
+                            break;
+                        case 'tc':
+                            yScale = (height - move.y) / height
+                            if (yScale > 0) {
+                                transfrom.length = 0
+                                transfrom.push({
+                                    scale: [1, yScale],
+                                    center: { x: 0, y: this.imgCanvas.position[3] }
+                                })
+                            }
+                            break;
+                        case 'tr':
+                            xScale = (width + move.x) / width
+                            yScale = (height - move.y) / height
+                            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] }
+                                })
+                            }
+                            break;
+                        case 'rc':
+                            xScale = (width + move.x) / width
+                            if (xScale > 0) {
+                                transfrom.length = 0
+                                transfrom.push({
+                                    scale: [xScale, 1],
+                                    center: { x: 0, y: this.imgCanvas.position[3] }
+                                })
+                            }
+                            break;
+                        case 'lc':
+                            xScale = (width - move.x) / width
+                            if (xScale > 0) {
+                                transfrom.length = 0
+                                transfrom.push({
+                                    scale: [xScale, 1],
+                                    center: { x: this.imgCanvas.position[2], y: this.imgCanvas.position[3] }
+                                })
+                            }
+                            break;
+                        case 'br':
+                            xScale = (width + move.x) / width
+                            yScale = (height + move.y) / height
+                            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 }
+                                })
+                            }
+                            break;
+                        case 'bl':
+                            xScale = (width - move.x) / width
+                            yScale = (height + move.y) / height
+                            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 }
+                                })
+                            }
+                            break;
+                        case 'bc':
+                            yScale = (height + move.y) / height
+                            if (yScale > 0) {
+                                transfrom.length = 0
+                                transfrom.push({
+                                    scale: [1, yScale],
+                                    center: { x: 0, y: 0 }
+                                })
+                            }
+                            break;
+                    }
+                } else if (this.oper === 'rotate') {
+                    let move = ev.clientX - this.startMovePos.x
+                    let height = this.imgCanvas.position[3]
+                    let width = this.imgCanvas.position[2]
+                    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.drawIng = true
+                this.imgCanvas.imageLayer.refresh()
+            },
+            upMove() {
+                this.moveing = false
+                this.mapDown = false
+                this.oper = null
+                this.dir = null
+                this.startMovePos = null
+
+
+            },
+            uploadData() {
+                if (!this.args) {
+                    return Promise.resolve(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) {
+                    if (files.length === 1) {
+                        const file = files[0]
+                        files.length = 0
+                        files.push({
+                            ...file,
+                            dir: file.file.name
+                        })
+                    }
+                    promises.push(
+                        request.uploadFiles(files)
+                    )
+                }
+
+                promises.push(
+                    request.updateCoord({
+                        ...this.boxPos,
+                        transfroms: this.transfroms
+                    })
+                )
+                return Promise.all(promises)
+            },
+            getInfo() {
+                return {
+                    pos: this.boxPos,
+                    img: this.args.img
+                }
+            }
+        },
+        computed: {
+            boxStyle() {
+                if (this.box && Object.keys(this.box).length) {
+                    const box = this.box
+                    return {
+                        width: box.width + 20 + 'px',
+                        height: box.height + 20 + 'px',
+                        left: box.cc.x + 'px',
+                        top: box.cc.y + 'px'
+                    }
+                } else {
+                    return {}
+                }
+            },
+            boxPos() {
+                if (this.box && Object.keys(this.box).length) {
+                    const ret = {}
+                    for (let key in this.box) {
+                        if (key !== 'width' && key !== 'height') {
+                            ret[key] = this.map.screenToLatlan(this.box[key])
+                        }
+                    }
+                    let rotate = 0
+                    let scale = {x: 1, y: 1}
+                    this.transfroms.forEach(items => {
+                        items.forEach(item => {
+                            if (item.rotate) {
+                                rotate = Number((rotate + Number(item.rotate)).toFixed(2))
+                            }
+                            if (item.scale) {
+                                scale.x *= item.scale[0]
+                                scale.y *= item.scale[1]
+                            }
+                        })
+                    })
+                    ret.rotate = rotate
+                    ret.scale = scale
+                    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 {}
+                }
+            }
+        },
+        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()
+                this.moveHandle.bind(this)(ev)
+                // this.move.bind(this)(ev)
+            })
+            document.documentElement.addEventListener('mousedown', ev => {
+                this.mapStartHandle.bind(this)(ev)
+            })
+            document.documentElement.addEventListener('mouseup', ev => {
+                ev.stopPropagation()
+                ev.preventDefault()
+                this.upMove.bind(this)()
+            })
+            this.map = initMap(this.mapOl)
+
+        }
+    })
+})();

css/style.css

@@ -1,3 +1,12 @@
+@font-face {
+    font-family: electronicFont;
+    src: url(../font//SourceHanSansCN-Bold.otf)
+}
+
+* {
+    font-family: electronicFont;
+}
+
 body a,
 body .link {
     color: #15BEC8;
@@ -309,7 +318,7 @@ sidebar-menu-item>li icon>i.fa-thumb-tack[iv-tooltip="坐标"] {
     background-size: 100% 100%;
 }
 
-sidebar-menu-item>li icon>i.fa-thumb-tack[iv-tooltip="平面图"] {
+sidebar-menu-item>li icon>i.fa-thumb-tack[iv-tooltip="GPS设置"] {
     background: url(../img/icon/icon_load_n.png?4)no-repeat;
     background-size: 100% 100%;
     width: 60px;
@@ -317,7 +326,7 @@ sidebar-menu-item>li icon>i.fa-thumb-tack[iv-tooltip="平面图"] {
     color: transparent;
 }
 
-.vertical-menu sidebar-menu-item.active>li icon>i.fa-thumb-tack[iv-tooltip="平面图"] {
+.vertical-menu sidebar-menu-item.active>li icon>i.fa-thumb-tack[iv-tooltip="GPS设置"] {
     background: url(../img/icon/icon_load_s.png?4)no-repeat;
     background-size: 100% 100%;
 }
@@ -1511,17 +1520,21 @@ translation-editor[selected-language="selectedLanguage"] .form-group:first-of-ty
 }
 
 
-/* 平面图 */
+/* GPS设置 */
 
-sidebar-menu-item li h4[title="平面图"]+sidebar-menu-items-collection.active {
+sidebar-menu-item li h4[title="GPS设置"]+sidebar-menu-items-collection.active {
     position: fixed;
-    width: calc(100% - 60px);
-    height: calc(100% - 60px);
+    width: calc(100% - 62px);
+    height: calc(100% - 62px);
     right: 0;
     left: 60px !important;
     top: 62px !important;
 }
 
+sidebar-menu-item li h4[title="GPS设置"]+sidebar-menu-items-collection.active .panel-autoscroll {
+    overflow: hidden;
+}
+
 
 /* 导航栏 */
 

js/index.js

@@ -1,8 +1,22 @@
+//  const origin = window.location.origin + window.location.pathname
+//  const tokenKry = 'ls.' + origin + '/#JWT'
+//  const token = getQueryVariable('token')
+//  localStorage.setItem(tokenKry, token)
+
+function getQueryVariable(variable) {
+    var query = window.location.search.substring(1);
+    var vars = query.split("&");
+    for (var i = 0; i < vars.length; i++) {
+        var pair = vars[i].split("=");
+        if (pair[0] == variable) {
+            return pair[1];
+        }
+    }
+    return (false);
+}
 window.onload = function() {
     $('.glyphicon-resize-full').bind('click', function(params) {
         $(this).toggleClass('active')
     })
 
-
-
 }

locat/addDataSet.html

@@ -22,16 +22,67 @@
 <body>
     <div id="app" v-cloak>
         <div class="content">
+
+            <div class="rightBox">
+                <div class="map-layer">
+                    <div id="map" class="map"></div>
+                    <image-tranform :map-ol="map" v-if="map" ref="imageTranform" />
+                </div>
+
+            </div>
             <div id="plane">
-                <div class="scrollBox">
+
+                <div class="main" v-if="!isEdit">
+                    <div class="title">GPS 设置</div>
+                    <div class="main_item">
+                        <div class="Setting">
+                            <div class="msgBox">
+                                <p class="title">
+                                    地理坐标</p>
+                                <p class="desc">确定点云在世界地图上的位置</p>
+                            </div>
+                            <div class="btnton" @click="isEdit = true">
+                                修改
+                            </div>
+                        </div>
+                    </div>
+                    <div class="main_item">
+                        <div class="Setting">
+                            <div class="msgBox">
+                                <p class="title">
+                                    平面图</p>
+                                <p class="desc">添加建筑物平面图，方便预览</p>
+                            </div>
+                            <div class="btnton" @click="">
+                                上传
+                            </div>
+                        </div>
+                        <div class="mapList">
+                            <div class="mapItem">
+                                <div class="fileName">
+                                    思维展厅.PNG
+                                </div>
+                                <div class="fileBtn">
+                                    <div class="fileBtnicon fileDel"></div>
+                                    <div class="fileBtnicon fileHide"></div>
+                                    <div class="fileBtnicon fileSave"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+
+
+                </div>
+                <div v-if="isEdit" class="scrollBox">
                     <!-- <button id="location1">定位1</button>
                     <button id="location2">定位2</button> -->
-                    <p class="title">数据集位置</p>
+                    <p class="title">地理坐标</p>
                     <p class="desc">输入拍摄时记录的坐标，将数据集放置在真实世界地图中</p>
                     <form>
                         <div class="tag">
                             <P class="formTitle">锚点1</P>
-                            <div class="localIcon" @click="location(1)"></div>
+                            <div class="localIcon" @click="set_location(1)"></div>
                         </div>
                         <div class="formItem">
                             <p class="itemTitle">本地坐标:</p>
@@ -85,7 +136,7 @@
 
                         <div class="tag">
                             <P class="formTitle">锚点2</P>
-                            <div class="localIcon" @click="location(2)"></div>
+                            <div class="localIcon" @click="set_location(2)"></div>
                         </div>
                         <div class="formItem">
                             <p class="itemTitle">本地坐标:</p>
@@ -136,37 +187,32 @@
                             </div>
                         </div>
 
-                        <p class="itemTitle">EPSG 坐标系 </p>
+                        <!-- <p class="itemTitle">EPSG 坐标系 </p>
                         <div class="formItem">
                             <div class="allIpt">
                                 <input type="text" v-model="EPSG" name="EPSG" id="EPSG" />
                             </div>
 
-                        </div>
+                        </div> -->
 
 
 
                     </form>
                 </div>
 
-                <div class="bottom">
+                <div v-if="isEdit" class="bottom">
                     <div class="style"></div>
                     <!-- <input type="submit" class="submitBtn" value="提交" />
                     <button id="clear">取消</button> -->
-                    <div id="clear" @click="getImageTransform">提交地图信息</div>
-                    <div id="clear" @click="clearMap">取消</div>
+                    <!-- <div id="clear" @click="getImageTransform">提交地图信息</div> -->
+                    <!-- <div id="clear" @click="clearMap">取消</div> -->
+                    <div id="clear" @click="isEdit=false">取消</div>
                     <div class="submitBtn" @click="commit()">
-                        提交
+                        保存
                     </div>
 
                 </div>
             </div>
-            <div class="rightBox">
-                <div class="map-layer">
-                    <div id="map" class="map"></div>
-                    <image-tranform :map-ol="map" v-if="map" ref="imageTranform" />
-                </div>
-            </div>
 
         </div>
     </div>
@@ -181,7 +227,8 @@
 
     <script>
         //坐标转换定义  部分 定义一个 cgc_2000的38度带投影坐标系
-        proj4.defs( "EPSG:99999", "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80  +units=m +no_defs");
+        proj4.defs("EPSG:99999",
+            "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80  +units=m +no_defs");
         var projection = new ol.proj.Projection({
             code: "EPSG:99999",
             extent: [334238.8538694997, 425861.702215328, 599418.034383447, 5936877.5664797],
@@ -192,19 +239,19 @@
         //结合proj4在ol中自定义坐标系
         ol.proj.addProjection(projection);
         ol.proj.addCoordinateTransforms("EPSG:4326", "EPSG:99999",
-            function (coordinate) {
+            function(coordinate) {
                 return proj4("EPSG:4326", "EPSG:99999", coordinate);
             },
-            function (coordinate) {
+            function(coordinate) {
                 return proj4("EPSG:99999", "EPSG:4326", coordinate);
             }
-        );  
+        );
 
         new Vue({
             el: '#app',
             data() {
                 return {
-
+                    isEdit: false,
                     pointLayerArray: [],
                     map: null,
                     gaodeMapLayer: {},
@@ -225,6 +272,12 @@
                     ageControlLocation2: [],
                     gpsControlCoordinate1: [],
                     gpsControlCoordinate2: [],
+                    control_point_data: {
+                        ageControlLocation1: [],
+                        ageControlLocation2: [],
+                        gpsControlCoordinate1: [],
+                        gpsControlCoordinate2: [],
+                    },
                     sceneNum: '',
                     canvas: null,
                     ctx: null,
@@ -245,7 +298,15 @@
                         lat: '22.364821730960752',
                         direction: '0',
                         size: '256'
-                    }
+                    },
+                    // 优化
+                    list: [{
+                        ageControlLocation1: [0, 0, 0],
+                        gpsControlCoordinate1: [120, 22, 0]
+                    }, {
+                        ageControlLocation2: [0, 0, 0],
+                        gpsControlCoordinate2: [123, 22, 0]
+                    }]
 
                 }
             },
@@ -253,16 +314,11 @@
 
             },
             mounted() {
-
+                this.getContorlPoint()
                 this.sceneNum = window.location.pathname.split('/')[2]
-
-
-                this.map = this.initMap('map');
-
-                console.log(this.map)
-
-
-
+                let t = setTimeout(() => {
+                    this.map = this.initMap('map');
+                }, 0)
 
 
             },
@@ -276,7 +332,7 @@
                         .catch(() => {
                             alert('失败')
                         })
-                        
+
                 },
                 initMap(divid) {
                     this.pointLayerArray = [];
@@ -306,16 +362,17 @@
                     });
                     this.pointLayerArray = [];
                 },
-                addPoint(lon, lat, text) {
+                addPoint(lon, lat, text, index) {
 
                     let vector = new ol.source.Vector();
                     let vLayer = new ol.layer.Vector({
                         source: vector
                     })
                     vLayer.type = "con_point";
+                    vLayer.index = index;
                     this.map.addLayer(vLayer)
                     this.pointLayerArray.push(vLayer);
-                    let labelCoords = ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:99999');
+                    let labelCoords = ol.proj.transform([lon, lat], "EPSG:4326", "EPSG:3857");
                     let feature = new ol.Feature({
                         geometry: new ol.geom.Point(labelCoords)
                     });
@@ -342,11 +399,11 @@
                     }))
                     this.map.getView().setCenter(labelCoords)
                 },
-                location(type) {
+                set_location(index) {
                     let alon
                     let alat
                     let str = ''
-                    if (type == 1) {
+                    if (index == 1) {
                         alon = this.alon;
                         alat = this.alat;
                         str = '锚点1'
@@ -355,8 +412,41 @@
                         alat = this.blat;
                         str = '锚点2'
                     }
+                    this.removePoint(index)
+                    this.addPoint(+alon, +alat, str, index)
+                },
+                removePoint(index) {
+                    let num = this.pointLayerArray.filter((item, i) => {
+                        if (index == item.index) {
+                            this.pointLayerArray.splice(i, 1)
+                        }
+                    })
+                },
+
+
+                commit() {
+                    this.handleData()
+                    Promise.all([
+                        axios.post('/indoor/' + this.sceneNum + '/api/controlPoint/save', {
+                            ageControlLocation1: this.ageControlLocation1,
+                            ageControlLocation2: this.ageControlLocation2,
+                            gpsControlCoordinate1: this.gpsControlCoordinate1,
+                            gpsControlCoordinate2: this.gpsControlCoordinate2,
+                            sceneNum: this.sceneNum,
+                            // id: 1
+                        })
+                        .catch(function(error) {
+                            alert('数据集位置上传失败')
+                        }),
+
+                        this.getImageTransform()
+                        .catch(_ => {
+                            alert('地图数据上传失败')
+                        })
+                    ]).then(() => {
+                        alert('成功')
+                    })
 
-                    this.addPoint(+alon, +alat, str)
                 },
                 handleData() {
                     //重置数组
@@ -380,31 +470,36 @@
 
 
                 },
+                //获取控制点
+                getContorlPoint() {
+                    // /indoor/{sceneCode}/api/controlPoint/detail
 
-                commit() {
-                    this.handleData()
-                    Promise.all([
-                        axios.post('/indoor/' + this.sceneNum + '/api/controlPoint/save', {
-                            ageControlLocation1: this.ageControlLocation1,
-                            ageControlLocation2: this.ageControlLocation2,
-                            gpsControlCoordinate1: this.gpsControlCoordinate1,
-                            gpsControlCoordinate2: this.gpsControlCoordinate2,
-                            sceneNum: this.sceneNum,
-                            // id: 1
-                        })
-                        .catch(function(error) {
-                            alert('数据集位置上传失败')
-                        }),
+                    const sceneName = window.location.pathname.split('/')[2]
+                    const isDev = !sceneName || sceneName === 'addDataSet.html'
 
-                        this.getImageTransform()
-                        .catch(_ => {
-                            alert('地图数据上传失败')
-                        })
-                    ]).then(() => {
-                        alert('成功')
-                    })
+                    const sceneCode = isDev ? 't-kJ2PEjZ' : sceneName
+                    axios.get(`/indoor/${sceneCode}/api/controlPoint/detail`).then(res => {
+                        this.initContorlPoint(res.data.data)
+                        this.set_location(1)
+                        this.set_location(2)
+                    }).catch(err => {
 
+                    })
                 },
+                initContorlPoint(data) {
+                    console.log(data)
+
+
+                    this.ax = data.ageControlLocation1[0]
+                    this.ay = data.ageControlLocation1[1]
+                    this.bx = data.ageControlLocation2[0]
+                    this.by = data.ageControlLocation2[1]
+                    this.alon = data.gpsControlCoordinate1[0]
+                    this.alat = data.gpsControlCoordinate1[1]
+                    this.blon = data.gpsControlCoordinate2[0]
+                    this.blat = data.gpsControlCoordinate2[1]
+
+                }
 
 
             }

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)
     }
 
@@ -142,7 +142,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 +205,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);
@@ -315,7 +315,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()
@@ -343,87 +343,87 @@
     }
 
     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',
@@ -469,7 +469,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 +516,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 +582,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
@@ -834,7 +834,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) {
@@ -863,7 +863,7 @@
             Promise.all([
                 request.getDetail(),
                 request.getSceneInfo()
-            ]).then(async ([res1, res2]) => {
+            ]).then(async([res1, res2]) => {
                 const {
                     path,
                     position
@@ -876,9 +876,9 @@
                     await this.drawCanvas(
                         analysisFiles(files),
                         position ? position.transfroms : [], {
-                        lat: location[1],
-                        lon: location[0],
-                    }
+                            lat: location[1],
+                            lon: location[0],
+                        }
                     )
                 }
 
@@ -890,7 +890,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 +900,11 @@
                 ev.preventDefault()
                 this.upMove.bind(this)()
             })
-            this.map = initMap(this.mapOl)
 
+            this.$nextTick(() => {
+                this.map = initMap(this.mapOl)
+
+            })
         }
     })
 })();

locat/style.css

@@ -10,15 +10,19 @@ body {
     overflow: hidden;
 }
 
+#app {
+    height: 100%;
+    width: 100%;
+}
+
 .content {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow-y: hidden;
     background: #141414;
-
 }
 
 .rightBox {
@@ -27,6 +31,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
 }
 
 .map-layer {
@@ -35,7 +40,6 @@ body {
     padding: 0px;
     margin: 0px;
     position: relative;
-
 }
 
 .map-layer .map {
@@ -53,8 +57,6 @@ body {
     color: #fff;
     border-right: 1px solid rgba(255, 255, 255, .2);
     position: relative;
-
-
 }
 
 .scrollBox {
@@ -65,6 +67,7 @@ body {
     padding: 30px 30px 80px 30px;
 }
 
+
 /* ::-webkit-scrollbar-track {
     background-color: #000;
     -webkit-border-radius: 1em;
@@ -78,12 +81,12 @@ body {
     -moz-border-radius: 1em;
     border-radius: 1em;
 } */
+
 ::-webkit-scrollbar {
     width: 4px;
     height: 1px;
 }
 
-
 ::-webkit-scrollbar-thumb {
     border-radius: 4px;
     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
@@ -95,7 +98,6 @@ body {
     background: #999;
 }
 
-
 ::-webkit-scrollbar-track {
     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
     border-radius: 4px;
@@ -170,6 +172,7 @@ form .formTitle {
     outline: none;
     color: #15BEC8;
     text-align: right;
+    border: none !important;
 }
 
 input::placeholder {
@@ -212,7 +215,6 @@ input::-webkit-input-placeholder {
     border: none;
     outline: none;
     color: rgba(255, 255, 255, 0.6);
-
 }
 
 .bottom {
@@ -263,20 +265,23 @@ input::-webkit-input-placeholder {
     font-size: 14px;
     cursor: pointer;
 }
-.tag{
+
+.tag {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
     margin-top: 30px;
 }
-.localIcon{
+
+.localIcon {
     width: 16px;
     height: 16px;
     background: url("img/local.png")no-repeat;
     background-size: 100% 100%;
     cursor: pointer;
 }
+
 .plane1 {
     position: absolute;
     top: 10px;
@@ -303,9 +308,9 @@ input::-webkit-input-placeholder {
     z-index: 9;
     --margin: 10px;
     transform: translate(-50%, -50%);
-  }
-  
-  .cctrls span {
+}
+
+.cctrls span {
     z-index: 10;
     position: absolute;
     width: 10px;
@@ -314,9 +319,9 @@ input::-webkit-input-placeholder {
     background: red;
     cursor: pointer;
     transform: translate(-50%, -50%);
-  }
-  
-  .box-info {
+}
+
+.box-info {
     padding: 10px;
     color: #fff;
     position: absolute;
@@ -324,4 +329,104 @@ input::-webkit-input-placeholder {
     pointer-events: none;
     left: 0;
     background: rgba(0, 0, 0, 0.5);
-  }
+}
+
+#plane .main {
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+    box-sizing: border-box;
+    padding: 30px 30px 80px 30px;
+}
+
+#plane .main .Setting {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 20px 10px;
+    box-sizing: border-box;
+}
+
+#plane .main:last-of-type .Setting {
+    border-bottom: 1px solid transparent;
+}
+
+#plane .main>.title {
+    padding: 0 10px;
+}
+
+#plane .main .Setting.msgBox {
+    margin-right: 20px;
+    color: #fff;
+    font-style: 24px;
+}
+
+#plane .main .Setting.msgBox .title {
+    font-size: 20px;
+    color: #fff;
+    margin-bottom: 10px;
+}
+
+#plane .main .Setting.msgBox .desc {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 10px;
+}
+
+#plane .main .Setting .btnton {
+    padding: 5px 10px;
+    border: 1px solid #15BEC8;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+#plane .main .Setting .btnton:hover {
+    background: #15BEC8;
+}
+
+.mapItem {
+    border: 1px solid rgba(255, 255, 255, .2);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px 10px;
+    box-sizing: border-box;
+}
+
+.fileName {
+    font-size: 14px;
+    color: #fff;
+}
+
+.fileBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.fileBtnicon {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+.fileBtnicon:last-of-type {
+    margin-right: 0;
+}
+
+.fileDel {
+    background: url(../img/icon/icon_del.png)no-repeat;
+    background-size: 100%;
+}
+
+.fileHide {
+    background: url(../img/icon/icon_hide.png)no-repeat;
+    background-size: 100%;
+}
+
+.fileSave {
+    background: url(../img/icon/icon_save.png)no-repeat;
+    background-size: 100%;
+}

style.css

@@ -0,0 +1,432 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+
+#app {
+    height: 100%;
+    width: 100%;
+}
+
+.content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow-y: hidden;
+    background: #141414;
+}
+
+.rightBox {
+    height: 100%;
+    width: 70%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.map-layer {
+    height: 800px;
+    width: 94%;
+    padding: 0px;
+    margin: 0px;
+    position: relative;
+}
+
+.map-layer .map {
+    width: 100%;
+    height: 100%;
+}
+
+#plane {
+    width: 30%;
+    height: 100%;
+    /* position: absolute; */
+    /* top: 10px;
+    left: 10px; */
+    background-color: rgb(0, 0, 0, 0.3);
+    color: #fff;
+    border-right: 1px solid rgba(255, 255, 255, .2);
+    position: relative;
+}
+
+.scrollBox {
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+    box-sizing: border-box;
+    padding: 30px 30px 80px 30px;
+}
+
+
+/* ::-webkit-scrollbar-track {
+    background-color: #000;
+    -webkit-border-radius: 1em;
+    -moz-border-radius: 1em;
+    border-radius: 1em;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, .2);
+    -webkit-border-radius: 1em;
+    -moz-border-radius: 1em;
+    border-radius: 1em;
+} */
+
+::-webkit-scrollbar {
+    width: 4px;
+    height: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    /* background: #ccc; */
+    background: rgba(255, 255, 255, .2);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #999;
+}
+
+::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    background: #000000;
+}
+
+.ol-overlaycontainer-stopevent {
+    display: none;
+}
+
+#plane .title {
+    font-size: 20px;
+    color: #fff;
+    margin-bottom: 10px;
+}
+
+#plane .desc {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 10px;
+}
+
+form .formTitle {
+    font-size: 16px;
+    color: #fff;
+}
+
+.itemTitle {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+}
+
+.inputItem {
+    width: 100%;
+    height: 34px;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 10px 0 0;
+    margin-bottom: 10px;
+}
+
+.inputItem .name {
+    width: 23%;
+    height: 34px;
+    border-right: 1px solid rgba(255, 255, 255, 0.4);
+    box-sizing: border-box;
+    text-align: center;
+    line-height: 34px;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.4);
+    background: rgba(255, 255, 255, 0.1)
+}
+
+.inputItem .ipt {
+    width: 77%;
+    height: 34px;
+    background: transparent;
+}
+
+.inputItem .ipt input {
+    width: 100%;
+    height: 100%;
+    /* padding: 0 30px; */
+    box-sizing: border-box;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: #15BEC8;
+    text-align: right;
+    border: none !important;
+}
+
+input::placeholder {
+    color: rgba(255, 255, 255, 0.4);
+}
+
+input::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.4);
+}
+
+input::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.inputItem .unit {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.4);
+    margin-left: 5px;
+}
+
+.allIpt {
+    width: 100%;
+    height: 34px;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 10px;
+    background: rgba(255, 255, 255, 0.1)
+}
+
+.allIpt input {
+    width: 100%;
+    height: 100%;
+    /* padding: 0 30px; */
+    box-sizing: border-box;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 63px;
+    background: #141414;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+
+.style {
+    width: 100%;
+    height: 10px;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+    position: absolute;
+    top: -10px;
+    left: 0;
+}
+
+.submitBtn {
+    width: 100px;
+    height: 34px;
+    background: #15BEC8;
+    border-radius: 4px;
+    color: #fff;
+    text-align: center;
+    line-height: 34px;
+    font-size: 14px;
+    margin-left: 10px;
+    cursor: pointer;
+}
+
+#clear {
+    width: 100px;
+    height: 34px;
+    border-radius: 4px;
+    border: 1px solid #15BEC8;
+    color: #15BEC8;
+    text-align: center;
+    line-height: 34px;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.tag {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    margin-top: 30px;
+}
+
+.localIcon {
+    width: 16px;
+    height: 16px;
+    background: url("img/local.png")no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+}
+
+.plane1 {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background-color: rgb(0, 0, 0, 0.3);
+    z-index: 1;
+    color: #fff;
+}
+
+.transform-layer {
+    top: 0;
+    left: 0;
+}
+
+.upload-layer {
+    z-index: 99;
+    left: 0;
+    top: 0;
+    position: absolute;
+}
+
+.ctrls {
+    position: absolute;
+    z-index: 9;
+    --margin: 10px;
+    transform: translate(-50%, -50%);
+}
+
+.cctrls span {
+    z-index: 10;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: red;
+    cursor: pointer;
+    transform: translate(-50%, -50%);
+}
+
+.box-info {
+    padding: 10px;
+    color: #fff;
+    position: absolute;
+    bottom: 0;
+    pointer-events: none;
+    left: 0;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+#plane .main {
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+    box-sizing: border-box;
+    padding: 30px 30px 80px 30px;
+}
+
+#plane .main .Setting {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 20px 10px;
+    box-sizing: border-box;
+}
+
+#plane .main:last-of-type .Setting {
+    border-bottom: 1px solid transparent;
+}
+
+#plane .main>.title {
+    padding: 0 10px;
+}
+
+#plane .main .Setting.msgBox {
+    margin-right: 20px;
+    color: #fff;
+    font-style: 24px;
+}
+
+#plane .main .Setting.msgBox .title {
+    font-size: 20px;
+    color: #fff;
+    margin-bottom: 10px;
+}
+
+#plane .main .Setting.msgBox .desc {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 10px;
+}
+
+#plane .main .Setting .btnton {
+    padding: 5px 10px;
+    border: 1px solid #15BEC8;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+#plane .main .Setting .btnton:hover {
+    background: #15BEC8;
+}
+
+.mapItem {
+    border: 1px solid rgba(255, 255, 255, .2);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px 10px;
+    box-sizing: border-box;
+}
+
+.fileName {
+    font-size: 14px;
+    color: #fff;
+}
+
+.fileBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.fileBtnicon {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+.fileBtnicon:last-of-type {
+    margin-right: 0;
+}
+
+.fileDel {
+    background: url(../img/icon/icon_del.png)no-repeat;
+    background-size: 100%;
+}
+
+.fileHide {
+    background: url(../img/icon/icon_hide.png)no-repeat;
+    background-size: 100%;
+}
+
+.fileSave {
+    background: url(../img/icon/icon_save.png)no-repeat;
+    background-size: 100%;
+}