243 lines
7.4 KiB
Markdown
243 lines
7.4 KiB
Markdown
---
|
||
title: Openlayers卷帘
|
||
date: 2020-12-25
|
||
author: ac
|
||
sidebar: false
|
||
tags:
|
||
- Openlayers
|
||
categories:
|
||
- GIS
|
||
---
|
||
|
||
## Openlayers卷帘
|
||
|
||
|
||
|
||
“卷帘”功能可以分为两部分：
|
||
|
||
1. 控件元素的拖动。
|
||
2. 地图图层渲染流程的控制，对上层图层进行裁剪。
|
||
|
||
首先我们需要一个DOM组件作为拖动的“卷帘”，将其放在`map`容器内部，避免影响页面其他要素。
|
||
|
||
```html
|
||
<div id="map" class="map">
|
||
<div id="swipeContainer">
|
||
<div id="swipeDiv">
|
||
<div class="handle"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
在设置样式时，将map元素设为相对定位，则其内部的子元素的绝对定位将参考map元素的位置，即“卷帘”的拖动位置将参考map元素进行。根据“卷帘”组件拖动的位置，利用地图渲染相关的事件，对图层进行处理实现卷帘效果。
|
||
|
||
### 地图渲染
|
||
|
||
地图渲染相关的事件：
|
||
|
||
- `precompose`：未渲染，layers或layer被渲染前触发
|
||
- `postcompose`：layer图层渲染后触发，可以在事件源中获取用于渲染图层的上下文context，也可以得到canvas元素。图层的渲染其实就是将从数据源中请求得到的矢量数据，通过计算转换绘制在content上下文中或将请求得到的图片嵌入到上下文中相应的位置
|
||
- `postrender`：map被渲染完成后触发
|
||
|
||
当初始化`map`实例时，会先触发`map`的`precompose`事件，再依次触发`layers`集合中每个图层的`precompose`事件和`postcompose`事件，在所有layer都渲染完成后，才会触发`map`的`postrender `事件。
|
||
|
||
### 实现原理
|
||
|
||
卷帘实现原理：在客户端监听上层图层的`postcompose`事件，获取渲染的上下文content，对其进行裁剪，让下层图层数据可见。
|
||
|
||
```html
|
||
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<link rel="stylesheet" href="css/ol.css" type="text/css">
|
||
<style>
|
||
.map {
|
||
height: 400px;
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
#swipeContainer {
|
||
position: absolute;
|
||
opacity: 0.8;
|
||
width: 0.625rem;
|
||
height: 100%;
|
||
/* margin: 0 auto; */
|
||
top: 0;
|
||
left: 50%;
|
||
background-color: rgba(50, 50, 50, 0.75);
|
||
cursor: col-resize;
|
||
z-index: 2;
|
||
}
|
||
|
||
#swipeContainer:hover {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
#swipeDiv {
|
||
border: solid 0.5px #ffffff;
|
||
height: 100%;
|
||
width: 0px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
#swipeDiv .handle {
|
||
width: 51px;
|
||
height: 24px;
|
||
margin-top: -12px;
|
||
margin-left: -20px;
|
||
top: 50%;
|
||
left: 0;
|
||
position: absolute;
|
||
z-index: 30;
|
||
font-family: "CalciteWebCoreIcons";
|
||
speak: none;
|
||
font-size: 12px;
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
font-variant: normal;
|
||
text-transform: none;
|
||
text-indent: 0;
|
||
line-height: 1;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
background-color: black;
|
||
color: white;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
*,
|
||
*:before,
|
||
*:after {
|
||
-moz-box-sizing: border-box;
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.handle:before {
|
||
margin: 0 18px 0 5px;
|
||
content: "\0399\0399\0399";
|
||
width: 20px;
|
||
height: 24px;
|
||
line-height: 2;
|
||
}
|
||
|
||
.handle:after {
|
||
content: "\0399\0399\0399";
|
||
width: 20px;
|
||
height: 24px;
|
||
line-height: 2;
|
||
}
|
||
</style>
|
||
<script src="lib/ol.js"></script>
|
||
<title>卷帘</title>
|
||
</head>
|
||
<body>
|
||
<h2>卷帘（裁剪图层)</h2>
|
||
<div id="map" class="map">
|
||
<div id="swipeContainer">
|
||
<div id="swipeDiv">
|
||
<div class="handle"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
|
||
window.onload = function () {
|
||
var map = initMap();
|
||
initSwipeDom(map);
|
||
swipeLayer(map);
|
||
}
|
||
function initMap() {
|
||
var bingKey = 'AmosL5A0GtVryl4sXNZm6U5EQMD6brAd5E8AJPGJf8AUU1saDYXDkb5CwQFijans';
|
||
var roadLayer = new ol.layer.Tile({
|
||
id:'road',
|
||
source: new ol.source.BingMaps({key: bingKey, imagerySet: 'Road'}),
|
||
name: "Bing道路图层"
|
||
});
|
||
var imageLayer = new ol.layer.Tile({
|
||
id:'aerial',
|
||
source: new ol.source.BingMaps({key: bingKey, imagerySet: 'Aerial'}),
|
||
name: "Bing影像图层"
|
||
});
|
||
var map = new ol.Map({
|
||
view: new ol.View({
|
||
center: [12614553, 2648165],
|
||
zoom: 12,
|
||
minzoom: 6,
|
||
maxzoom: 15,
|
||
}),
|
||
layers: [
|
||
roadLayer,
|
||
imageLayer
|
||
],
|
||
target: "map"
|
||
});
|
||
return map;
|
||
}
|
||
|
||
function initSwipeDom(map) {
|
||
var swipe = document.getElementById("swipeContainer");
|
||
var obj = {};
|
||
swipe.onmousedown = function(event) {
|
||
var e = event || window.event; //兼容IE浏览器
|
||
// 鼠标点击元素那一刻相对于元素左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
|
||
obj.diffX = e.clientX - this.offsetLeft;
|
||
document.onmousemove = function(event) {
|
||
var e = event || window.event;
|
||
var moveX = e.clientX - obj.diffX;
|
||
if (moveX < 0) {
|
||
moveX = 0
|
||
} else if (moveX > window.innerWidth - swipe.offsetWidth) {
|
||
moveX = window.innerWidth - swipe.offsetWidth
|
||
}
|
||
swipe.style.left = moveX + 'px';
|
||
|
||
//重新渲染图层
|
||
map.render();
|
||
};
|
||
document.onmouseup = function() {
|
||
this.onmousemove = null;
|
||
this.onmouseup = null;
|
||
}
|
||
};
|
||
}
|
||
function swipeLayer(map) {
|
||
var layers = map.getLayers();
|
||
var topLayer = layers.item(layers.getLength() - 1);
|
||
topLayer.on('precompose', function(event) {
|
||
var swipe = document.getElementById("swipeContainer");
|
||
var ctx = event.context;
|
||
//计算图层在canvas画布上需要显示的范围
|
||
var mapSize = map.getSize();
|
||
var height = event.context.canvas.height;
|
||
var width = event.context.canvas.width;
|
||
var swipeWidth = swipe.offsetLeft*width/mapSize[0];
|
||
var tl = [swipeWidth,0];
|
||
var tr = [width,0];
|
||
var bl = [swipeWidth,height];
|
||
var br = [width,height];
|
||
|
||
ctx.save();
|
||
//绘制裁剪路径
|
||
ctx.beginPath();
|
||
ctx.moveTo(tl[0], tl[1]);
|
||
ctx.lineTo(bl[0], bl[1]);
|
||
ctx.lineTo(br[0], br[1]);
|
||
ctx.lineTo(tr[0], tr[1]);
|
||
ctx.closePath();
|
||
//裁剪，裁剪路径以外的部分不会绘制在canvas上
|
||
ctx.clip();
|
||
});
|
||
topLayer.on('postcompose', function(event) {
|
||
var ctx = event.context;
|
||
ctx.restore();
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|