本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。
源码 见 1086.html ，对应的 官网示例
image.png
image.png
核心技术点：
放大2倍之后，将方形的图像保存在ImageData：dest里面，然后针对每一个像素进行放大和平移
原来的一个像素，变成新的4个像素
<!DOCTYPE html>
<html>
<head>
<title>放大镜</title>
<link rel="stylesheet" href="../include/ol.css" type="text/css" />
<script src="../include/ol.js"></script>
</head>
<style></style>
<body>
<div id="map" class="map"></div>
<script>
var key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
var imagery = new ol.layer.Tile({
/* source: new ol.source.BingMaps({
key: key,
imagerySet: 'Aerial',
crossOrigin: "anonymous"
}) */
source: new ol.source.OSM()
});
var container = document.getElementById('map');
var map = new ol.Map({
layers: [imagery],
target: container,
view: new ol.View({
center: ol.proj.fromLonLat([-109, 46.5]),
zoom: 6
})
});
var radius = 75;
document.addEventListener('keydown', function (evt) {
if (evt.which === 38) {
radius = Math.min(radius + 5, 150);
map.render();
evt.preventDefault();
} else if (evt.which === 40) {
radius = Math.max(radius - 5, 25);
map.render();
evt.preventDefault();
}
});
var mousePosition = null;
container.addEventListener('mousemove', function (event) {
mousePosition = map.getEventPixel(event);
map.render();
});
container.addEventListener('mouseout', function () {
mousePosition = null;
map.render();
});
// 根据鼠标位置计算圆形区域，
imagery.on('postcompose', function (event) {
if (mousePosition) {
var context = event.context;
var pixelRatio = event.frameState.pixelRatio;
var half = radius * pixelRatio;
var centerX = mousePosition[0] * pixelRatio;
var centerY = mousePosition[1] * pixelRatio;
var originX = centerX - half;
var originY = centerY - half;
var size = 2 * half + 1;
//关键：放大算法
//放大2倍之后，将方形的图像保存在ImageData：dest里面，然后针对每一个像素进行放大和平移
var sourceData = context.getImageData(originX, originY, size, size).data;
var dest = context.createImageData(size, size);
var destData = dest.data;
for (var j = 0; j < size; ++j) {
for (var i = 0; i < size; ++i) {
var dI = i - half;
var dJ = j - half;
var dist = Math.sqrt(dI * dI + dJ * dJ);
var sourceI = i;
var sourceJ = j;
if (dist < half) {
sourceI = Math.round(half + dI / 2);
sourceJ = Math.round(half + dJ / 2);
}
var destOffset = (j * size + i) * 4;
var sourceOffset = (sourceJ * size + sourceI) * 4;
destData[destOffset] = sourceData[sourceOffset];
destData[destOffset + 1] = sourceData[sourceOffset + 1];
destData[destOffset + 2] = sourceData[sourceOffset + 2];
destData[destOffset + 3] = sourceData[sourceOffset + 3];
}
}
context.beginPath();
context.arc(centerX, centerY, half, 0, 2 * Math.PI);
context.lineWidth = 3 * pixelRatio;
context.strokeStyle = 'rgba(255,255,255,0.5)';
context.putImageData(dest, originX, originY);
context.stroke();
context.restore();
}
});
</script>
</body>
</html>
网友评论