鼠标滚轮实现地图放大缩小 并以滚轮点为中心点

客户端脚本

function getObjectById(id)
{
    if (typeof(id) != "string" || id == "") 
        return null;
        
    if (document.all) 
        return document.all(id);
        
    if (document.getElementById) 
        return document.getElementById(id);
    
    try
    {
        return eval(id);
    }
    catch(e)
    {
        return null;
    }
}

var MapImg = getObjectById('DigitalMapCtl_Image');//见Public.js
if(MapImg != null)
{
    //MapImg.attachEvent('onmousewheel',MapCtlMouseWheel);仅为IE
    //linkEvent(MapImg,'mousewheel',MapCtlMouseWheel);IE和NS //见Public.js
    MapImg.onmousewheel = MapCtlMouseWheel;//绑定onmousewheel事件
    MapImg.onmouseout = MapCtlMouseOut;
}

function MapCtlMouseOut()
{
    document.body.onmousewheel = function(){return true;};//鼠标离开MapControl范围时归还，onmousewheel事件给body
}

///在地图上滚动鼠标滚轮放大缩小地图
///滚动请求地图图片
function MapCtlMouseWheel()
{
    document.body.onmousewheel = function(){return false;};//鼠标在MapControl内,截获Body onmousewheel事件 再放大缩小地图时，文档滚动条不会随之滚动
    var mapImg = document.getElementById('DigitalMapCtl_Image');
    eventXY = new Point(event.x,event.y);////Point()参见MapXtremeWebResources/Interaction.js内部定义
    var pointString = ""+"1,";
    mapImg.origin = GetAbsPos(mapImg);//GetAbsPos()参见MapXtremeWebResources/Interaction.js内部定义
    var offsetObj = mapImg.origin;                                                  //这个点的转换过程
    if(eventXY.y != -99999)                                                         //参考MapXtremeWebResources内
    {                                                                               //Command.js 增加点串到url的
        pointString += (eventXY.x - offsetObj.x) + "_" + (eventXY.y - offsetObj.y); //处理方式.
    }                                                                               //
    else                                                                            //
    {                                                                               //
        pointString += eventXY.x + "_" + eventXY.y;                                 //
    }                                                                               //
    var url = "MapController.ashx?Command=WheelZoom&Width=" + mapImg.width +"&Height="
                + mapImg.height +"&ExportFormat=" + mapImg.exportFormat + "&Ran=" + Math.random()
                + "&wheelvalue=" + event.wheelDelta + "&MapAlias=" + mapImg.mapAlias+"&Points=1,"+event.x + "_" + event.y; //pointString;
    
    var xmlHttp = new CreateXMLHttp();//引用于MapXtremeWebResources/Command.js
    xmlHttp.open("GET",url,false);
    xmlHttp.send();
    mapImg.src = url;
}
//服务器端命令工具参见 CustomMapTools命名空间 WheelZoom类

服务器端代码

    #region Class WheelZoom Command
    /// 

    /// 鼠标滚轮自定义命令，实现鼠标滚轮放大缩小地图
    /// 
    [Serializable]
    public class WheelZoom : MapBaseCommand
    {
        public WheelZoom()
        {
            Name = "WheelZoom";//工具名称
        }

        public override void Process()
        {
            int wheelvalue = int.Parse(System.Convert.ToString(HttpContext.Current.Request["wheelvalue"]));//获取滚轮值
            System.Drawing.Point[] cPoint = ExtractPoints(DataString);
            MapControlModel model = MapControlModel.GetModelFromSession();
            model.SetMapSize(MapAlias, MapWidth, MapHeight);
            try
            {
                MapInfo.Mapping.Map myMap = model.GetMapObj("map1");
                MapInfo.Geometry.Distance d = new MapInfo.Geometry.Distance(myMap.Zoom.Value * 0.1, myMap.Zoom.Unit);
                if (wheelvalue > 0)
                    d = new MapInfo.Geometry.Distance(myMap.Zoom.Value * (1 - 0.1), myMap.Zoom.Unit);//缩小到原来的90%
                else
                    d = new MapInfo.Geometry.Distance(myMap.Zoom.Value * (1 + 0.1), myMap.Zoom.Unit);//放大到原来的110%
                myMap.Zoom = d;
                model.Center(MapAlias, cPoint[0]);
            }
            finally
            {
                System.IO.MemoryStream ms = model.GetMap(MapAlias, MapWidth, MapHeight, ExportFormat);
                StreamImageToClient(ms);
            }
        }
    }
    #endregion