研究了一段时间的MapXtreme2005 v6.6, 实现了个简单的鹰眼,放出来与大家分享,转载请注明出处。设计思路为设置两个MapControl ,map1和map2,map1为主地图,map2为索引图,将map1.Bounds的矩形在map2上转换为System.Drawing.Rectangle,之后将这个Rectangle的左上坐标和width,height传到客户端,应用JS在客户端绘图。 同理移动客户端索引图上的Rectangle,则将Rectangle的中心坐标传回转换后设置map1的中心坐标。
一、打开VS2005新建一个网站,选择“MapXtreme 6.6 Web Application”模板(当然也可以建一个空模板,然后自己拖控件,配置web..config);
二、把界面的上MapControl1命名为MainMap,MapAlias为Map1,再拖一个MapContol到界面上(自己排版),命名为IndexMap(作为导航地图),MapAlias为Map2;
三、下面为源码:
MapForm.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MapForm.aspx.cs" Inherits="IndexMap.IndexPage" %> <%@ Register Assembly="MapInfo.WebControls, Version=4.0.0.428, Culture=neutral, PublicKeyToken=0a9556cc66c0af57" Namespace="MapInfo.WebControls" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " > <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script type="text/javascript" language="JavaScript"> var currentMoveObj = null; var relLeft; var relTop; function f_mdown(obj) { currentMoveObj = obj; currentMoveObj.style.position = "absolute"; relLeft = event.x - currentMoveObj.style.pixelLeft; relTop = event.y - currentMoveObj.style.pixelTop; } window.document.onmouseup = function() { currentMoveObj = null; } window.document.onmousemove=function() { if(currentMoveObj != null) { currentMoveObj.style.pixelLeft=event.x-relLeft; currentMoveObj.style.pixelTop=event.y-relTop; } } </script> </head> <body> <form id="form1" runat="server"> <script type="text/javascript" src="js/JScript.js"></script> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top"> <img src="images/mi_logo.gif" alt="MapInfo" /></td> <td background="images/header_bg.gif" width="100%"> <img src="images/header_bg.gif" alt="" /></td> <td> <img src="images/mapxtreme_logo.gif" alt="MapXtreme" /></td> </tr> </table> <table style="position:absolute;left: 10px; top: 90px;" border="1" cellpadding="0" cellspacing="0"> <tr> <td style="width: 200px"> <table> <tr> <td style="width: 200px; height: 200px;"> <cc1:MapControl ID="IndexMap" runat="server" Height="200px" Width="200px" MapAlias="Map2" /> </td> </tr> <tr> <td style="width: 200px; height: 400px;"></td> </tr> </table> </td> <td style="display:block;position:relative; width: 597px;"> <cc1:MapControl ID="MainMap" runat="server" Height="600px" Width="600px" MapAlias="Map1"/></td><td></td></tr> <tr><td style="width: 143px"></td><td style="width: 597px"> <cc1:ZoomInTool ID="ZoomInTool1" runat="server" MapControlID="MainMap" /> <cc1:ZoomOutTool ID="ZoomOutTool1" runat="server" MapControlID="MainMap" /> <cc1:PanTool ID="PanTool1" runat="server" MapControlID="MainMap" /> </td><td></td></tr> </table> <div id = "indexDiv" style="position:absolute;left:14px;top:94px;height:200px;width:200px;background:transparent;"></div> <script language="javascript" type="text/javascript"> function bindevent() { var mapimage = document.getElementById("MainMap_Image"); mapimage.attachEvent('onload', getZoomValue); } bindevent(); </script> </form> </body> </html> MapForm.cs using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using MapInfo.WebControls; using ApplicationStateManager; namespace IndexMap { public partial class IndexPage : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { // If the StateManager doesn't exist in the session put it else get it. if (StateManager.GetStateManagerFromSession() == null) StateManager.PutStateManagerInSession(new AppStateManager()); if (Session.IsNewSession) { MapControlModel model = MapControlModel.SetDefaultModelInSession(); model.Commands.Add(new IndexMap.ZoomValue()); model.Commands.Add(new IndexMap.MoveMainMap()); } // Now Restore State StateManager.GetStateManagerFromSession().ParamsDictionary[StateManager.ActiveMapAliasKey] = MainMap.MapAlias; StateManager.GetStateManagerFromSession().RestoreState(); } // At the time of unloading the page, save the state private void Page_UnLoad(object sender, System.EventArgs e) { StateManager.GetStateManagerFromSession().SaveState(); } protected MapInfo.Mapping.Map GetMapObj(string mapAlias) { MapInfo.Mapping.Map myMap = MapInfo.Engine.Session.Current.MapFactory[mapAlias]; if(myMap == null) { myMap = MapInfo.Engine.Session.Current.MapFactory[0]; } return myMap; } } }
CustomerCommand.cs
using System; using System.Data; using System.IO; using System.Drawing; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using MapInfo.Web; using MapInfo.WebControls; using MapInfo.Data; using MapInfo.Geometry; namespace IndexMap { [Serializable] public class ZoomValue : MapInfo.WebControls.MapBaseCommand { public ZoomValue() { Name = "ZoomValue"; } public override void Process() { MapControlModel model = MapControlModel.GetModelFromSession(); MapInfo.Mapping.Map map1 = model.GetMapObj("Map1"); MapInfo.Mapping.Map map2 = model.GetMapObj("Map2"); System.Drawing.Rectangle rectNew; map2.DisplayTransform.ToDisplay(map1.Bounds, out rectNew); HttpContext.Current.Response.Output.Write(rectNew.X + "," + rectNew.Y + "," + rectNew.Height + "," + rectNew.Width); } } [Serializable] public class MoveMainMap : MapInfo.WebControls.MapBaseCommand { public MoveMainMap() { Name = "MoveMainMap"; } public override void Process() { int x = System.Convert.ToInt32(HttpContext.Current.Request["CenterX"]); int y = System.Convert.ToInt32(HttpContext.Current.Request["CenterY"]); MapControlModel model = MapControlModel.GetModelFromSession(); MapInfo.Mapping.Map map1 = model.GetMapObj("Map1"); MapInfo.Mapping.Map map2 = model.GetMapObj("Map2"); System.Drawing.Point spoint = new System.Drawing.Point(x,y); MapInfo.Geometry.DPoint point; map2.DisplayTransform.FromDisplay(spoint, out point); map1.Center = point; MemoryStream ms = model.GetMap(MapAlias, MapWidth, MapHeight, ExportFormat); StreamImageToClient(ms); } } }
JScript.js
// JScript 文件 function getZoomValue() { var MapImage = document.getElementById("MainMap_Image"); var url = "MapController.ashx?Command=ZoomValue&Width=" + MapImage.width + "&height=" + MapImage.height + "&ExportFormat=" + MapImage.exportFormat + "&Ran=" + Math.random(); if(MapImage.mapAlias) url += "&MapAlias" + MapImage.mapAlias; var xmlHttp = CreateXMLHttp(); xmlHttp.open("GET",url,false); xmlHttp.send(null); var result = xmlHttp.responseText; var htmlContent = new Array(); htmlContent = result.split(','); var div = document.getElementById("indexDiv"); var left = 1*htmlContent[0] ; var top = 1*htmlContent[1] ; var height = 1*htmlContent[2] ; var width = 1*htmlContent[3] ; if (left < 0) left = 0; if (top < 0) top = 0; if (width > 200) width = 200; if (height > 200) height = 200; div.innerHTML="<div id = 'indexRect' style='border:3px solid red;position:absolute;left:" + left + ";top:" + top +";height:" + height +"px;width:"+ width +"px;cursor:move' οnmοusedοwn='f_mdown(this)' οnmοuseup='MoveMainMap()'></div>"; } function MoveMainMap() { var mapImage = document.getElementById("MainMap_Image"); var indexRect = document.getElementById("indexRect"); var w = indexRect.clientWidth /2; var h = indexRect.clientHeight /2; var x = parseInt((parseInt(indexRect.style.left) + w)); var y = parseInt((parseInt(indexRect.style.top) + h)); var url = "MapController.ashx?Command=MoveMainMap&Width=" + mapImage.width + "&Height=" + mapImage.height + "&ExportFormat=" + mapImage.exportFormat + "&Ran=" + Math.random(); url += "&CenterX=" + x; url += "&CenterY=" + y; if (mapImage.mapAlias) url += "&MapAlias=" + mapImage.mapAlias; var xmlHttp = CreateXMLHttp(); xmlHttp.open("GET", url, false); xmlHttp.send(null); try { mapImage.src = url; } catch(e) { alert("ll"); } }