基于arcgis api的图层透镜

原创于 2019-09-29 16:30:57 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis api #图层透镜

arcgisapi 专栏收录该内容

2 篇文章

订阅专栏

本文分享了使用OpenLayers和ArcGIS JS API实现影像图层透镜效果的方法。通过自定义canvas画布裁剪，作者详细介绍了如何在地图上创建一个可交互的透镜效果，包括事件监听和实时渲染调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看了别人用openlayers写的透镜，还有一个别人用arcgis js api写的透镜（他写的实在是看不懂，一个注释都没有）。所以我自己写了一个。
思路是这样的：我这里用的是RasterLayer影像图层，影像图层的绘制原理是一个canvas画布，我们要做的就是根据自己的需要裁剪这个画布。
第一步，先是获取画布

var ctx = lingbeiCluster.getContext ();

第二步，注册事件，写个按钮，点击按钮激活map的mouse-down事件并裁剪图层，mouse-up的时候重新刷新图层，恢复原样。（其实可以写成随鼠标移动而裁剪，但是影像图层的渲染是比较耗内存的不建议这样做）；

 onkeydown = function (event) {//控制r大小
                if (event.keyCode == 87) {
                    radius += 2
                    if (radius > 200) {
                        radius = 200
                    }
                }
                if (event.keyCode == 83) {
                    radius -= 2;
                    if (radius < 30) {
                        radius = 30
                    }
                }
                if (event.keyCode == 27) {//esc退出
                    mUse = - 1                    
                     map.enableClickRecenter ();
                    map.enableDoubleClickZoom ();
                    map.enableKeyboardNavigation ();
                    map.enableMapNavigation ();
                    map.enablePan ();
                    map.enablePinchZoom ();
                    map.enableRubberBandZoom ();
                    map.enableScrollWheel ();
                    map.enableScrollWheelPan ();
                    map.enableShiftDoubleClickZoom ();
                    }
 var radius = 50; //透镜半径
            var mUse = 0;//设置mousedown事件是否执行
            on ( dom.byId ( 'layerspy' ), 'click', function () {
                mUse = 1
                radius = 50;
                lingbeiCluster1.hide ();
                resultLayer.hide ();
                map.infoWindow.hide ();
                map.disableClickRecenter ()
                map.disableDoubleClickZoom ();
                map.disableKeyboardNavigation ();
                map.disableMapNavigation ();
                map.disablePan ();
                map.disablePinchZoom ();
                map.disableShiftDoubleClickZoom ();
                map.disableRubberBandZoom ();
                map.disableScrollWheel ();
                map.disableScrollWheelPan ();


            } );//图层透镜
            map.on ( 'mouse-down', function (evt) {

                if (mUse == 1) {

                    var ctx = lingbeiCluster.getContext ();

                    function clearArc(x, y, radius) {//圆心(x,y)，半径radius
                        var calcWidth = radius - stepClear;
                        var calcHeight = Math.sqrt ( radius * radius - calcWidth * calcWidth );

                        var posX = x - calcWidth;
                        var posY = y - calcHeight;

                        var widthX = 2 * calcWidth;
                        var heightY = 2 * calcHeight;

                        if (stepClear <= radius) {
                            ctx.clearRect ( posX, posY, widthX, heightY );
                            //ctx.fillStyle = "rgba(0,0,0,0.3)"
                            //ctx.globalAlpha = 0.5
                            //ctx.fill();
                            stepClear += 1;
                            clearArc ( x, y, radius );
                        }
                    }

                    var stepClear = 1;//别忘记这一步
                    var sX = evt.clientX
                    var sY = evt.clientY;
                    clearArc ( sX, sY, radius );
                } else {

                }
            } )
            map.on ( 'mouse-up', function (evt) {
                if (mUse == 1) {

                    lingbeiCluster.refresh ();
                } else {
                }

            } )

实际效果

在这里插入图片描述