OpenaLayer学习之图层探查

等待是最痛苦的事，有时候真的很迷茫，这学上的怀疑人生，这辈子遇见对的人真的很关键，唉，废话不说了开车，开车

一、图层探查是一个功能型的小插件，当map加载多个图层的时候，有的图层被覆盖掉了，我们如果想看到图层就可以通过探查图层小插件，相当于将上面的图层裁剪一块。

二、实现思路主要的运用图层的事件（precompose: 准备渲染，未渲染。postrender: 渲染全部结束。）

三、图层代码

            //天地图底图
            var source =new ol.source.XYZ({
                url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
            });
            var tileLayer =new  ol.layer.Tile({
                title:"天地图",
                source:source
            });
            //标注图层
            var sourceMark = new ol.source.XYZ({ url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}' });
            var tileMark = new ol.layer.Tile({
                title:"标注图层",
                source: sourceMark,
                
            });
            //卫星图像
            var sourceSatellite = new ol.source.XYZ({ url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}' });
            var tileSatellite = new ol.layer.Tile({
                title: "卫星图",
                source:sourceSatellite

            });
            map = new ol.Map({
                layers: [
                    tileLayer,
                    tileMark,
                    tileSatellite

                ],
                view: new ol.View({
                    zoom: 11,
                    center:ol.proj.transform( [116.40769, 39.89945], 'EPSG:4326', 'EPSG:3857')
                }),
                

四、事件驱动（注意是给那个图层添加的事件，这里ttileLayer在最上层，tileSatellite被覆盖）

//图层探查
            var radius = 75;//圆的半径
            //通过keydown 事件实现在键盘上通过Up和Down按键改变圆的半径
            $(document).keydown(function (evt) {
                //按键事件无论，元素是否得到焦点都会被触发
                if (evt.which==38) {
                    //指示按了那个键，或按钮，当按下Up键时半径扩大五个像素,最大半径150
                    radius = Math.min(radius + 5, 150);
                    map.render();//渲染地图

                }
                if (evt.which == 40) {
                    //指示按了那个键，或按钮，当按下Down键时半径减小五个像素，最小半径25
                    radius = Math.min(radius -5, 25);
                    map.render();//渲染地图（重新刷新的意思）
                }
                
            });
            //在每次鼠标发生移动时获取当前像素的位置
            var mousePosition = null;
            //通过on方法为地图视图绑定mousemove与mouseout事件
            $(map.getViewport()).on('mousemove', function (evt) {
                //获取当前鼠标位置的像素
                mousePosition = map.getEventPixel(evt.originalEvent);
                map.render();

            }).on('mouseout', function () {
                mousePosition = null;//鼠标移走将该点的坐标清零
                map.render();
            });
            //在影像图层绘制（渲染）前进行一部分裁剪
            tileSatellite.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;  //圆边框的宽，设置为5个像素单位
                    ctx.strokeStyle = 'rgba(0,0,0,0.5)'; // 圆边框样式（颜色）
                    ctx.stroke();
                }
                ctx.clip();//裁剪画布
            });
            // 影像图层绘制后还原画布背景（ the canvas context）
            tileSatellite.on('postcompose', function (event) {
                var ctx = event.context;
                ctx.restore();//还原画布
                //postcompose：地图渲染中。
                //precompose: 准备渲染，未渲染。
                //postrender: 渲染全部结束。
            })

至于那个画布问题，看不懂的可以看看HTML5中的canvas特性标签

五、效果

六、总结，代码很少，也很简单，参考了郭明强的书，生命不息，学习不止