用MapXtreme2005V6.6在webapp中实现鹰眼

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

posted @ 2012-08-30 21:55 雪藩阅读(192) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

用MapXtreme2005V6.6在webapp中实现鹰眼

公告