用MapXtreme2005V6.6在webapp中实现鹰眼

转载

mb5fe94cbf99977 2010-04-29 16:32:00

文章标签 html xml javascript ide 客户端 文章分类 JavaScript 前端开发

研究了一段时间的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 " >

<title>Untitled Page</title>

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>

<tr>

<td>

</tr>

</table>

<tr>

<table>

<tr>

<cc1:MapControl ID="IndexMap" runat="server" Height="200px" Width="200px" MapAlias="Map2" />

</td>

</tr>

<tr>

</tr>

</table>

</td>

<cc1:MapControl ID="MainMap" runat="server" Height="600px" Width="600px" MapAlias="Map1"/></td><td></td></tr>

<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>

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' 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"); }

}

代码完毕！

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：MapXtreme2005 Web页面上用鼠标中间键控制地图缩放

下一篇：正则表达式基础

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

用MapXtreme2005V6.6在webapp中实现鹰眼

用MapXtreme2005V6.6在webapp中实现鹰眼

51CTO博客