|
|
@@ -162,28 +162,7 @@
|
|
|
</div>
|
|
|
<div class="rightBox">
|
|
|
<div id="map" class="map">
|
|
|
- <div class="plane1">
|
|
|
- <!-- 文件路径:<input type="text" id="filePath" value="./img/gangwan256.png" /><button
|
|
|
- id="upload">上传</button><br> -->
|
|
|
-
|
|
|
- 上传地图：<input type="file" id="file" name="file" multiple="multiple" @change="handleFileChange">
|
|
|
- <br> 位置(左上角)：
|
|
|
- <br> 经度：
|
|
|
- <input type="text" id="lon" v-model="uploadData.lon" /><br> 纬度：
|
|
|
- <input type="text" id="lat" v-model="uploadData.lat" /><br> 朝向(顺时针为正)：
|
|
|
- <input type="text" id="direction" v-model="uploadData.direction" /><br> 大小：
|
|
|
- <input type="text" id="size" v-model="uploadData.size" /><br>
|
|
|
- <!-- <button id="ok" @click="getImage">确定</button> -->
|
|
|
- <button id="drug" @click="onDrawImage">
|
|
|
- <span v-if="!isDraw">开启拖拽</span>
|
|
|
- <span v-if="isDraw">关闭拖拽</span>
|
|
|
- </button>
|
|
|
- <button id="rotate" @click="onRotate">
|
|
|
- <span v-if="!isRotate">开启旋转</span>
|
|
|
- <span v-if="isRotate">关闭旋转</span>
|
|
|
- </button>
|
|
|
- <button id="save" @click="onSave">保存</button>
|
|
|
- </div>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
@@ -386,281 +365,7 @@
|
|
|
alert('失败')
|
|
|
});
|
|
|
},
|
|
|
- handleFileChange(e) {
|
|
|
- const input = e.target;
|
|
|
- const files = e.target.files;
|
|
|
- if (files && files[0]) {
|
|
|
- const file = files[0];
|
|
|
- // onload 里面不能用this
|
|
|
- this.imgSrc = window.URL.createObjectURL(file);
|
|
|
- let img = new Image();
|
|
|
- img.src = this.imgSrc;
|
|
|
- let self = this;
|
|
|
- img.onload = function() {
|
|
|
- console.log(img.width, img.height)
|
|
|
- if (img.width < self.limitSize || img.height < self.limitSize) {
|
|
|
- alert('图片宽高需要大于512')
|
|
|
- input.value = '';
|
|
|
- return false;
|
|
|
- } else if (img.width != img.height) {
|
|
|
- alert('图片比例必须为1:1')
|
|
|
- input.value = '';
|
|
|
- return false;
|
|
|
- } else {
|
|
|
-
|
|
|
- self.file = file
|
|
|
- self.uploadData.size = img.width
|
|
|
- self.getImage()
|
|
|
- }
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- getImage() {
|
|
|
- let lon = document.getElementById("lon").value;
|
|
|
- let lat = document.getElementById("lat").value;
|
|
|
- let direction = document.getElementById("direction").value;
|
|
|
- // let url = document.getElementById("filePath").value;
|
|
|
- let url = this.imgSrc;
|
|
|
- this.showSmallMap(+lon, +lat, +direction, url)
|
|
|
- },
|
|
|
-
|
|
|
- onDrawImage() {
|
|
|
- let self = this
|
|
|
- this.isRotate = false
|
|
|
- this.rotateObj && this.rotateObj.close();
|
|
|
- this.isDraw = !this.isDraw
|
|
|
- if (this.isDraw) {
|
|
|
- this.drugObj = new Drug(canvas, ctx, img);
|
|
|
- this.drugObj.open();
|
|
|
- } else {
|
|
|
- this.drugObj.close();
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * canvas 原生拖拽
|
|
|
- **/
|
|
|
- function Drug(canvas, ctx, img) {
|
|
|
- //这里禁用底图拖拽
|
|
|
- self.setMapDragPan(false)
|
|
|
- let oldX, oldY, allMoveX = 0,
|
|
|
- allMoveY = 0;
|
|
|
- canvas.draggable = false; //禁用原生拖拽
|
|
|
- let onmousedown = function(evt) {
|
|
|
- oldX = evt.x;
|
|
|
- oldY = evt.y;
|
|
|
- document.addEventListener("mousemove", onmousemove);
|
|
|
- }
|
|
|
- let onmousemove = function(evt) {
|
|
|
- if (!isNaN(oldX - evt.x)) {
|
|
|
- ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
- allMoveX = allMoveX + evt.x - oldX;
|
|
|
- allMoveY = allMoveY + evt.y - oldY;
|
|
|
- ctx.translate(evt.x - oldX, evt.y - oldY);
|
|
|
- self.drawImage(canvas, ctx, img);
|
|
|
- oldX = evt.x;
|
|
|
- oldY = evt.y;
|
|
|
- imageCanvas.refresh();
|
|
|
- }
|
|
|
- }
|
|
|
- let onmouseup = function(evt) {
|
|
|
- document.removeEventListener("mousemove", onmousemove);
|
|
|
- }
|
|
|
- this.open = function() {
|
|
|
- document.addEventListener("mousedown", onmousedown);
|
|
|
- document.addEventListener("mousemove", onmousemove);
|
|
|
- document.addEventListener("mouseup", onmouseup);
|
|
|
- }
|
|
|
- this.close = function() {
|
|
|
- document.removeEventListener("mousedown", onmousedown);
|
|
|
- document.removeEventListener("mousemove", onmousemove);
|
|
|
- document.removeEventListener("mouseup", onmouseup);
|
|
|
- self.setMapDragPan(true) //打开底图拖拽
|
|
|
- }
|
|
|
- this.getMoveXY = function() {
|
|
|
- this.moveX = allMoveX;
|
|
|
- this.moveY = allMoveY;
|
|
|
- return [this.moveX, this.moveY]
|
|
|
- }
|
|
|
-
|
|
|
- return this;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- onRotate() {
|
|
|
- let self = this
|
|
|
- this.isDraw = false
|
|
|
- this.drugObj && this.drugObj.close();
|
|
|
- this.isRotate = !this.isRotate
|
|
|
-
|
|
|
- if (this.isRotate) {
|
|
|
- this.rotateObj = new Rotate(canvas, ctx, img);
|
|
|
- this.rotateObj.open();
|
|
|
- } else {
|
|
|
- this.rotateObj.close();
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
|
|
|
- /**
|
|
|
- * canvas 原生旋转
|
|
|
- **/
|
|
|
- function Rotate(canvas, ctx, img) {
|
|
|
- //这里禁用底图拖拽
|
|
|
- self.setMapDragPan(false)
|
|
|
- let oldX, oldY, angle = 0,
|
|
|
- angleAll = 0;
|
|
|
- canvas.draggable = false; //禁用原生拖拽
|
|
|
- let onmousedown = function(evt) {
|
|
|
- oldX = evt.x;
|
|
|
- oldY = evt.y;
|
|
|
- document.addEventListener("mousemove", onmousemove);
|
|
|
- }
|
|
|
- let onmousemove = function(evt) {
|
|
|
- if (!isNaN(oldX - evt.x)) {
|
|
|
- ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
- let tana = (oldY - evt.y) / (evt.x - oldX);
|
|
|
- angle = 0.02 * Math.atan(tana);
|
|
|
- angleAll = angleAll + angle;
|
|
|
- ctx.translate(128, 128);
|
|
|
- ctx.rotate(angle);
|
|
|
- ctx.translate(-128, -128);
|
|
|
- self.drawImage(canvas, ctx, img)
|
|
|
- imageCanvas.refresh();
|
|
|
- }
|
|
|
- }
|
|
|
- let onmouseup = function(evt) {
|
|
|
- document.removeEventListener("mousemove", onmousemove);
|
|
|
- }
|
|
|
- this.open = function() {
|
|
|
- document.addEventListener("mousedown", onmousedown);
|
|
|
- document.addEventListener("mousemove", onmousemove);
|
|
|
- document.addEventListener("mouseup", onmouseup);
|
|
|
- }
|
|
|
- this.close = function() {
|
|
|
- document.removeEventListener("mousedown", onmousedown);
|
|
|
- document.removeEventListener("mousemove", onmousemove);
|
|
|
- document.removeEventListener("mouseup", onmouseup);
|
|
|
- self.setMapDragPan(true) //打开底图拖拽
|
|
|
- }
|
|
|
- this.getAngle = function() {
|
|
|
- this.angle = angleAll
|
|
|
- return this.angle;
|
|
|
- }
|
|
|
- return this;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- onSave() {
|
|
|
- let lon = document.getElementById("lon").value;
|
|
|
- let lat = document.getElementById("lat").value;
|
|
|
- let direction = document.getElementById("direction").value;
|
|
|
- let size = document.getElementById("size").value;
|
|
|
- this.save(+lon, +lat, +direction, +size, this.drugObj, this.rotateObj)
|
|
|
- },
|
|
|
-
|
|
|
- showSmallMap(lon, lat, direction, imageUrl) {
|
|
|
- let canvasOption = {};
|
|
|
- let isFirst = true;
|
|
|
- canvasOption.canvasFunction = (extent, resolution, pixelRatio, size, projection) => {
|
|
|
- if (isFirst) {
|
|
|
- isFirst = false;
|
|
|
- canvas = document.createElement('canvas');
|
|
|
- canvas.width = size[0];
|
|
|
- canvas.height = size[1];
|
|
|
- //Canvas四至范围不同于当前地图四至范围，计算出南北方向与东西方向的偏移
|
|
|
- let mapExtent = this.map.getView().calculateExtent(this.map
|
|
|
- .getSize()); //当前底图视图范围的投影坐标
|
|
|
- let canvasOrigin = this.map.getPixelFromCoordinate([extent[0], extent[
|
|
|
- 3]]); //添加到地图上的canvas图像的左上角
|
|
|
- let mapOrigin = this.map.getPixelFromCoordinate([mapExtent[0], mapExtent[3]]);
|
|
|
- let delta = [mapOrigin[0] - canvasOrigin[0], mapOrigin[1] - canvasOrigin[1]];
|
|
|
- let leftTop = this.map.getPixelFromCoordinate(ol.proj.fromLonLat([lon, lat]));
|
|
|
- //canvas原生加载图片
|
|
|
- ctx = canvas.getContext('2d');
|
|
|
- img = new Image();
|
|
|
- img.src = imageUrl;
|
|
|
- img.onload = () => {
|
|
|
- ctx.translate(leftTop[0] + delta[0], leftTop[1] + delta[1])
|
|
|
- ctx.translate(128, 128)
|
|
|
- ctx.rotate(direction * (Math.PI / 180))
|
|
|
- ctx.translate(-128, -128)
|
|
|
- this.drawImage(canvas, ctx, img)
|
|
|
- }
|
|
|
- return canvas;
|
|
|
- }
|
|
|
- }
|
|
|
- imageCanvas = new ol.source.ImageCanvas(canvasOption);
|
|
|
- imageCanvasLayer = new ol.layer.Image({
|
|
|
- source: imageCanvas
|
|
|
- });
|
|
|
- this.map.addLayer(imageCanvasLayer);
|
|
|
- this.map.getView().setCenter(ol.proj.fromLonLat([lon, lat]));
|
|
|
- this.map.getView().setZoom(19)
|
|
|
- },
|
|
|
-
|
|
|
- save(lon, lat, direction, size, drugObj, rotateObj) {
|
|
|
- let saveLonLat, saveAngle;
|
|
|
- if (drugObj) {
|
|
|
- let moveXY = drugObj.getMoveXY();
|
|
|
- let leftTop = this.map.getPixelFromCoordinate(ol.proj.fromLonLat([lon, lat]));
|
|
|
- let pixelX = moveXY[0] + leftTop[0];
|
|
|
- let pixelY = moveXY[1] + leftTop[1];
|
|
|
- saveLonLat = this.map.getCoordinateFromPixel([pixelX, pixelY]);
|
|
|
- saveLonLat = ol.proj.toLonLat(saveLonLat);
|
|
|
-
|
|
|
- } else {
|
|
|
- saveLonLat = [lon, lat]
|
|
|
- }
|
|
|
- if (rotateObj) {
|
|
|
- saveAngle = rotateObj.getAngle() * 180 / Math.PI + Number(direction);
|
|
|
-
|
|
|
- } else {
|
|
|
- saveAngle = direction
|
|
|
- }
|
|
|
- let save = {
|
|
|
- lonlat: saveLonLat,
|
|
|
- angle: saveAngle,
|
|
|
- size: size
|
|
|
- }
|
|
|
- console.log(save) //保存到数据库去
|
|
|
-
|
|
|
-
|
|
|
- let location = saveLonLat;
|
|
|
- if (location.length == 2) {
|
|
|
- location.push(0)
|
|
|
- }
|
|
|
- let formData = new FormData()
|
|
|
- formData.append('file', this.file)
|
|
|
- formData.append('location', location)
|
|
|
- formData.append('orientation', saveAngle)
|
|
|
- // formData.append('sceneCode', this.sceneNum)
|
|
|
- // formData.append('sceneCode', 't810')
|
|
|
- axios.post('indoor/' + this.sceneNum + '/api/map/upload', formData)
|
|
|
- // axios.post('http://192.168.0.135:9294/indoor/t810/api/map/upload', formData)
|
|
|
- .then(function(response) {
|
|
|
- alert('成功')
|
|
|
- })
|
|
|
- .catch(function(error) {
|
|
|
- alert('失败')
|
|
|
- });
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- drawImage(canvas, ctx, img) {
|
|
|
- ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
- ctx.drawImage(img, 0, 0); //canvas 从左上角开始绘制
|
|
|
- },
|
|
|
-
|
|
|
- setMapDragPan(bool) {
|
|
|
- this.map.getInteractions().forEach(function(element, index, array) {
|
|
|
- if (element instanceof ol.interaction.DragPan)
|
|
|
- element.setActive(bool);
|
|
|
- });
|
|
|
- }
|
|
|
|
|
|
}
|
|
|
})
|
