openlayers 6 图层望远镜功能的实现

最新推荐文章于 2024-12-19 16:36:24 发布

就爱安逸啊

最新推荐文章于 2024-12-19 16:36:24 发布

阅读量355

点赞数

CC 4.0 BY-SA版权

文章标签： html linq webview

本文链接：https://blog.youkuaiyun.com/Webgisera/article/details/124889883

效果图如上：//本文参考webgis书籍

代码如下：//请注意看最后的注释

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图层探查</title>
<link rel="stylesheet" href="../v6.14.1/css/ol.css" />
<script src="../v6.14.1/build/ol.js"></script>
   <style type="text/css">
       #map{
           width: 100%;
           height: 1500px;
       }
   </style>
</head>
<body>
<div id="map">

</div>
<script>
// Bing地图的key
var key = '可以去Bingmaps官网申请';

var roads = new ol.layer.Tile({ // Bing路网地图
source: new ol.source.BingMaps({
key: key,
imagerySet: 'Road'
})
});

var imagery = new ol.layer.Tile({ // Bing影像地图
source: new ol.source.BingMaps({
key: key,
imagerySet: 'Aerial'
})
});

var container = document.getElementById('map');

var map = new ol.Map({
target: container,
layers: [
roads,
imagery
],
view: new ol.View({
center: ol.proj.fromLonLat([-109, 46.5]),
zoom: 6
}),
   controls:new ol.control.defaults().extend([
       new ol.control.FullScreen()
   ])
});
var radius = 75; // 用于控制图层望远镜的半径
document.addEventListener('keydown', function(evt){
console.log(100);
if(evt.keyCode === 38){
console.log(1);
// 如果用户按下'↑'键，望远镜的半径增加5像素
radius = Math.min(radius + 5, 150);
map.render();//重新渲染地图
evt.preventDefault();//阻止按键默认事件
}else if(evt.keyCode === 40){
// 如果用户按下'↓'键，望远镜的半径减少5像素
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('prerender', function(event){ // 在每次绘制影像图层之前触发
var ctx = event.context; // 获取canvase渲染上下文
var pixelRatio = event.frameState.pixelRatio; // 获取地图当前帧的像素比率
ctx.save(); // 保存当前canvas设置
ctx.beginPath(); // 开始绘制路径
if(mousePosition){
// 绘制一个围绕鼠标光标的圆
ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio,
radius * pixelRatio, 0, 2 * Math.PI);//x,y为鼠标位置,半径,起始点角度,正好一个圆
ctx.lineWidth = 5 * pixelRatio;
ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
ctx.stroke();
}
ctx.clip(); // 使用刚绘制的圆裁剪影像图层，使得影像图层只保留该圆的范围
});

// 在每次绘制影像图层之后触发
imagery.on('postrender', function(event){
var ctx = event.context;
ctx.restore(); // canvas恢复到之前的设置
})
//如果出现鼠标位置与望远镜位置不匹配可以打开电脑的显示设置，在缩放与布局里修改为100% 然后刷新页面即可
</script>

</body>
</html>