<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>

												


											
Openlayers 3 图层探查功能的更多相关文章
	

    
								
  1. leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)
		
    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet  ...
    
		
    2. 
						
  2. openlayers6结合geoserver利用WFS服务实现图层新增功能(附源码下载)
		
    内容概览 1.openlayers6结合geoserver利用WFS服务实现图层新增功能2.源代码demo下载 效果图如下: 本篇主要是openlayers6通过调用geoserver发布的地图服务W ...
    
		
    3. 
						
  3. (二十)WebGIS中图层树功能的设计和实现
		
    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在GIS的桌面工具中,比如arcgis desktop或者S ...
    
		
    4. 
						
  4. openlayers自定义图层控制的实现
		
    好久没写博文了,今天出来冒个泡. 最近一直在考虑一件事情,那就是openlayers中自定义wms的图层控制.用过openlayers的人都知道,在openlayers中有自带的图层控制的控件,调用方 ...
    
		
    5. 
						
  5. openlayers筛选图层
		
    很多时候需要筛选图层,例如选择交互(ol.interaction.Select). 图片来自官方:https://openlayers.org/en/v4.6.5/apidoc/ol.interact ...
    
		
    6. 
						
  6. 【06】openlayers 切片图层
		
    创建地图: //OSM图层 let source = new ol.source.OSM() //切片图层tilelayer let layers = new ol.layer.Tile({ sour ...
    
		
    7. 
						
  7. openlayers 各种图层，持续更新
		
    /*高德地图*/ var vectorLayerLine = new ol.layer.Tile({ source: new ol.source.XYZ({ urls: [ "http:// ...
    
		
    8. 
						
  8. leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)
		
    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet  ...
    
		
    9. 
						
  9. 【05】openlayers 网格图层
		
    效果: 创建地图: //创建地图 var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ projection: 'EPSG:4326', //投 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【解题报告】Math
			
    = =本来昨天就该发的,只是断网……. MATH  [题目描述] 小 x正在做他的数学作业,可是作业实在太难了.题目是这样的: 1.给定一个含有N个数的数列 V. 2.你可以从数列中恰好移除 K个数, ...
    
			
    2. 
						
  2. jQuery 截取double数据  重新赋值
			
    $('.prioritySort').each(function(i){ $(this).text($(this).text().substring(0,$(this).text().indexOf( ...
    
			
    3. 
						
  3. img 鼠标滑上后图片放大,滑下后图片复原
			
    <style type="text/css">img{ -webkit-transition: ease .2s; transition: ease .2s; -web ...
    
			
    4. 
						
  4. 调用短信接口,先var_dump()看数据类型是object需要json_decode(json_encode( $resp),true)转换成array
			
    返回的数据.先看类型,如果是object类型 先json_encode, 再json_decode,加true 转换成数组 $resp = $c->execute($req); var_dump ...
    
			
    5. 
						
  5. Redis持久存储-AOF&RDB
			
    Redis中数据存储模式有2种:cache-only,persistence;cache-only即只做为"缓存"服务,不持久数据,数据在服务终止后将消失,此模式下也将不存在&qu ...
    
			
    6. 
						
  6. 亲身体验：Vultr超高性价比VPS评测教程
			
    最具性价比的vps是哪家?综合考虑vps稳定性.机房速度.vps硬件配置,美国linode一度是vps市场里的王牌:digitalocean vps迅速介入云主机市场,SSD固态硬盘性能秒杀竞争对手, ...
    
			
    7. 
						
  7. iOS之多线程NSOperation
			
    目前在 iOS 和 OS X 中有两套先进的同步 API 可供我们使用:NSOperation 和 GCD .其中 GCD 是基于 C 的底层的 API ,而 NSOperation 则是 GCD 实 ...
    
			
    8. 
						
  8. NOIP2010-普及组复赛模拟试题-第一题-手机
			
    题目背景 Background 现在手机使用越来越广泛了  题目描述 Description 一般的手机的键盘是这样的:   要按出英文字母就必须要按数字键多下.例如要按出 x 就得按 9 两下,第一 ...
    
			
    9. 
						
  9. 洛谷-哥德巴赫猜想（升级版）-BOSS战-入门综合练习1
			
    题目背景 Background 1742年6月7日哥德巴赫写信给当时的大数学家欧拉,正式提出了以下的猜想:任何一个大于9的奇数都可以表示成3个质数之和.质数是指除了1和本身之外没有其他约数的数,如2和 ...
    
			
    10. 
						
  10. 大数据阶乘（The factorial of large data）
			
    题目描述 Description 阶乘是计算中的基础运算,虽然规则简单,但是位数太多了,也难免会出错.现在的问题是:给定任意位数(long long类型)的一个数,求它的阶乘,请给出正确结果.为提高速 ...
    
			
    11.