4dkankan
/
laser_v1


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
							<!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">Wgs84坐标:</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">Wgs84坐标:</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>
            </div>

        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/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: [],
                }
            },
            created() {

            },
            mounted() {
                // document.getElementById("location1").addEventListener("click", location1);
                // document.getElementById("location2").addEventListener("click", location2);
                // // document.getElementById("clear").addEventListener("click", clearMap);

                // function location1() {
                //     let alon = document.getElementById("alon").value;
                //     let alat = document.getElementById("alat").value;
                //     addPoint(+alon, +alat, "锚点1")
                // }

                // function location2() {
                //     let blon = document.getElementById("blon").value;
                //     let blat = document.getElementById("blat").value;
                //     addPoint(+blon, +blat, "锚点2")
                // }


                // let pointLayerArray = [];
                // let map = initMap('map');

                // function initMap(divid) {
                //     let 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: [gaodeMapLayer],
                //         target: divid,
                //         view: new ol.View({
                //             center: ol.proj.fromLonLat([113.59569403794666,
                //                 22.36656052911783
                //             ]), //最初定位的位置
                //             zoom: 4 //地图层级
                //         })
                //     });

                // }

                // function addPoint(lon, lat, text) {

                //     let vector = new ol.source.Vector();
                //     let vLayer = new ol.layer.Vector({
                //         source: vector
                //     })
                //     vLayer.type = "con_point";
                //     map.addLayer(vLayer)
                //     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"
                //             })
                //         })
                //     }))
                //     map.getView().setCenter(labelCoords)
                // }

                // function clearMap() {
                //     pointLayerArray.map(each => {
                //         if (each.type == "con_point") {
                //             map.removeLayer(each)
                //         }
                //     });
                //     pointLayerArray = [];
                // }


                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 => {
                        alert(1)
                        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/api/controlPoint/save', {
                            ageControlLocation1: this.ageControlLocation1,
                            ageControlLocation2: this.ageControlLocation2,
                            gpsControlCoordinate1: this.gpsControlCoordinate1,
                            gpsControlCoordinate2: this.gpsControlCoordinate2,
                            id: 1
                        })
                        .then(function (response) {
                            alert('成功')
                        })
                        .catch(function (error) {
                            alert('失败')
                        });
                }

            }
        })
    </script>
</body>

</html>