4dkankan
/
laser_v1


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415
							<!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">地理坐标:</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">地理坐标:</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 坐标系 </p>
                        <div class="formItem">
                            <div class="allIpt">
                                <input type="text" v-model="EPSG" name="EPSG" id="EPSG" />
                            </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 class="submitBtn" @click="commit()">
                        提交
                    </div>

                </div>
            </div>
            <div class="rightBox">
                <div class="map-layer">
                    <div id="map" class="map"></div>
                    <image-tranform :map-ol="map" v-if="map" ref="imageTranform" />
                </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="./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");
        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 {

                    pointLayerArray: [],
                    map: null,
                    gaodeMapLayer: {},
                    ax: '',
                    ay: '',
                    az: '',
                    alon: '120',
                    alat: '22',
                    aalt: '0',
                    bx: '',
                    by: '',
                    bz: '',
                    blon: '123',
                    blat: '22',
                    balt: '0',
                    EPSG: 'EPSG:99999',
                    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'
                    }

                }
            },
            created() {

            },
            mounted() {

                this.sceneNum = window.location.pathname.split('/')[2]


                this.map = this.initMap('map');

                console.log(this.map)


            },
            methods: {
                getImageTransform() {
                    // 地图数据上传  如果用户没有选择数据直接返回true  如果有数据要上传返回promise
                    this.$refs.imageTranform.uploadData()
                        .then(res => {
                            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) {

                    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:99999');
                    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 = []
                    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)


                },

                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(() => {
                        alert('成功')
                    })

                },


            }
        })
    </script>
</body>

</html>