|
|
@@ -89,9 +89,9 @@
|
|
|
rotate && ctx.rotate(rotate * (Math.PI / 180))
|
|
|
scale && ctx.scale(scale[0], scale[1])
|
|
|
oper && oper()
|
|
|
- // scale && ctx.scale(1 / scale, 1 / scale)
|
|
|
- // rotate && ctx.rotate(-rotate * (Math.PI / 180))
|
|
|
- // translate && ctx.translate(-translate.x, -translate.y)
|
|
|
+ // scale && ctx.scale(1 / scale, 1 / scale)
|
|
|
+ // rotate && ctx.rotate(-rotate * (Math.PI / 180))
|
|
|
+ // translate && ctx.translate(-translate.x, -translate.y)
|
|
|
ctx.translate(-center.x, -center.y)
|
|
|
}
|
|
|
|
|
|
@@ -141,7 +141,7 @@
|
|
|
ctx.fillStyle = 'rgba(0,0,0,0.1)'
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
|
|
transformCanvasCall(
|
|
|
- canvas, {...transform, scale: doScale },
|
|
|
+ canvas, { ...transform, scale: doScale },
|
|
|
() => {
|
|
|
transform.draw && transform.draw(ctx)
|
|
|
let width = 0
|
|
|
@@ -191,21 +191,20 @@
|
|
|
// 加载url
|
|
|
const canvas = document.createElement('canvas')
|
|
|
const loadImage = (map, args, itude) => {
|
|
|
- console.log('create canvas')
|
|
|
const imageCanvas = new ol.source.ImageCanvas({
|
|
|
canvasFunction(extent, scale, _2, size) {
|
|
|
const pos = itudeToCanvasPos(map, extent, itude)
|
|
|
const imgData = { width: 0, height: 0 }
|
|
|
args.img.forEach(imgs => {
|
|
|
- let height = 0
|
|
|
- imgs.forEach(([img]) => height += img.height)
|
|
|
- imgData.width += imgs[0][0].width
|
|
|
- if (imgData.height < height) {
|
|
|
- imgData.height = height
|
|
|
- }
|
|
|
- })
|
|
|
- // pos.x -= imgData.width / 2 * scale
|
|
|
- // pos.y -= imgData.height / 2 * scale
|
|
|
+ let height = 0
|
|
|
+ imgs.forEach(([img]) => height += img.height)
|
|
|
+ imgData.width += imgs[0][0].width
|
|
|
+ if (imgData.height < height) {
|
|
|
+ imgData.height = height
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // pos.x -= imgData.width / 2 * scale
|
|
|
+ // pos.y -= imgData.height / 2 * scale
|
|
|
canvas.width = size[0];
|
|
|
canvas.height = size[1]
|
|
|
canvas.posToReal = genImgCanvasPosToReal(map, canvas);
|
|
|
@@ -314,7 +313,7 @@
|
|
|
|
|
|
const sceneCode = isDev ? 't-kJ2PEjZ' : window.location.pathname.split('/')[2]
|
|
|
const root = isDev ? `https://testlaser.4dkankan.com` : ''
|
|
|
- // const root = 'http://192.168.0.135:9294'
|
|
|
+ // const root = 'http://192.168.0.135:9294'
|
|
|
const request = {
|
|
|
uploadFiles(files) {
|
|
|
const fromData = new FormData()
|
|
|
@@ -342,77 +341,92 @@
|
|
|
}
|
|
|
|
|
|
const analysisFiles = (files) => {
|
|
|
- const imagesArray = []
|
|
|
- const formatError = () => {
|
|
|
- alert('目录不规范 请上传 z/x/y.png 格式目录，且在最底级目录放置图片文件')
|
|
|
- }
|
|
|
-
|
|
|
- let imagesXYZ = {}
|
|
|
- for (let dir in files) {
|
|
|
- let file = files[dir]
|
|
|
- let locals = dir.split(/[\\|//]/)
|
|
|
- if (locals.length < 3) return formatError()
|
|
|
- let current = imagesXYZ
|
|
|
- for (let i = 0; i < locals.length; i++) {
|
|
|
- let dir = locals[i]
|
|
|
-
|
|
|
- if (i !== locals.length - 1) {
|
|
|
- if (!current[dir]) {
|
|
|
- current[dir] = i === locals.length - 2 ? [] : {}
|
|
|
- }
|
|
|
- current = current[dir]
|
|
|
+ const imagesArray = []
|
|
|
+ const formatError = () => {
|
|
|
+ alert('目录不规范 请上传 z/x/y.png 格式目录，且在最底级目录放置图片文件')
|
|
|
+ }
|
|
|
|
|
|
- if (i === locals.length - 3) {
|
|
|
- current.key = 'z'
|
|
|
- }
|
|
|
+ let imagesXYZ = {}
|
|
|
+ for (let dir in files) {
|
|
|
+ let file = files[dir]
|
|
|
+ let locals = dir.split(/[\\|//]/)
|
|
|
+ if (locals.length < 3) return formatError()
|
|
|
+ let current = imagesXYZ
|
|
|
+ for (let i = 0; i < locals.length; i++) {
|
|
|
+ let dir = locals[i]
|
|
|
+
|
|
|
+ if (i !== locals.length - 1) {
|
|
|
+ if (!current[dir]) {
|
|
|
+ current[dir] = i === locals.length - 2 ? [] : {}
|
|
|
}
|
|
|
+ current = current[dir]
|
|
|
|
|
|
- if (i === locals.length - 1) {
|
|
|
- current.push(file)
|
|
|
+ if (i === locals.length - 3) {
|
|
|
+ current.key = 'z'
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ if (i === locals.length - 1 && Array.isArray(current)) {
|
|
|
+ current.push(file)
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- (function analysis(updateXYZ) {
|
|
|
- if (updateXYZ.key === 'z') {
|
|
|
- imagesXYZ = updateXYZ
|
|
|
- return;
|
|
|
+ (function analysis(updateXYZ) {
|
|
|
+ if (updateXYZ.key === 'z') {
|
|
|
+ imagesXYZ = updateXYZ
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const names = Object.keys(updateXYZ).sort((a, b) => b - a)
|
|
|
+ names.forEach(key => {
|
|
|
+ if (key !== names[0]) {
|
|
|
+ delete updateXYZ[key]
|
|
|
}
|
|
|
- const names = Object.keys(updateXYZ).sort((a, b) => b - a)
|
|
|
- names.forEach(key => {
|
|
|
- if (key !== names[0]) {
|
|
|
- delete updateXYZ[key]
|
|
|
- }
|
|
|
- })
|
|
|
- analysis(updateXYZ[names[0]])
|
|
|
- })(imagesXYZ);
|
|
|
+ })
|
|
|
+ analysis(updateXYZ[names[0]])
|
|
|
+ })(imagesXYZ);
|
|
|
|
|
|
- if (!(imagesXYZ && imagesXYZ.key === 'z' && !Array.isArray(imagesXYZ))) {
|
|
|
+ if (!(imagesXYZ && imagesXYZ.key === 'z' && !Array.isArray(imagesXYZ))) {
|
|
|
+ return formatError()
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let key in imagesXYZ) {
|
|
|
+ if (!Array.isArray(imagesXYZ[key]) && key !== 'key') {
|
|
|
return formatError()
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- for (let key in imagesXYZ) {
|
|
|
- if (!Array.isArray(imagesXYZ[key]) && key !== 'key') {
|
|
|
- return formatError()
|
|
|
- }
|
|
|
- }
|
|
|
+ delete imagesXYZ.key
|
|
|
|
|
|
- delete imagesXYZ.key
|
|
|
+ const getNameNum = (str) => {
|
|
|
+ let rg = str.match(/[\/\\]([^\/\\]*)?\.[^\/\\]*$/)
|
|
|
+ return weight = rg ? parseInt(rg[1]) : 999
|
|
|
+ }
|
|
|
|
|
|
- Object.keys(imagesXYZ).sort((a, b) => a - b).forEach(key => {
|
|
|
- imagesArray.push(
|
|
|
- imagesXYZ[key].sort((a, b) => parseInt(a.name) - parseInt(b))
|
|
|
- )
|
|
|
- })
|
|
|
+ Object.keys(imagesXYZ).sort((a, b) => a - b).forEach(key => {
|
|
|
+ imagesArray.push(
|
|
|
+ imagesXYZ[key].sort((a, b) => {
|
|
|
+ let wa = typeof a === 'string'
|
|
|
+ ? getNameNum(a)
|
|
|
+ : parseInt(a.name)
|
|
|
+
|
|
|
+ let wb = typeof b === 'string'
|
|
|
+ ? getNameNum(b)
|
|
|
+ : parseInt(b.name)
|
|
|
+ return wa - wb
|
|
|
+ })
|
|
|
+ )
|
|
|
+ })
|
|
|
|
|
|
- return imagesArray
|
|
|
- }
|
|
|
- // 目录：<input type="file" @change="imageChange" directory webkitdirectory multiple>
|
|
|
+
|
|
|
+ return imagesArray
|
|
|
+ }
|
|
|
+ // 目录：<input type="file" @change="imageChange" directory webkitdirectory multiple>
|
|
|
Vue.component('imageTranform', {
|
|
|
props: ['mapOl'],
|
|
|
name: 'imageTranform',
|
|
|
template: `
|
|
|
- <div class="transform-layer" @mousemove.stop.prevent="move" @mouseup="upMove">
|
|
|
+ <div class="transform-layer" @mousemove.stop.prevent="moveHandle" @mouseup="upMove">
|
|
|
<div class="upload-layer">
|
|
|
|
|
|
单文件：<input type="file" @change="imageChange">
|
|
|
@@ -453,7 +467,7 @@
|
|
|
// onload 里面不能用this
|
|
|
let img = new Image();
|
|
|
img.src = window.URL.createObjectURL(file);
|
|
|
- img.onload = async() => {
|
|
|
+ img.onload = async () => {
|
|
|
if (img.width % 256 == 0 && img.height % 256 == 0) {
|
|
|
let imagesArray = []
|
|
|
|
|
|
@@ -491,6 +505,7 @@
|
|
|
this.transfroms = transfroms || []
|
|
|
this.args = {
|
|
|
draw: (ctx) => {
|
|
|
+ this.drawIng = false
|
|
|
this.transfroms.forEach(transform => {
|
|
|
transform.forEach(({ translate, scale, rotate, center }) => {
|
|
|
// 设置绘制颜色
|
|
|
@@ -499,11 +514,11 @@
|
|
|
rotate && ctx.rotate(rotate * (Math.PI / 180))
|
|
|
scale && ctx.scale(scale[0], scale[1])
|
|
|
center && ctx.translate(-center.x, -center.y)
|
|
|
- // if (center) {
|
|
|
- // ctx.fillStyle = "geend";
|
|
|
- // // 绘制成矩形
|
|
|
- // ctx.fillRect(center.x, center.y, 100, 100);
|
|
|
- // }
|
|
|
+ // if (center) {
|
|
|
+ // ctx.fillStyle = "geend";
|
|
|
+ // // 绘制成矩形
|
|
|
+ // ctx.fillRect(center.x, center.y, 100, 100);
|
|
|
+ // }
|
|
|
})
|
|
|
})
|
|
|
|
|
|
@@ -559,10 +574,13 @@
|
|
|
return;
|
|
|
}
|
|
|
if (this.moveing && this.oper) {
|
|
|
- this.move(e)
|
|
|
+ if (!this.time && !this.drawIng) {
|
|
|
+ this.move(e)
|
|
|
+ this.time = null
|
|
|
+ }
|
|
|
} else {
|
|
|
this.mapDown && this.imgCanvas.imageLayer.refresh()
|
|
|
- // const [start, end] = this.box
|
|
|
+ // const [start, end] = this.box
|
|
|
|
|
|
// this.isHover = e.clientX > start.x && e.clientX < end.x &&
|
|
|
// e.clientY > start.y && e.clientY < end.y
|
|
|
@@ -582,7 +600,7 @@
|
|
|
}
|
|
|
},
|
|
|
move(ev) {
|
|
|
- if (!this.moveing) return;
|
|
|
+ if (!this.moveing || this.drawIng) return;
|
|
|
const transfrom = this.transfroms[this.transfroms.length - 1]
|
|
|
const start = getScreenToCanvasPos(
|
|
|
this.imgCanvas,
|
|
|
@@ -598,8 +616,13 @@
|
|
|
|
|
|
|
|
|
if (this.oper === 'move') {
|
|
|
+ transfrom.length = 0
|
|
|
transfrom.push({ translate: move })
|
|
|
} else if (this.oper === 'scale') {
|
|
|
+
|
|
|
+ const doScale = (transfrom && transfrom[0] && transfrom[0].scale) || [1, 1]
|
|
|
+ move.x = move.x * doScale[0]
|
|
|
+ move.y = move.y * doScale[1]
|
|
|
const width = this.imgCanvas.position[2]
|
|
|
const height = this.imgCanvas.position[3]
|
|
|
let xScale, yScale
|
|
|
@@ -608,7 +631,13 @@
|
|
|
case 'tl':
|
|
|
xScale = (width - move.x) / width
|
|
|
yScale = (height - move.y) / height
|
|
|
- if (xScale > 0.1 && yScale > 0.1) {
|
|
|
+ if (xScale < yScale) {
|
|
|
+ yScale = xScale
|
|
|
+ } else {
|
|
|
+ xScale = yScale
|
|
|
+ }
|
|
|
+ if (xScale > 0 && yScale > 0) {
|
|
|
+ transfrom.length = 0
|
|
|
transfrom.push({
|
|
|
scale: [xScale, yScale],
|
|
|
center: { x: this.imgCanvas.position[2], y: this.imgCanvas.position[3] }
|
|
|
@@ -617,7 +646,8 @@
|
|
|
break;
|
|
|
case 'tc':
|
|
|
yScale = (height - move.y) / height
|
|
|
- if (yScale > 0.1) {
|
|
|
+ if (yScale > 0) {
|
|
|
+ transfrom.length = 0
|
|
|
transfrom.push({
|
|
|
scale: [1, yScale],
|
|
|
center: { x: 0, y: this.imgCanvas.position[3] }
|
|
|
@@ -627,7 +657,13 @@
|
|
|
case 'tr':
|
|
|
xScale = (width + move.x) / width
|
|
|
yScale = (height - move.y) / height
|
|
|
- if (xScale > 0.1 && yScale > 0.1) {
|
|
|
+ if (xScale > yScale) {
|
|
|
+ yScale = xScale
|
|
|
+ } else {
|
|
|
+ xScale = yScale
|
|
|
+ }
|
|
|
+ if (xScale > 0 && yScale > 0) {
|
|
|
+ transfrom.length = 0
|
|
|
transfrom.push({
|
|
|
scale: [xScale, yScale],
|
|
|
center: { x: 0, y: this.imgCanvas.position[3] }
|
|
|
@@ -636,7 +672,8 @@
|
|
|
break;
|
|
|
case 'rc':
|
|
|
xScale = (width + move.x) / width
|
|
|
- if (xScale > 0.1) {
|
|
|
+ if (xScale > 0) {
|
|
|
+ transfrom.length = 0
|
|
|
transfrom.push({
|
|
|
scale: [xScale, 1],
|
|
|
center: { x: 0, y: this.imgCanvas.position[3] }
|
|
|
@@ -645,7 +682,8 @@
|
|
|
break;
|
|
|
case 'lc':
|
|
|
xScale = (width - move.x) / width
|
|
|
- if (xScale > 0.1) {
|
|
|
+ if (xScale > 0) {
|
|
|
+ transfrom.length = 0
|
|
|
transfrom.push({
|
|
|
scale: [xScale, 1],
|
|
|
center: { x: this.imgCanvas.position[2], y: this.imgCanvas.position[3] }
|
|
|
@@ -655,7 +693,13 @@
|
|
|
case 'br':
|
|
|
xScale = (width + move.x) / width
|
|
|
yScale = (height + move.y) / height
|
|
|
- if (xScale > 0.1 && yScale > 0.1) {
|
|
|
+ if (xScale < yScale) {
|
|
|
+ yScale = xScale
|
|
|
+ } else {
|
|
|
+ xScale = yScale
|
|
|
+ }
|
|
|
+ if (xScale > 0 && yScale > 0) {
|
|
|
+ transfrom.length = 0
|
|
|
transfrom.push({
|
|
|
scale: [xScale, yScale],
|
|
|
center: { x: 0, y: 0 }
|
|
|
@@ -665,7 +709,13 @@
|
|
|
case 'bl':
|
|
|
xScale = (width - move.x) / width
|
|
|
yScale = (height + move.y) / height
|
|
|
- if (xScale > 0.1 && yScale > 0.1) {
|
|
|
+ if (xScale < yScale) {
|
|
|
+ yScale = xScale
|
|
|
+ } else {
|
|
|
+ xScale = yScale
|
|
|
+ }
|
|
|
+ if (xScale > 0 && yScale > 0) {
|
|
|
+ transfrom.length = 0
|
|
|
transfrom.push({
|
|
|
scale: [xScale, yScale],
|
|
|
center: { x: this.imgCanvas.position[2], y: 0 }
|
|
|
@@ -674,7 +724,8 @@
|
|
|
break;
|
|
|
case 'bc':
|
|
|
yScale = (height + move.y) / height
|
|
|
- if (yScale > 0.1) {
|
|
|
+ if (yScale > 0) {
|
|
|
+ transfrom.length = 0
|
|
|
transfrom.push({
|
|
|
scale: [1, yScale],
|
|
|
center: { x: 0, y: 0 }
|
|
|
@@ -689,15 +740,17 @@
|
|
|
let center = { x: width / 2, y: height / 2 }
|
|
|
|
|
|
// let zrotate = transfrom.
|
|
|
+ transfrom.length = 0
|
|
|
transfrom.push({
|
|
|
rotate: move / 3,
|
|
|
center: center
|
|
|
})
|
|
|
}
|
|
|
- this.startMovePos = {
|
|
|
- x: ev.clientX,
|
|
|
- y: ev.clientY
|
|
|
- }
|
|
|
+ // this.startMovePos = {
|
|
|
+ // x: ev.clientX,
|
|
|
+ // y: ev.clientY
|
|
|
+ // }
|
|
|
+ this.drawIng = true
|
|
|
this.imgCanvas.imageLayer.refresh()
|
|
|
},
|
|
|
upMove() {
|
|
|
@@ -728,6 +781,14 @@
|
|
|
}
|
|
|
|
|
|
if (files.length) {
|
|
|
+ if (files.length === 1) {
|
|
|
+ const file = files[0]
|
|
|
+ files.length = 0
|
|
|
+ files.push({
|
|
|
+ ...file,
|
|
|
+ dir: file.file.name
|
|
|
+ })
|
|
|
+ }
|
|
|
promises.push(
|
|
|
request.uploadFiles(files)
|
|
|
)
|
|
|
@@ -770,6 +831,20 @@
|
|
|
ret[key] = this.map.screenToLatlan(this.box[key])
|
|
|
}
|
|
|
}
|
|
|
+ let rotate = 0
|
|
|
+ this.transfroms.forEach(items => {
|
|
|
+ items.forEach(item => {
|
|
|
+ if (item.rotate) {
|
|
|
+ rotate = Number((rotate + Number(item.rotate)).toFixed(2))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ ret.rotate = rotate
|
|
|
+ let ctx = this.imgCanvas.getContext('2d')
|
|
|
+ let key = ['a', 'b', 'c', 'd', 'e', 'f']
|
|
|
+ let imatrix = ctx.getTransform()
|
|
|
+ ret.imatrix = {}
|
|
|
+ key.forEach(k => ret.imatrix[k] = imatrix[k])
|
|
|
return ret
|
|
|
} else {
|
|
|
return {}
|
|
|
@@ -780,7 +855,7 @@
|
|
|
Promise.all([
|
|
|
request.getDetail(),
|
|
|
request.getSceneInfo()
|
|
|
- ]).then(async([res1, res2]) => {
|
|
|
+ ]).then(async ([res1, res2]) => {
|
|
|
const {
|
|
|
path,
|
|
|
position
|
|
|
@@ -793,9 +868,9 @@
|
|
|
await this.drawCanvas(
|
|
|
analysisFiles(files),
|
|
|
position ? position.transfroms : [], {
|
|
|
- lat: location[1],
|
|
|
- lon: location[0],
|
|
|
- }
|
|
|
+ lat: location[1],
|
|
|
+ lon: location[0],
|
|
|
+ }
|
|
|
)
|
|
|
}
|
|
|
|
|
|
@@ -807,7 +882,7 @@
|
|
|
ev.stopPropagation()
|
|
|
ev.preventDefault()
|
|
|
this.moveHandle.bind(this)(ev)
|
|
|
- this.move.bind(this)(ev)
|
|
|
+ // this.move.bind(this)(ev)
|
|
|
})
|
|
|
document.documentElement.addEventListener('mousedown', ev => {
|
|
|
this.mapStartHandle.bind(this)(ev)
|
