4dkankan
/
laser_v1


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635
							<!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 class="rightBox">
                <div class="map-layer">
                    <div id="map" class="map"></div>
                    <image-tranform :map-ol="map" v-if="map && showImageTranform" v-show="showImageTranform1" ref="imageTranform" />
                </div>

            </div> -->
            <div id="plane">

                <div class="main" v-if="showType==0">
                    <!-- <div class="title">定位</div> -->
                    <p class="desc">提示：当前控制点坐标为系统提供的默认值，请将控制点坐标调整为真实的地理坐标。</p>
                    <div class="editBtn" @click="openEdit">修改控制点</div>


                    <div class="editBtn pointClound" @click="showType=2">
                        添加数据集
                    </div>

                    <div class="editBtn pointClound" @click="showType=3">
                        平面图
                    </div>


                </div>
                <div class="control_box" v-if="showType==1">
                    <div class="headerBack">
                        <div class="topBox">
                            <i class="backIcon" @click="showType=0"></i>
                            <p class="headerTitle">修改控制点</p>
                        </div>
                        <p style="padding-left: 32px;" class="desc">通过两个控制点坐标确定点云在地图上的位置</p>
                    </div>
                    <div class="scrollBox">

                        <!-- <h4>修改控制点 </h4>
                        <p class="desc">通过两个控制点坐标确定点云在地图上的位置</p> -->
                        <p class="itemTitle">EPSG 坐标系 </p>
                        <div class="formItem">
                            <div class="allIpt">
                                <input type="text" disabled v-model="EPSG" name="EPSG" id="EPSG" />
                            </div>

                        </div>
                        <form>
                            <div class="tag">
                                <P class="formTitle">控制点1</P>
                                <!-- <div class="localIcon" @click="set_location(1)"></div> -->
                            </div>
                            <div class="formItem">
                                <p class="itemTitle">本地坐标:</p>
                                <div class="inputItem">
                                    <div class="name"> X</div>
                                    <div class="ipt">
                                        <input @input="limtInput('ax')" 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 @input="limtInput('ay')" type="text" v-model="ay" name="ay" id="ay" />
                                    </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" @input="limtInput('alon')" v-model="alon" name="alon" id="alon" value="120" />
                                    </div>
                                </div>
                                <div class="inputItem">
                                    <div class="name">纬度</div>
                                    <div class="ipt">
                                        <input type="text" @input="limtInput('alat')" v-model="alat" name="alat" id="alat" value="22" />
                                    </div>
                                </div>


                            </div>

                            <div class="tag">
                                <P class="formTitle">控制点2</P>
                                <!-- <div class="localIcon" @click="set_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" @input="limtInput('bx')" 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" @input="limtInput('by')" 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" @input="limtInput('blon')" v-model="blon" name="blon" id="blon" value="123" />
                                    </div>
                                </div>
                                <div class="inputItem">
                                    <div class="name">纬度</div>
                                    <div class="ipt">
                                        <input type="text" @input="limtInput('blat')" 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>


                        </form>
                    </div>

                    <div 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="showType=0">取消</div>
                        <div class="submitBtn" @click="commit()">
                            保存
                        </div>

                    </div>
                </div>


                <upload-pointClound v-if="showType==2" />
                <div id="planePic" v-if="showType==3">
                    <div class="headerBack">
                        <div class="topBox">
                            <i class="backIcon" @click="showType =0"></i>
                            <p class="headerTitle">平面图</p>
                        </div>
                    </div>
                    <div class="defaultPic itemBox active">
                        <div class="ctrlBox">
                            <p class="ctrlTitle">默认平面图</p>
                            <div class="ctrlBtn">
                                <i class="ctrlIcon refreshIcon"></i>
                                <p class="ctrlText">更新</p>
                                <div class="tipBox" title="修改点云或数据集后，请更新平面图"></div>

                            </div>
                        </div>

                    </div>
                    <div class="diyPic itemBox ">
                        <div class="ctrlBox">

                            <p class="ctrlTitle">自定义平面图</p>
                            <div class="btnBox">
                                <div class="ctrlBtn">
                                    <i class="ctrlIcon disableIcon "></i>
                                    <p class="ctrlText">删除</p>

                                </div>
                                <div class="ctrlBtn">
                                    <i class="ctrlIcon downloadIcon"></i>
                                    <p class="ctrlText">下载</p>

                                </div>
                                <div class="ctrlBtn">
                                    <i class="ctrlIcon uploadIcon"></i>
                                    <p class="ctrlText">上传</p>

                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="tipText">
                        操作说明<br/> 1. 下载默认平面图，支持.png文件下载；<br /> 2. 解压下载的压缩包，替换压缩包中的图片文件；<br /> （文件名，图片大小、格式需与原图保持一致）
                        <br /> 3. 上传平面图<br />
                    </div>
                </div>
            </div>

        </div>


    </div>

    <script src="./js/vue.js"></script>
    <script src="./js/element.js"></script>

    <script src="./js/axios.min.js"></script>

    <!-- <script src="./js/proj4.js"></script>
    <script src="./js/three.js"></script> -->
    <!-- <script src="./components/image-transform/index.js"></script> -->
    <script src="./components/upload-pointClound/index.js"></script>
    <script type="text/javascript">
        //输入经纬度就可以定位
    </script>

    <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");
        // proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
        // var projection = new ol.proj.Projection({
        //     code: "EPSG:99999",
        //     extent: [334238.8538694997, 425861.702215328, 599418.034383447, 5936877.5664797],
        //     units: 'm',
        //     axisOrientation: 'neu',
        //     global: false
        // });
        // //结合proj4在ol中自定义坐标系
        // ol.proj.addProjection(projection);
        // ol.proj.addCoordinateTransforms("EPSG:4326", "EPSG:99999",
        //     function(coordinate) {
        //         return proj4("EPSG:4326", "EPSG:99999", coordinate);
        //     },
        //     function(coordinate) {
        //         return proj4("EPSG:99999", "EPSG:4326", coordinate);
        //     }
        // );

        new Vue({
            el: '#app',

            data() {
                return {
                    status: 0,
                    showImageTranform: true,
                    showImageTranform1: true,
                    showType: 0,
                    pointLayerArray: [],
                    map: null,
                    gaodeMapLayer: {},
                    ax: '',
                    ay: '',
                    az: '',
                    alon: '120',
                    alat: '22',
                    aalt: '',
                    bx: '',
                    by: '',
                    bz: '',
                    blon: '123',
                    blat: '22',
                    balt: '',
                    EPSG: 'EPSG:4490',
                    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'
                    },
                    // 优化
                    showData: {
                        ax: '',
                        ay: '',
                        az: '',
                        alon: '120',
                        alat: '22',
                        aalt: '',
                        bx: '',
                        by: '',
                        bz: '',
                        blon: '123',
                        blat: '22',
                        balt: ''
                    },
                    token: null

                }
            },
            created() {

            },

            mounted() {
                const origin = window.location.origin + window.location.pathname
                const tokenKry = 'ls.' + origin + '#JWT'
                this.token = localStorage.getItem(tokenKry)
                    // alert(sceneNum)
                this.getContorlPoint()
                    // this.sceneNum = window.location.pathname.split('/')[2]
                    // this.$nextTick(() => {
                    //     let t = setTimeout(() => {
                    //         this.map = this.initMap('map');
                    //     }, 100)
                    // })


            },
            methods: {
                readyUpload() {
                    // console.log(this.$refs.imageTranform)
                    this.$refs.imageTranform.readyUpload()
                },
                getImageTransform() {

                    // 地图数据上传  如果用户没有选择数据直接返回true  如果有数据要上传返回promise
                    Promise.all([
                            this.$refs.imageTranform.uploadData(),
                            this.$refs.imageTranform.uploadTiled()
                        ])
                        .then(res => {
                            alert('成功')
                            this.showImageTranform = false
                            this.$nextTick(() => {
                                this.showImageTranform = true
                            })
                        })
                        .catch(() => {
                            alert('失败')
                        })

                },
                getImageTiled() {
                    this.$refs.imageTranform.uploadTiled()
                        .then(() => alert('成功'))
                        .catch(() => {
                            alert('失败')
                        })
                },
                initMap(divid) {
                    this.pointLayerArray = [];
                    this.gaodeMapLayer = new ol.layer.Tile({
                        source: new ol.source.XYZ({
                            url: 'http://wprd03.is.autonavi.com/appmaptile?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, 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: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)
                },
                set_location(index) {
                    let alon
                    let alat
                    let str = ''
                    if (index == 1) {
                        alon = this.alon;
                        alat = this.alat;
                        str = '锚点1'
                    } else {
                        alon = this.blon;
                        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/' + sceneNum + '/api/controlPoint/save', {
                            ageControlLocation1: this.ageControlLocation1,
                            ageControlLocation2: this.ageControlLocation2,
                            gpsControlCoordinate1: this.gpsControlCoordinate1,
                            gpsControlCoordinate2: this.gpsControlCoordinate2,
                            sceneNum: sceneNum,
                            // id: 1
                        })
                        .catch(function(error) {
                            this.$message({
                                message: '控制点上传失败',
                                type: 'error',
                                duration: 2000,
                            });
                        }),

                        // this.getImageTransform()
                        // .catch(_ => {
                        //     alert('地图数据上传失败')
                        // })
                    ]).then(() => {
                        this.getContorlPoint()
                        this.$message({
                            message: '控制点上传成功',
                            type: 'success',
                            duration: 2000,
                        });
                        // alert('控制点上传成功')
                    })

                },
                handleData() {
                    //重置数组
                    this.ageControlLocation1 = []
                    this.ageControlLocation2 = []
                    this.gpsControlCoordinate1 = []
                    this.gpsControlCoordinate2 = []
                        //
                    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)


                },
                //获取控制点
                getContorlPoint() {
                    // /indoor/{sceneCode}/api/controlPoint/detail

                    // const sceneName = window.location.pathname.split('/')[2]
                    // const isDev = !sceneName || sceneName === 'addDataSet.html'

                    // const sceneCode = isDev ? 't-kJ2PEjZ' : sceneName
                    axios.get(`/indoor/${sceneNum}/api/controlPoint/detail`).then(res => {
                        this.status = res.data.data.status
                        this.initContorlPoint(res.data.data)
                        this.set_location(1)
                        this.set_location(2)
                    }).catch(err => {

                    })
                },
                initContorlPoint(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]

                    this.showData.ax = data.ageControlLocation1[0]
                    this.showData.ay = data.ageControlLocation1[1]
                    this.showData.bx = data.ageControlLocation2[0]
                    this.showData.by = data.ageControlLocation2[1]
                    this.showData.alon = data.gpsControlCoordinate1[0]
                    this.showData.alat = data.gpsControlCoordinate1[1]
                    this.showData.blon = data.gpsControlCoordinate2[0]
                    this.showData.blat = data.gpsControlCoordinate2[1]

                },
                openEdit() {
                    this.showType = 1
                    this.ax = this.showData.ax
                    this.ay = this.showData.ay
                    this.bx = this.showData.bx
                    this.by = this.showData.by
                    this.alon = this.showData.alon
                    this.alat = this.showData.alat
                    this.blon = this.showData.blon
                    this.blat = this.showData.blat
                },
                showLoading(str) {
                    $('body').append(' <div id="upload-loading"><img class="icon" src="../img/icon/loading.png" alt=""><span class="text">' + str + '</span></div>');
                },
                hideLoading() {
                    $('#upload-loading').remove()
                },

                limtInput(value) {
                    this[value] = this[value].replace(/[^\-?\d.]/g, '')
                },
                moveEnd(e) {
                    let obj = e.currentTarget
                    obj.focus();
                    var len = obj.value.length;
                    if (document.selection) {
                        var sel = obj.createTextRange();
                        sel.moveStart('character', len);
                        sel.collapse();
                        sel.select();
                    } else if (typeof obj.selectionStart == 'number' &&
                        typeof obj.selectionEnd == 'number') {
                        obj.selectionStart = obj.selectionEnd = len;
                    }
                },


            }
        })
    </script>
</body>

</html>