Openlayers之视图联动

来源：互联网发布：星空抽奖软件编辑：程序博客网时间：2024/05/21 11:28

1、视图联动

视图联动是指两个以上的地图实现地图联动操作，当我们操作其中的一个视图的地图的时候，其他视图的地图也会跟着同步响应变更，视图联动的主要目的是在不同的视口中加载不同类型的地图数据，方便同步观察。

2、代码实现

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <script src="../lib/ol/ol.js"></script>    <link href="../css/ol.css" rel="stylesheet" />    <style type="text/css">        body,html,div{            border:none;padding:0;margin:0;            font-size:14px;            font-family:"微软雅黑";        }        #menu{            width:100%;            height:20px;                     padding:5px 10px;            left:10px;            }        .container{            float:left;            width:32%;            height:850px;            margin:0 5px;        }                .map{            float:left;            width:100%;            height:100%;            border:1px dashed red;        }    </style>    <script type="text/javascript">        window.onload = function () {            //初始化矢量图层            var vector = new ol.layer.Vector({                source: new ol.source.Vector({                    url: '../data/geojson/countries-110m.json',                    format: new ol.format.GeoJSON()                })            });            //以Canvas渲染方式初始化地图            var cavasMap = new ol.Map({                layers: [                    new ol.layer.Tile({                        source:new ol.source.OSM()                    })                ],                target: 'canvasMap',                view: new ol.View({                    center: [0, 0],                    zoom:4                })            });            //以Dom渲染方式初始化地图            var domMap = new ol.Map({                layers: [                    vector                ],                renderer:'dom',                target: 'domMap',                view: cavasMap.getView()            });            //以WebGL渲染方式初始化地图            //如果当前浏览器支持WebGL渲染方式，则使用WebGL渲染            //否则改变no-webgl这个div标签的样式，显示浏览器不支持的信息            if (ol.has.WEBGL) {                var webglMap = new ol.Map({                    layers: [                        new ol.layer.Tile({                            source:new ol.source.OSM()                        })                    ],                    renderer: 'webgl',                    target: 'webglMap',                    view: cavasMap.getView()                });            } else {                var info = document.getElementById('no-webgl');                info.style.display = '';            }        };    </script></head><body>    <div class="container">        <label>Canvas</label>        <div id="canvasMap" class="map"></div>    </div>    <div class="container">        <label>Dom</label>        <div id="domMap" class="map"></div>    </div>    <div class="container">        <label>WebGL</label>        <div id="webglMap" class="map">            <div id="no-webgl" class="alert alert-error" style="display:none">                亲！你的浏览器不支持WebGL哦，赶紧升级吧~            </div>        </div>    </div></body></html>

3、结果展示

初始化地图显示

当我们平移缩放任意一个视口中的地图的时候，其他两个视口中的地图也会跟着移动

0 0