|
|
@@ -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>
|
xushiting
