4dkankan
/
laser_v1


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664
							<!doctype html>
<html lang="en">

<head>
    <link rel="stylesheet" href="./ol.css" type="text/css">
    <link rel="stylesheet" href="./style.css" type="text/css">

    <script src="./ol.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }

        #editor {
            height: 200px;
        }
    </style>
    <!-- <script src="./ol.js"></script> -->
    <title>控制点定位</title>
</head>

<body>
    <div id="app" v-cloak>
        <div class="content">
            <div id="plane">
                <div class="scrollBox">
                    <!-- <button id="location1">定位1</button>
                    <button id="location2">定位2</button> -->
                    <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>
                        <div class="formItem">
                            <p class="itemTitle">本地坐标:</p>
                            <div class="inputItem">
                                <div class="name"> X</div>
                                <div class="ipt">
                                    <input type="text" v-model="ax" name="ax" id="ax" />
                                </div>
                                <span class="unit">m</span>
                            </div>
                            <div class="inputItem">
                                <div class="name"> Y</div>
                                <div class="ipt">
                                    <input type="text" v-model="ay" name="ay" id="ay" />
                                </div>
                                <span class="unit">m</span>
                            </div>

                            <div class="inputItem">
                                <div class="name"> Z</div>
                                <div class="ipt">
                                    <input type="text" v-model="az" name="az" id="az" />
                                </div>
                                <span class="unit">m</span>
                            </div>
                        </div>
                        <div class="formItem">
                            <p class="itemTitle">地理坐标:</p>
                            <div class="inputItem">
                                <div class="name">经度</div>
                                <div class="ipt">
                                    <input type="text" v-model="alon" name="alon" id="alon" value="120" />
                                </div>
                            </div>
                            <div class="inputItem">
                                <div class="name">纬度</div>
                                <div class="ipt">
                                    <input type="text" v-model="alat" name="alat" id="alat" value="22" />
                                </div>
                            </div>
                            <div class="inputItem">
                                <div class="name">高程</div>
                                <div class="ipt">
                                    <input type="text" v-model="aalt" name="aalt" id="aalt" value="0" />
                                </div>
                            </div>


                        </div>

                        <div class="tag">
                            <P class="formTitle">锚点2</P>
                            <div class="localIcon" @click="location(2)"></div>
                        </div>
                        <div class="formItem">
                            <p class="itemTitle">本地坐标:</p>
                            <div class="inputItem">
                                <div class="name"> X</div>
                                <div class="ipt">
                                    <input type="text" v-model="bx" name="bx" id="bx" />
                                </div>
                                <span class="unit">m</span>
                            </div>
                            <div class="inputItem">
                                <div class="name"> Y</div>
                                <div class="ipt">
                                    <input type="text" v-model="by" name="by" id="by" />
                                </div>
                                <span class="unit">m</span>
                            </div>
                            <div class="inputItem">
                                <div class="name"> Z</div>
                                <div class="ipt">
                                    <input type="text" v-model="bz" name="bz" id="bz" />
                                </div>
                                <span class="unit">m</span>
                            </div>


                        </div>

                        <div class="formItem">
                            <p class="itemTitle">地理坐标:</p>
                            <div class="inputItem">
                                <div class="name">经度</div>
                                <div class="ipt">
                                    <input type="text" v-model="blon" name="blon" id="blon" value="123" />
                                </div>
                            </div>
                            <div class="inputItem">
                                <div class="name">纬度</div>
                                <div class="ipt">
                                    <input type="text" v-model="blat" name="blat" id="blat" value="22" />
                                </div>
                            </div>
                            <div class="inputItem">
                                <div class="name">高程</div>
                                <div class="ipt">
                                    <input type="text" v-model="balt" name="balt" id="balt" value="0" />
                                </div>
                            </div>
                        </div>

                        <p class="itemTitle">EPSG 坐标系 4326</p>
                        <div class="formItem">
                            <div class="allIpt">
                                <input type="text" v-model="EPSG" name="EPSG" id="EPSG" value="EPSG:4326" />
                            </div>

                        </div>


                    </form>
                </div>

                <div class="bottom">
                    <div class="style"></div>
                    <!-- <input type="submit" class="submitBtn" value="提交" />
                    <button id="clear">取消</button> -->
                    <div id="clear" @click="clearMap">取消</div>
                    <div class="submitBtn" @click="commit()">
                        提交
                    </div>

                </div>
            </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>

        </div>
    </div>

    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script type="text/javascript">
        //输入经纬度就可以定位
    </script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {

                    pointLayerArray: [],
                    map: {},
                    gaodeMapLayer: {},
                    ax: '',
                    ay: '',
                    az: '',
                    alon: '120',
                    alat: '22',
                    aalt: '0',
                    bx: '',
                    by: '',
                    bz: '',
                    blon: '123',
                    blat: '22',
                    balt: '0',
                    EPSG: 'EPSG:4326',
                    ageControlLocation1: [],
                    ageControlLocation2: [],
                    gpsControlCoordinate1: [],
                    gpsControlCoordinate2: [],
                    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) {
                    this.pointLayerArray = [];
                    this.gaodeMapLayer = new ol.layer.Tile({
                        source: new ol.source.XYZ({
                            url: 'http://wprd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}' //高德地图切片访问路径
                        })
                    });

                    return new ol.Map({
                        layers: [this.gaodeMapLayer],
                        target: divid,
                        view: new ol.View({
                            center: ol.proj.fromLonLat([113.59569403794666,
                                22.36656052911783
                            ]), //最初定位的位置
                            zoom: 4 //地图层级
                        })
                    });

                },
                clearMap() {
                    this.pointLayerArray.map(each => {
                        if (each.type == "con_point") {
                            this.map.removeLayer(each)
                        }
                    });
                    this.pointLayerArray = [];
                },
                addPoint(lon, lat, text) {

                    let vector = new ol.source.Vector();
                    let vLayer = new ol.layer.Vector({
                        source: vector
                    })
                    vLayer.type = "con_point";
                    this.map.addLayer(vLayer)
                    this.pointLayerArray.push(vLayer);
                    let labelCoords = ol.proj.transform([lon, lat], "EPSG:4326", "EPSG:3857");
                    let feature = new ol.Feature({
                        geometry: new ol.geom.Point(labelCoords)
                    });
                    vector.addFeature(feature);
                    vLayer.setStyle(new ol.style.Style({
                        image: new ol.style.Circle({ //点样式
                            radius: 7,
                            fill: new ol.style.Fill({
                                color: '#00c033'
                            })
                        }),
                        text: new ol.style.Text({
                            text: text,
                            font: '15px sans-serif',
                            offsetX: 5,
                            offsetY: -10,
                            fill: new ol.style.Fill({
                                color: "#b9391f"
                            }),
                            stroke: new ol.style.Stroke({
                                color: "#b9391f"
                            })
                        })
                    }))
                    this.map.getView().setCenter(labelCoords)
                },
                location(type) {
                    let alon
                    let alat
                    let str = ''
                    if (type == 1) {
                        alon = this.alon;
                        alat = this.alat;
                        str = '锚点1'
                    } else {
                        alon = this.blon;
                        alat = this.blat;
                        str = '锚点2'
                    }

                    this.addPoint(+alon, +alat, str)
                },
                handleData() {
                    this.ageControlLocation1.push(this.ax - 0)
                    this.ageControlLocation1.push(this.ay - 0)
                    this.ageControlLocation1.push(this.az - 0)
                    this.gpsControlCoordinate1.push(this.alon - 0)
                    this.gpsControlCoordinate1.push(this.alat - 0)
                    this.gpsControlCoordinate1.push(this.aalt - 0)
                    this.ageControlLocation2.push(this.bx - 0)
                    this.ageControlLocation2.push(this.by - 0)
                    this.ageControlLocation2.push(this.bz - 0)
                    this.gpsControlCoordinate2.push(this.blon - 0)
                    this.gpsControlCoordinate2.push(this.blat - 0)
                    this.gpsControlCoordinate2.push(this.balt - 0)


                },

                commit() {

                    this.handleData()
                    axios.post('/indoor/test3/api/controlPoint/save', {
                            ageControlLocation1: this.ageControlLocation1,
                            ageControlLocation2: this.ageControlLocation2,
                            gpsControlCoordinate1: this.gpsControlCoordinate1,
                            gpsControlCoordinate2: this.gpsControlCoordinate2,
                            sceneNum: this.sceneNum,
                            // id: 1
                        })
                        .then(function (response) {
                            alert('成功')
                        })
                        .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 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);
                    });
                }

            }
        })
    </script>
</body>

</html>