应用ArcGIS Server JavaScript API实现地图卷帘效果实现

var maskDynamicMapServiceLayer = null;
var maskDynamicMapServiceLayerDiv = null;
var pointNumb = 0;
var alignType = "";
var mapMouseDownEvent= null;
var mapMouseMoveEvent = null;
var mapMouseUpEvent = null;
var mapDiv = null;
function initOverlayerContrast(layer)
{
    maskDynamicMapServiceLayer = layer;
    maskDynamicMapServiceLayerDiv = document.getElementById("map_" + maskDynamicMapServiceLayer.id);
    mapDiv = document.getElementById("map");
    mapDiv.onmousedown = startDragSwipe;
    map.disablePan();
}

function destroyOverlayerContrast()
{
    mapDiv.onmousedown = null;
    mapDiv = null;
    maskDynamicMapServiceLayer = null;
    maskDynamicMapServiceLayerDiv = null;
    map.enablePan();
}

function startDragSwipe(e) {
    pointNumb = 1;
    var eventObj = window.event || e;
    var x = eventObj.clientX;
    var y = eventObj.clientY;
    maskDynamicMapServiceLayerDiv = document.getElementById("map_" + maskDynamicMapServiceLayer.id);
    mapDiv.onmousemove = moveDragSwipe;
    mapDiv.onmouseup = stopDragSwipe;
    //
    var leftOffset = x;
    var topOffset = y;
    var rightOffset = document.body.clientWidth - x;
    var bottomOffset = document.body.clientHeight - y;
    var minOffset = 0;
    if (leftOffset < rightOffset) {
        minOffset = leftOffset;
        alignType = "left";
    } else {
        minOffset = rightOffset;
        alignType = "right";
    }
    if (topOffset < minOffset) {
        minOffset = topOffset;
        alignType = "top";
    }
    if (bottomOffset < minOffset) {
        minOffset = bottomOffset;
        alignType = "bottom";
    }
    //
    var clip = "rect(auto, auto, auto," + x + "px)";
    if (alignType == "right") {
        clip = "rect(auto, " + x + "px, auto, auto)";
    } else if (alignType == "top") {
        clip = "rect(" + y + "px, auto, auto, auto)";
    } else if (alignType == "bottom") {
        clip = "rect(auto, auto, " + y + "px, auto)";
    }
    maskDynamicMapServiceLayerDiv.style.clip = clip;
}

function moveDragSwipe(e) {
    var eventObj = window.event || e;
    var x = eventObj.clientX;
    var y = eventObj.clientY;
    //
    if (maskDynamicMapServiceLayerDiv && pointNumb == 1) {
        var clip = "rect(auto, auto, auto," + x + "px)";
        if (alignType == "right") {
            clip = "rect(auto, " + x + "px, auto, auto)";
        } else if (alignType == "top") {
            clip = "rect(" + y + "px, auto, auto, auto)";
        } else if (alignType == "bottom") {
            clip = "rect(auto, auto, " + y + "px, auto)";
        }
        maskDynamicMapServiceLayerDiv.style.clip = clip;
    }
}

//
function stopDragSwipe(evt) {
    if (maskDynamicMapServiceLayerDiv)
    {
        maskDynamicMapServiceLayerDiv.style.clip = "rect(auto, auto, auto, auto)";
    }
    pointNumb = 0;
    mapDiv.onmousemove = null;
    mapDiv.onmouseup = null;
}