Home Explore Help
Register Sign In
4dkankan
/
laser_v1
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge branch 'master' of http://192.168.0.115:3000/4dkankan/laser_v1

xushiting 4 years ago
parent
2274836faf 3f6cd146de
commit
8a1b987430
5 changed files with 697 additions and 0 deletions
Split View Show Diff Stats
  1. 419 0
      locat/addDataSet.html
  2. BIN
      locat/img/local.png
  3. 2 0
      locat/ol.css
  4. 3 0
      locat/ol.js
  5. 273 0
      locat/style.css

+ 419 - 0
locat/addDataSet.html
View File 

@@ -0,0 +1,419 @@
 
+<!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>

BIN
locat/img/local.png
View File


File diff suppressed because it is too large
+ 2 - 0
locat/ol.css


File diff suppressed because it is too large
+ 3 - 0
locat/ol.js


+ 273 - 0
locat/style.css
View File 

@@ -0,0 +1,273 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+
 
+html,
 
+body {
 
+    width: 100vw;
 
+    height: 100vh;
 
+    overflow: hidden;
 
+}
 
+
 
+.content {
 
+    width: 100vw;
 
+    height: 100vh;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    overflow-y: hidden;
 
+    background: #141414;
 
+
 
+}
 
+
 
+.rightBox {
 
+    height: 100%;
 
+    width: 70%;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+
 
+.map {
 
+    height: 800px;
 
+    width: 94%;
 
+    padding: 0px;
 
+    margin: 0px;
 
+
 
+}
 
+
 
+#plane {
 
+    width: 30%;
 
+    height: 100%;
 
+    /* position: absolute; */
 
+    /* top: 10px;
 
+    left: 10px; */
 
+    background-color: rgb(0, 0, 0, 0.3);
 
+    color: #fff;
 
+    border-right: 1px solid rgba(255, 255, 255, .2);
 
+    position: relative;
 
+
 
+
 
+}
 
+
 
+.scrollBox {
 
+    width: 100%;
 
+    height: 100%;
 
+    overflow-y: scroll;
 
+    box-sizing: border-box;
 
+    padding: 30px 30px 80px 30px;
 
+}
 
+
 
+/* ::-webkit-scrollbar-track {
 
+    background-color: #000;
 
+    -webkit-border-radius: 1em;
 
+    -moz-border-radius: 1em;
 
+    border-radius: 1em;
 
+}
 
+
 
+::-webkit-scrollbar-thumb {
 
+    background-color: rgba(255, 255, 255, .2);
 
+    -webkit-border-radius: 1em;
 
+    -moz-border-radius: 1em;
 
+    border-radius: 1em;
 
+} */
 
+::-webkit-scrollbar {
 
+    width: 4px;
 
+    height: 1px;
 
+}
 
+
 
+
 
+::-webkit-scrollbar-thumb {
 
+    border-radius: 4px;
 
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
 
+    /* background: #ccc; */
 
+    background: rgba(255, 255, 255, .2);
 
+}
 
+
 
+::-webkit-scrollbar-thumb:hover {
 
+    background: #999;
 
+}
 
+
 
+
 
+::-webkit-scrollbar-track {
 
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
 
+    border-radius: 4px;
 
+    background: #000000;
 
+}
 
+
 
+.ol-overlaycontainer-stopevent {
 
+    display: none;
 
+}
 
+
 
+#plane .title {
 
+    font-size: 20px;
 
+    color: #fff;
 
+    margin-bottom: 10px;
 
+}
 
+
 
+#plane .desc {
 
+    font-size: 14px;
 
+    color: rgba(255, 255, 255, 0.6);
 
+    margin-bottom: 10px;
 
+}
 
+
 
+form .formTitle {
 
+    font-size: 16px;
 
+    color: #fff;
 
+}
 
+
 
+.itemTitle {
 
+    font-size: 14px;
 
+    color: #fff;
 
+    margin-bottom: 10px;
 
+}
 
+
 
+.inputItem {
 
+    width: 100%;
 
+    height: 34px;
 
+    border-radius: 4px;
 
+    border: 1px solid rgba(255, 255, 255, 0.4);
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+    box-sizing: border-box;
 
+    padding: 0 10px 0 0;
 
+    margin-bottom: 10px;
 
+}
 
+
 
+.inputItem .name {
 
+    width: 23%;
 
+    height: 34px;
 
+    border-right: 1px solid rgba(255, 255, 255, 0.4);
 
+    box-sizing: border-box;
 
+    text-align: center;
 
+    line-height: 34px;
 
+    font-size: 14px;
 
+    color: rgba(255, 255, 255, 0.4);
 
+    background: rgba(255, 255, 255, 0.1)
 
+}
 
+
 
+.inputItem .ipt {
 
+    width: 77%;
 
+    height: 34px;
 
+    background: transparent;
 
+}
 
+
 
+.inputItem .ipt input {
 
+    width: 100%;
 
+    height: 100%;
 
+    /* padding: 0 30px; */
 
+    box-sizing: border-box;
 
+    background: transparent;
 
+    border: none;
 
+    outline: none;
 
+    color: #15BEC8;
 
+    text-align: right;
 
+}
 
+
 
+input::placeholder {
 
+    color: rgba(255, 255, 255, 0.4);
 
+}
 
+
 
+input::-moz-placeholder {
 
+    color: rgba(255, 255, 255, 0.4);
 
+}
 
+
 
+input::-webkit-input-placeholder {
 
+    color: rgba(255, 255, 255, 0.4);
 
+}
 
+
 
+.inputItem .unit {
 
+    font-size: 14px;
 
+    color: rgba(255, 255, 255, 0.4);
 
+    margin-left: 5px;
 
+}
 
+
 
+.allIpt {
 
+    width: 100%;
 
+    height: 34px;
 
+    border-radius: 4px;
 
+    border: 1px solid rgba(255, 255, 255, 0.4);
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+    box-sizing: border-box;
 
+    padding: 0 10px;
 
+    background: rgba(255, 255, 255, 0.1)
 
+}
 
+
 
+.allIpt input {
 
+    width: 100%;
 
+    height: 100%;
 
+    /* padding: 0 30px; */
 
+    box-sizing: border-box;
 
+    background: transparent;
 
+    border: none;
 
+    outline: none;
 
+    color: rgba(255, 255, 255, 0.6);
 
+
 
+}
 
+
 
+.bottom {
 
+    position: absolute;
 
+    bottom: 0;
 
+    left: 0;
 
+    width: 100%;
 
+    height: 63px;
 
+    background: #141414;
 
+    z-index: 1;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: flex-end;
 
+    padding: 0 20px;
 
+    box-sizing: border-box;
 
+}
 
+
 
+.style {
 
+    width: 100%;
 
+    height: 10px;
 
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
 
+    position: absolute;
 
+    top: -10px;
 
+    left: 0;
 
+}
 
+
 
+.submitBtn {
 
+    width: 100px;
 
+    height: 34px;
 
+    background: #15BEC8;
 
+    border-radius: 4px;
 
+    color: #fff;
 
+    text-align: center;
 
+    line-height: 34px;
 
+    font-size: 14px;
 
+    margin-left: 10px;
 
+    cursor: pointer;
 
+}
 
+
 
+#clear {
 
+    width: 100px;
 
+    height: 34px;
 
+    border-radius: 4px;
 
+    border: 1px solid #15BEC8;
 
+    color: #15BEC8;
 
+    text-align: center;
 
+    line-height: 34px;
 
+    font-size: 14px;
 
+    cursor: pointer;
 
+}
 
+.tag{
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+    margin-bottom: 20px;
 
+    margin-top: 30px;
 
+}
 
+.localIcon{
 
+    width: 16px;
 
+    height: 16px;
 
+    background: url("img/local.png")no-repeat;
 
+    background-size: 100% 100%;
 
+    cursor: pointer;
 
+}