效果图如上://本文参考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>