feat:提交上传地图

locat/addDataSet.html

@@ -161,7 +161,31 @@
                 </div>
             </div>
             <div class="rightBox">
-                <div id="map" class="map"></div>
+                <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>
 
         </div>
@@ -199,19 +223,46 @@
                     ageControlLocation2: [],
                     gpsControlCoordinate1: [],
                     gpsControlCoordinate2: [],
-                    sceneNum:'',
+                    sceneNum: '',
+                    canvas: null,
+                    ctx: null,
+                    imageCanvas: null,
+                    imageCanvasLayer: null,
+                    img: null,
+                    drugObj: null,
+                    rotateObj: null,
+                    imgSrc: null,
+                    file: null,
+                    isRotate: false,
+                    isDraw: false,
+                    size: 512,
+                    limitSize: 512,
+                    uploadData: {
+                        file: null,
+                        lon: '113.59963069739054',
+                        lat: '22.364821730960752',
+                        direction: '0',
+                        size: '256'
+                    }
+
                 }
             },
             created() {
 
             },
             mounted() {
-               
 
+                this.sceneNum = window.location.pathname.split('/')[2]
 
 
                 this.map = this.initMap('map');
 
+
+
+
+
+
+
             },
             methods: {
                 initMap(divid) {
@@ -308,9 +359,9 @@
                     this.gpsControlCoordinate2.push(this.blat - 0)
                     this.gpsControlCoordinate2.push(this.balt - 0)
 
-                    this.sceneNum = window.location.pathname.split('/')[2]
+
                 },
-                
+
                 commit() {
 
                     this.handleData()
@@ -319,7 +370,7 @@
                             ageControlLocation2: this.ageControlLocation2,
                             gpsControlCoordinate1: this.gpsControlCoordinate1,
                             gpsControlCoordinate2: this.gpsControlCoordinate2,
-                            sceneNum:this.sceneNum,
+                            sceneNum: this.sceneNum,
                             // id: 1
                         })
                         .then(function (response) {
@@ -328,6 +379,276 @@
                         .catch(function (error) {
                             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 {
+
+                                self.file = file
+                                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);
+                    });
                 }
 
             }

locat/style.css

@@ -34,6 +34,7 @@ body {
     width: 94%;
     padding: 0px;
     margin: 0px;
+    position: relative;
 
 }
 
@@ -270,4 +271,12 @@ input::-webkit-input-placeholder {
     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;
 }