vue+openlayers6实现双屏对比

1.思路

主要是对openlayers的理解，实现双屏对比，首先要创建两个map,要使其当前显示范围一致，其实就是view一致，因此使用同一个view即可实现

2.关键代码

<template>
    <div class="mapContainer">
        <div>
            <div style="left: 0px" class="mapDiv">
                <div id="map"></div>
                <layerManage v-show="showManage" :tree_data="tree_data" :defaultProps="defaultProps" :map="this.map"></layerManage>
            </div>
            <div style="right: 0px" class="mapDiv">
                <div id="map1"></div>
                <layerManage v-show="showManage" :tree_data="tree_data" :defaultProps="defaultProps" :map="this.map1"></layerManage>
            </div>
        </div>

    </div>
</template>

<script>
    import "ol/ol.css";
    import { Map, View } from "ol";
    import {Tile as TileLayer} from 'ol/layer'
    import {XYZ} from 'ol/source'
    import * as api from './../../../api/index'
    import layerManage from './layerManage'
    export default {
        name: "DoubleScreen",
        components: {layerManage},
        data(){
            return{
                map:null,
                map1:null,
                baseLayers:[],
                customLayers:[],
                tree_data: [{
                    layerName: '基础底图',
                    children: []
                }, {
                    layerName: '业务图层',
                    children: []
                },
                    {
                        layerName: '实体',
                        children: []
                    }
                ],

                defaultProps: {
                    children: 'children',
                    label: 'layerName'
                },
            }

        },
        methods:{
            toggleManage(){
                this.showManage=!this.showManage
            }
        },
        created(){
            //加载基础图层
            api.getBaseLayerList().then(data=>{
                if(data.resp_code=='10000'){
                    this.baseLayers=data.data;
                    this.tree_data[0].children=this.baseLayers
                    this.map = new Map({
                        target: "map",
                        layers: [
                            new TileLayer({
                                source:new XYZ({
                                    url:this.baseLayers[1].url
                                }),
                            }),
                        ],
                        view: view
                    });
                    this.map1 = new Map({
                        target: "map1",
                        layers: [
                            new TileLayer({
                                source:new XYZ({
                                    url:this.baseLayers[2].url
                                }),
                            }),
                        ],
                        view:view
                    });
                }
            })
            //加载图层列表
            api.getLayerList({size:100}).then(data=>{
                if(data.resp_code=='10000'){
                    this.customLayers=data.data.records;
                    this.tree_data[1].children=this.customLayers
                }
            })
            let view=new View({
            projection: "EPSG:4326", //使用这个坐标系
            center: [108.9389705658,34.3752497164], //西安
            zoom: 12
            })

        },
        props:{
            showManage:{
                type:Boolean
            }
        }
    }
</script>

<style scoped>
    .mapContainer {
        width:100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        /*background-color:red; */
    }
    #map{
        width: 100%;
        height: 100%;
    }
    #map1{
        width: 100%;
        height: 100%;
    }
    .layerBtn{
        position: absolute;
        top:5%;
        right: 1%;
        z-index: 999;
        width: 100px;
        height: 30px;
        background-color: aqua;
        border: solid aqua 1px;
        color: white
    }
    .mapDiv{
        position: absolute;
        background-color: white;
        width: 50%;
        height: 100%;
        border: solid red 2px
    }
</style>