dzhh-frontend/.svn/pristine/f0/f0956b0cc84257b6909b43c302412ddcc5344240.svn-base

<template>
    <div style="position: relative; display: flex">
        <a-button size="large" @click="handleSplit" v-if="!model" v-show="false" class="splitScreen">分屏</a-button>
        <div id="map" ref="map" :style="{'height':height}" class="map">
            <div class="mapSwitcher">
                <div id="vecMap" class="mapType vecMap" :class="{ active: vecActive }" @click="vecMapClick">
                    <div class="lblImgType">地图</div>
                </div>
                <div id="imgMap" class="mapType imgMap" :class="{ active: imgActive }" @click="imgMapClick">
                    <div class="lblImgType">影像</div>
                </div>
            </div>
            <toolbar ref="toolbar" :tools="tools" v-if="toolbar"></toolbar>
            <div class="legendPanel" v-show="legendImg">
                <img :src="legendImg"/>
            </div>
            <locate-by-geoinfo ref="locateByGeoinfo"></locate-by-geoinfo>
        </div>
        <div id="map2" ref="map2" :style="{'height':height}" class="map" v-if="twoMap">
            <div class="mapSwitcher">
                <div id="vecMap2" class="mapType vecMap" :class="{ active: vecActive2 }" @click="vecMapClick2">
                    <div class="lblImgType">地图</div>
                </div>
                <div id="imgMap2" class="mapType imgMap" :class="{ active: imgActive2 }" @click="imgMapClick2">
                    <div class="lblImgType">影像</div>
                </div>
            </div>
            <toolbar ref="toolbar2" :tools="['isRes']" v-if="toolbar" :splitScreen="true"></toolbar>
            <div class="legendPanel" v-show="legendImg">
                <img :src="legendImg"/>
            </div>
            <locate-by-geoinfo ref="locateByGeoinfo"></locate-by-geoinfo>
        </div>
    </div>
</template>

<script>
import {Map, View} from "ol";
import 'ol/ol.css';
import {get as getProjection, Projection, addProjection} from 'ol/proj';
import {defaults, ZoomToExtent, FullScreen, ScaleLine, MousePosition} from 'ol/control'
import {DragPan, MouseWheelZoom, DragRotate, defaults as defaultsInteraction, DragBox} from 'ol/interaction'
import {createStringXY} from 'ol/coordinate';
import proj4 from 'proj4';
// 加载图层
import * as baseLayerFn from '@/utils/oneMap/baseLayer.js';
import * as bussLayerFn from '@/utils/oneMap/bussLayer';

//组件
import Toolbar from '@/components/BasicMap/Tools/Toolbar.vue';
import {getAction} from "../../api/manage";
import LocateByGeoinfo from "./Tools/LocateByGeoinfo";
import {platformModifierKeyOnly} from "ol/events/condition";

export default {
    name: 'basicMap',
    components: {
        Toolbar,
        LocateByGeoinfo
    },
    created() {
        proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
        let projection2000 = new Projection({
            code: "EPSG:4490",
            worldExtent: [-180, -90, 180, 90],
            extent: [-180, -90, 180, 90],
            units: "degrees",
            axisOrientation: "neu"
        })
        addProjection(projection2000);
        if (this.list.length === 0) {
            this.loadList();
        }
    },
    data() {
        return {
            map: {},
            map2: {},
            vecActive: true,
            imgActive: false,
            vecActive2: true,
            imgActive2: false,
            list: [],
            list2: [],
            toolbarShow: false,
            geoinfo: '',
            twoMap: false
        };
    },
    props: {
        legendImg: {
            type: String
        },
        //标绘传出。
        value: {},
        drawType: {},
        queryUrl: {},
        layersUrl: {
            require: true
        },
        model: {},
        toolbar: {
            type: Boolean,
            default: false
        },
        tools: {
            type: Array,
            default: function () {
                return []
            }
        },
        height: {
            type: String,
            default() {
                let calcHeight = window.document.documentElement.clientHeight - 222;
                let m_height = calcHeight.toString() + 'px';
                return m_height;
            }
        },
        center: {
            type: Array,
            default: function () {
                return [116.689, 37.238]
            }
        },
        extent: {
            type: Array,
            default: function () {
                return [115.75550079345703, 36.407955169677734, 117.60053253173828, 38.01062774658203]
            }
        },
        projection: {
            type: String,
            default: "EPSG:4490"
        },
        zoom: {
            type: Number,
            default: 9.3
        }
    },
    provide() {
        return {
            baseMap: this,
        }
    },
    watch: {
        geoinfo: function () {
            this.$emit('input', this.geoinfo)
        }
    },
    methods: {
        handleSplit() {
            this.twoMap = !this.twoMap;
            setTimeout(() => {
                undefined
                this.map.updateSize();
                this.map2.updateSize();
            }, 100);
        },
        async loadList() {
            let {result, success, message} = await getAction(this.layersUrl);
            if (success) {
                this.list = result;
                this.ininMap();
            } else {
                this.$message.error(message);
            }
        },
        ininMap() {
            /*const zoomExtent = new ZoomToExtent({
              extent: this.extent
            });
            let mousePositionControl = new MousePosition({
              coordinateFormat: createStringXY(6),
              projection: 'EPSG:4490',
              // target: this.$refs.mousePosition,
            });*/
            let view = new View({
                projection: this.projection,
                center: this.center,
                zoom: this.zoom,
                maxZoom: 18
            })
            this.map = new Map({
                target: "map",
                view: view,
                controls: defaults().extend([new ScaleLine(), new ZoomToExtent({extent: this.extent}), new MousePosition({coordinateFormat: createStringXY(6)}), new FullScreen()]),
                interactions: defaultsInteraction().extend([
                    new DragPan(),
                    new MouseWheelZoom()
                ])
            });
            // 加载图层
            baseLayerFn.loadBaseLayer(this.map);
            this.getTreeExpandKeys(this.list, this.map);
            /*this.map2 = new Map({
              target: "map2",
              view: view,
              controls: defaults().extend([new ScaleLine(), new ZoomToExtent({extent: this.extent}), new MousePosition({coordinateFormat: createStringXY(6)}), new FullScreen()]),
              interactions: defaultsInteraction().extend([
                new DragPan(),
                new MouseWheelZoom()
              ])
            });
            // 加载图层
            baseLayerFn.loadBaseLayer(this.map2);
            this.getTreeExpandKeys(this.list, this.map2);
            this.list2=this.list.slice(0);*/

            if (this.toolbar) {
                this.$refs.toolbar.initPopup();
            }
            if (this.model) {
                this.$refs.locateByGeoinfo.locate(this.model, this.map);
            }
            let myThis = this;
            window.onresize = () => {
                myThis.mapResize();
            }
        },
        locateByCoords(model) {
            this.$refs.locateByGeoinfo.locate(model, this.map);
        },
        // 递归查找
        getTreeExpandKeys(obj, map) {
            // obj是传入的array
            if (obj && obj.length !== 0) {
                obj.forEach((item, index) => {
                    if (item.visible) {
                        bussLayerFn.loadBussLayer(map, item.url, item.name, item.alias, item.sourceName,
                            item.zIndex,
                            item.visible);
                        // console.log(item);
                    }
                    // 如果此列表有children, 进行递归
                    if (item.layers) {
                        // console.log(index)
                        this.getTreeExpandKeys(item.layers, map)
                    }
                })
            }
        },
        vecMapClick() {
            baseLayerFn.vecMapClick(this.map.getTarget());
            this.vecActive = true;
            this.imgActive = false;
        },
        imgMapClick() {
            baseLayerFn.imgMapClick(this.map.getTarget());
            this.vecActive = false;
            this.imgActive = true;
        },
        vecMapClick2() {
            baseLayerFn.vecMapClick(this.map2.getTarget());
            this.vecActive2 = true;
            this.imgActive2 = false;
        },
        imgMapClick2() {
            baseLayerFn.imgMapClick(this.map2.getTarget());
            this.vecActive2 = false;
            this.imgActive2 = true;
        },
        mapResize() {
            this.map.updateSize();
        }
    }
};
</script>

<style>

.toolBar .ant-card {
    cursor: auto;
}

.toolBar .ant-card .ant-card-bordered {
    border: 0.1px solid #e8e8e8;
}

.toolBar .ant-card .ant-card-head {
    background-color: rgba(24, 129, 253, 0.8);
    color: #FFFFFF;
    cursor: move;
}

.toolBar .ant-card .ant-card-head-title, .ant-card .ant-card-extra {
    padding: 12px 0;
}

.toolBar .ant-card-head .ant-card-head-wrapper {
    align-items: unset;
}

.toolBar .resCatalog .ant-card-body {
    padding: 0;
}

.toolBar .resCatalog .ant-collapse > .ant-collapse-item-active > .ant-collapse-header {
    color: #0c8fcf;
}

.resCatalog .ant-collapse .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    margin-left: 15px;
}

.resCatalog .ant-collapse-content > .ant-collapse-content-box {
    padding: 0px;
}

.popup {
    opacity: 0.95;
    color: #000;
    font-weight: bold !important;
    transform: translate(-50%, -99%);
}

.popup .ant-descriptions-bordered .ant-descriptions-row {
    border-bottom: 1px solid #e8e8e8;
    /* width: 220px; */
    display: flex;
    align-items: center;

}

.popup .ant-descriptions-bordered .ant-descriptions-item-label,
.popup .ant-descriptions-bordered .ant-descriptions-item-content {
    padding: 6px 6px;
    border-right: 1px solid #e8e8e8;
    display: inline-block;

    /* font-size: 13px; */
}

.popup .ant-descriptions-row > th,
.popup .ant-descriptions-row > td {
    padding-bottom: 0px;
}

.popup .ant-descriptions-bordered .ant-descriptions-item-label {
    color: rgb(24, 129, 253);
    width: 33%;
    text-align: end;
    flex-shrink: 0
}

.popup .ant-descriptions-bordered .ant-descriptions-item-label,
.popup .ant-descriptions-bordered .ant-descriptions-item-content {
    padding: 6px 6px;
}

.popup .ant-descriptions-bordered td.ant-descriptions-item-content {
    width: 100%;
}

.popup .ant-popover-inner-content {
    /* padding-top: 0; */
}

.splitScreen {
    position: absolute;
    top: 0.8em;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 2;
    box-shadow: 0 0 5px #357ee5;
    opacity: 0.9;
}

.ol-mouse-position {
    /* margin-left: -50%; */
    top: auto;
    right: auto;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    color: rgba(24, 129, 253, 0.8);
    font-weight: bold;
    min-width: 180px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    vertical-align: middle;
    z-index: 1;
    font-size: 1em;

}

.ol-rotate {
    top: 2.5em;
}

.map {
    width: 100%;
    height: 500px;
    position: relative;
}

.res-list {
    width: 200px;
    position: absolute;
    top: 100px;
    left: 500px;
}

.mapSwitcher {
    border-radius: 3px;
    width: 164px;
    height: 84px;
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
    background-color: #ffffff;
    box-shadow: 0 0 5px #357ee5;
    z-index: 2;
    padding: 2px;
    margin: 0;
}

.mapType {
    border: 2px solid #fff;
    top: 4px;
    cursor: pointer;
    position: absolute;
    width: 76px;
    height: 76px;
}

.mapType.active {
    border: 2px solid #409eff;
}

.vecMap {
    background-image: url("../../assets/maptype.jpg");
    background-position: 0 0;
    right: 4px;
}

.imgMap {
    background-image: url("../../assets/maptype.jpg");
    background-position: 0 -228px;
    left: 4px;
}

.lblImgType {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 35px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    background-color: rgba(0, 121, 210, .5);
    color: #fff;
    text-align: center;
}

.mousePosition {
    position: absolute;
    min-width: 180px;
    height: 24px;
    line-height: 24px;
    bottom: 1em;
    left: calc(50% - 85px);
    text-align: center;
    vertical-align: middle;
    z-index: 1;
    font-weight: bold;
    color: rgba(24, 129, 253, 0.8);
    font-size: 1em;
}

.ol-control button {
    background-color: rgba(24, 129, 253, 0.6);
}

.ol-control button:focus,
.ol-control button:hover {
    text-decoration: none;
    background-color: rgba(24, 129, 253, .8)
}

.ol-scale-line {
    background-color: rgba(24, 129, 253, 0.6);
}

.legendPanel {
    display: block;
    position: absolute;
    left: 0.5em;
    bottom: 3em;
    z-index: 1;
}
</style>