4dkankan
/
laser_v1


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610
							<!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="!isEdit">
                    <!-- <div class="title">定位</div> -->
                    <p class="desc">通过两个控制点坐标确定点云在地图上的位置</p>
                    <div class="editBtn" @click="openEdit">修改控制点</div>
                    <p v-if="status!=1" style="color: #999;margin: 10px 0 ; ">提示： 当前场景地理位置为默认坐标，请点击左侧【控制点 - 修改控制点】输入真实的控制点坐标
                    </p>
                    <div class="main_item">
                        <p class="main_item_title">控制点1</p>
                        <div class="dataBox">
                            <p>本地坐标</p>
                            <div>
                                <span>X：{{showData.ax}}</span><br/>
                                <span>Y：{{showData.ay}}</span><br/>
                                <!-- <span>Z：{{showData.az}}</span><br/> -->
                            </div>

                            <p>地理坐标</p>
                            <div>
                                <span>经度：{{showData.alon}}</span><br/>
                                <span>纬度：{{showData.alat}}</span><br/>
                                <!-- <span>高程：{{showData.aalt}}</span><br/> -->
                            </div>
                        </div>
                    </div>
                    <div class="main_item">
                        <p class="main_item_title">控制点2</p>
                        <div class="dataBox">
                            <p>本地坐标</p>
                            <div>
                                <span>X：{{showData.bx}}</span><br/>
                                <span>Y：{{showData.by}}</span><br/>
                                <!-- <span>Z：{{showData.bz}}</span><br/> -->
                            </div>

                            <p>地理坐标</p>
                            <div>
                                <span>经度：{{showData.blon}}</span><br/>
                                <span>纬度：{{showData.blat}}</span><br/>
                                <!-- <span>高程：{{showData.balt}}</span><br/> -->
                            </div>
                        </div>
                    </div>

                    <!-- <div class="main_item">
                        <div class="Setting">
                            <div class="msgBox">
                                <p class="title">
                                    地理坐标</p>
                                <p class="desc">确定点云在世界地图上的位置</p>
                            </div>
                            <div class="btnton" @click="isEdit = true">
                                修改
                            </div>
                        </div>
                    </div> -->
                    <!-- <div class="main_item" v-if="false">
                        <div class="Setting">
                            <div class="msgBox">
                                <p class="title">
                                    平面图</p>
                                <p class="desc">添加建筑物平面图，方便预览</p>
                            </div>
                            <div class="btnton" @click="readyUpload">
                                上传
                            </div>
                        </div>
                        <div class="mapList">
                            <div class="mapItem">
                                <div class="fileName">
                                    思维展厅.PNG
                                </div>
                                <div class="fileBtn">

                                    <div class="fileBtnicon fileHide" @click="showImageTranform1 = !showImageTranform1"></div>
                                    <div class="fileBtnicon fileSave" @click="getImageTransform"></div>
                                    <div class="fileBtnicon fileSave" @click="getImageTiled"></div>
                                    <div class="fileBtnicon fileDel"></div>

                                </div>
                            </div>
                        </div>
                    </div> -->


                </div>
                <div v-if="isEdit" class="scrollBox">
                    <!-- <button id="location1">定位1</button>
                    <button id="location2">定位2</button> -->
                    <!-- <p class="title">定位</p> -->
                    <!-- <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 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="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" 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>


                    </form>
                </div>

                <div v-if="isEdit" 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="isEdit=false">取消</div>
                    <div class="submitBtn" @click="commit()">
                        保存
                    </div>

                </div>
            </div>

        </div>
    </div>

    <script src="./js/vue.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 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,
                    isEdit: false,
                    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: [],
                    control_point_data: {
                        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: ''
                    }

                }
            },
            created() {

            },
            mounted() {
                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/' + this.sceneNum + '/api/controlPoint/save', {
                            ageControlLocation1: this.ageControlLocation1,
                            ageControlLocation2: this.ageControlLocation2,
                            gpsControlCoordinate1: this.gpsControlCoordinate1,
                            gpsControlCoordinate2: this.gpsControlCoordinate2,
                            sceneNum: this.sceneNum,
                            // id: 1
                        })
                        .catch(function(error) {
                            alert('数据集位置上传失败')
                        }),

                        // this.getImageTransform()
                        // .catch(_ => {
                        //     alert('地图数据上传失败')
                        // })
                    ]).then(() => {
                        this.getContorlPoint()
                        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/${sceneCode}/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.isEdit = true
                    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
                }


            }
        })
    </script>
</body>

</html>