<body>
<div id="map"></div>
<script>
var map=new ol.Map({
target:"map",
layer:[],
view:new ol.View({
center:ol.proj.fromLonLat([-109,46.5]),
zoom:6
})
});
var key= "AuUKioHoVzV-16Ep0yv6ay21ixWZ5OZ7jDs-k7g03fiUMbN6GSH97IpRcQ_s_s3-";
var BingMapRoad=new ol.layer.Tile({
source: new ol.source.BingMaps({
key:key,
imagerySet: 'Road'
}),
name:'BingMap的道路圖層'
});
var BingMapAerial=new ol.layer.Tile({
source: new ol.source.BingMaps({
key:key,
imagerySet: 'Aerial'
}),
name:'BingMap的影像圖層'
});
map.addLayer(BingMapAerial);
map.addLayer(BingMapRoad);
//結合jQuery插件的方法，實現對圖層的裁剪
var radius=75;//圓半徑
//用keydown事件實現在鍵盤上通過up和down按鍵改變圓的半徑
$(document).keydown(function(evt){
if(evt.which===38){
radius=Math.min(radius+5,150);//按up，半徑擴大5px
map.render();//渲染地圖
}else if(evt.which===40){
radius=Math.max(radius-5,25);
map.render();
}
});
var mousePosition=null;
$(map.getViewport()).on("mousemove",function(evt){
mousePosition=map.getEventPixel(evt.originalEvent);//獲得當前鼠標的位置
map.render();
}).on("mouseout",function(){
mousePosition=null;
map.render();
});
BingMapRoad.on("precompose",function(event){
var ctx=event.context;//影像圖層畫布
var pixelRatio=event.frameState.pixelRatio;//像素比
ctx.save();
ctx.beginPath();
if(mousePosition){
ctx.arc(mousePosition[0]*pixelRatio,mousePosition[1]*pixelRatio,radius*pixelRatio,0,2*Math.PI);//設置畫布區為一個圓
ctx.lineWidth=5*pixelRatio;
ctx.strokeStyle='rgba(0,0,0,0.5)';
ctx.stroke();
}
ctx.clip();//裁剪畫布
})
BingMapRoad.on("postcompose",function(event){
var ctx=event.context;
ctx.restore();//還原畫布
})
</script>
</body>
