鼠标滚轮实现地图放大缩小 并以滚轮点为中心点
客户端脚本
01.
function getObjectById(id)
02.{
03. if (typeof(id) != "string" || id == "")
04. return null;
05.
06. if (document.all)
07. return document.all(id);
08.
09. if (document.getElementById)
10. return document.getElementById(id);
11.
12. try
13. {
14. return eval(id);
15. }
16. catch(e)
17. {
18. return null;
19. }
20.}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;
}
}
view plaincopy to clipboardprint?
01.var MapImg = getObjectById('DigitalMapCtl_Image');//见Public.js
02.if(MapImg != null)
03.{
04. //MapImg.attachEvent('onmousewheel',MapCtlMouseWheel);仅为IE
05. //linkEvent(MapImg,'mousewheel',MapCtlMouseWheel);IE和NS //见Public.js
06. MapImg.onmousewheel = MapCtlMouseWheel;//绑定onmousewheel事件
07. MapImg.onmouseout = MapCtlMouseOut;
08.}
09.
10.function MapCtlMouseOut()
11.{
12. document.body.onmousewheel = function(){return true;};//鼠标离开MapControl范围时归还，onmousewheel事件给body
13.}
14.
15.///在地图上滚动鼠标滚轮放大缩小地图
16.///滚动请求地图图片
17.function MapCtlMouseWheel()
18.{
19. document.body.onmousewheel = function(){return false;};//鼠标在MapControl内,截获Body onmousewheel事件 再放大缩小地图时，文档滚动条不会随之滚动
20. var mapImg = document.getElementById('DigitalMapCtl_Image');
21. eventXY = new Point(event.x,event.y);////Point()参见MapXtremeWebResources/Interaction.js内部定义
22. var pointString = ""+"1,";
23. mapImg.origin = GetAbsPos(mapImg);//GetAbsPos()参见MapXtremeWebResources/Interaction.js内部定义
24. var offsetObj = mapImg.origin; //这个点的转换过程
25. if(eventXY.y != -99999) //参考MapXtremeWebResources内
26. { //Command.js 增加点串到url的
27. pointString += (eventXY.x - offsetObj.x) + "_" + (eventXY.y - offsetObj.y); //处理方式.
28. } //
29. else //
30. {//
31. pointString += eventXY.x + "_" + eventXY.y; //
32. } //
33. var url = "MapController.ashx?Command=WheelZoom&Width=" + mapImg.width +"&Height="
34. + mapImg.height +"&ExportFormat=" + mapImg.exportFormat + "&Ran=" + Math.random()
35. + "&wheelvalue=" + event.wheelDelta + "&MapAlias=" + mapImg.mapAlias+"&Points=1,"+event.x + "_" + event.y; //pointString;
36.
37. var xmlHttp = new CreateXMLHttp();//引用于MapXtremeWebResources/Command.js
38. xmlHttp.open("GET",url,false);
39. xmlHttp.send();
40. mapImg.src = url;
41.}
42.//服务器端命令工具参见 CustomMapTools命名空间 WheelZoom类
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类
服务器端代码
view plaincopy to clipboardprint?
01.#region Class WheelZoom Command
02.///
03./// 鼠标滚轮自定义命令，实现鼠标滚轮放大缩小地图
04.///
05.[Serializable]
06.public class WheelZoom : MapBaseCommand
07.{
08. public WheelZoom()
09. {
10. Name = "WheelZoom";//工具名称
11. }
12.
13. public override void Process()
14. {
15. int wheelvalue = int.Parse(System.Convert.ToString(HttpContext.Current.Request["wheelvalue"]));//获取滚轮值
16. System.Drawing.Point[] cPoint = ExtractPoints(DataString);
17. MapControlModel model = MapControlModel.GetModelFromSession();
18. model.SetMapSize(MapAlias, MapWidth, MapHeight);
19. try
20. {
21. MapInfo.Mapping.Map myMap = model.GetMapObj("map1");
22. MapInfo.Geometry.Distance d = new MapInfo.Geometry.Distance(myMap.Zoom.Value * 0.1, myMap.Zoom.Unit);
23. if (wheelvalue > 0)
24. d = new MapInfo.Geometry.Distance(myMap.Zoom.Value * (1 - 0.1), myMap.Zoom.Unit);//缩小到原来的90%
25. else
26. d = new MapInfo.Geometry.Distance(myMap.Zoom.Value * (1 + 0.1), myMap.Zoom.Unit);//放大到原来的110%
27. myMap.Zoom = d;
28. model.Center(MapAlias, cPoint[0]);
29. }
30. finally
31. {
32. System.IO.MemoryStream ms = model.GetMap(MapAlias, MapWidth, MapHeight, ExportFormat);
33. StreamImageToClient(ms);
34. }
35. }
36.}
37.#endregion
鼠标滚轮放大缩小地图
首先在地图容器上添加滚轮事件：
onmousewheel="mouseWheelZoomMap()"
客户端脚本：
//鼠标在地图区的滚轮事件
function mouseWheelZoomMap(){
var zoomValue="";
if(window.event.wheelDelta>0){
zoomValue=0.5;
}
else{
zoomValue=2;
}
var url = "MapController.ashx?Command=MouseWheelZoomMap&Ran=" + Math.random();
var mapImage = document.getElementById("MapControl1_Image");
if (mapImage.mapAlias)
url += "&MapAlias=" + mapImage.mapAlias;
url+="&Width="+mapImage.width+"&Height="+mapImage.height+"&ExportFormat="+mapImage.exportFormat;
url+="&ZoomValue="+zoomValue;
mapImage.src =url;
}
服务器端代码（cs文件namespace CustomWebTools）：
///
/// 鼠标滚轮放大缩小地图
///
[Serializable]
public class MouseWheelZoomMap : MapInfo.WebControls.MapBaseCommand
{
///
/// Constructor for this command, sets the name of the command
///
///None
public MouseWheelZoomMap()
{
Name = "MouseWheelZoomMap";
//Execute();
}
///
/// This method gets the map object out of the mapfactory with given mapalias and
/// Adds a point feature into a temp layer, exports it to memory stream and streams it back to client.
///
///None
public override void Process()
{
MapControlModel model = MapControlModel.GetModelFromSession();
if (MapAlias == null) return;
model.SetMapSize(MapAlias, MapWidth, MapHeight);
MapInfo.Mapping.Map map = model.GetMapObj(MapAlias);
if (map == null) return;
//map.Bounds = https://www.doczj.com/doc/bf11940405.html,yers.Bounds;
double zoomValue =Convert.ToDouble( HttpContext.Current.Request["ZoomValue"].ToString());
double ZoomLevel = map.Zoom.Value * zoomValue;
model.Zoom(MapAlias,-1.0,ZoomLevel);
MemoryStream ms = model.GetMap(MapAlias, MapWidth, MapHeight, ExportFormat);
StreamImageToClient(ms);
}
}
最后在mapForm.cs的Page_Load（）事件中添加：
MapInfo.WebControls.MapControlModel controlModel = MapControlModel.SetDefaultModelInSession();
// add custom commands to control model
https://www.doczj.com/doc/bf11940405.html,mands.Add(new CustomWebTools.MouseWheelZoomMap());相关主题文本预览