MapXtreme 2005 鹰眼源代码
研究了一段时间的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" />
<cc1anTool ID="anTool1" 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 (!IsPostBack)
{
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' onmousedown='f_mdown(this)' onmouseup='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"); }
}
注意在配置文件中，要加载2个工作空间。
如下：
<add key="MapInfo.Engine.Session.Workspace" value="D:\test\web\china.mws;D:\test\web\china.mws" />
一、打开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" />
<cc1anTool ID="anTool1" 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 (!IsPostBack)
{
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' onmousedown='f_mdown(this)' onmouseup='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"); }
}
注意在配置文件中，要加载2个工作空间。
如下：
<add key="MapInfo.Engine.Session.Workspace" value="D:\test\web\china.mws;D:\test\web\china.mws" />