ajax和asp.net制作电子地图

最新推荐文章于 2022-04-09 11:40:33 发布

breakboy12

最新推荐文章于 2022-04-09 11:40:33 发布

阅读量1.8k

点赞数

文章标签： asp.net ajax textbox button integer server

本文链接：https://blog.csdn.net/breakboy12/article/details/2064293

版权

Default.aspx.vb
Partial Class eMap_Default
Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Me.IsPostBack = False Then
            '跳到台北的坐标 450,50
            MapGotoXY(450, 50)
        End If
    End Sub

    '将地图移到指定的坐标
    Sub MapGotoXY(ByVal x As String, ByVal y As String)
        Dim n As Integer = My.Computer.Clock.TickCount
        '设置Image1.ImageUrl为GetMap.aspx,
        '请注意参数x,y与width,height
        Me.Image1.ImageUrl = "GetMap.aspx?n=" & n & "&x=" & x & "&y=" & y & "&width=300&height=300"
        Me.txb_x.Text = x
        Me.txb_y.Text = y
        '设置拖拽用的Panel机制
        MakePhantom()
    End Sub

    Sub MapOffsetXY(ByVal x As String, ByVal y As String)
        Dim n As Integer = My.Computer.Clock.TickCount
        Me.Image1.ImageUrl = "GetMap.aspx?n=" & n & "&offsetx=" & x & "&offsety=" & y & "&width=300&height=300"
        Me.txb_x.Text = x
        Me.txb_y.Text = y
        '设置拖拽用的Panel机制
        MakePhantom()
    End Sub

    '输入特定的地名以查询地图
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        'Me.TextBox1.Text --> 用户输入的地名
        If Me.TextBox1.Text = "台北" Then
            MapGotoXY(450, 50)
        End If
        If Me.TextBox1.Text = "新竹" Then
            MapGotoXY(230, 90)
        End If
        If Me.TextBox1.Text = "燕巢" Then
            MapGotoXY(10, 990)
        End If
    End Sub

    '设置拖拽用的Panel机制
    Sub MakePhantom()
        Me.Panel_phantom.Style("filter") = "alpha(opacity=1);"
        Me.Panel_phantom.Style("cursor") = "hand"
        Me.Panel_phantom.Style("position") = "absolute"
        Me.Panel_phantom.Style("left") = "15"
        Me.Panel_phantom.Style("top") = "110"
        Me.Panel_phantom.Attributes("onmousedown") = "_start();"
        Me.Panel_phantom.Attributes("onmouseup") = "_end();"
        Me.Panel_phantom.Attributes("onmouseleave") = "_end();"
        Me.Panel_phantom.Attributes("onmousemove") = "_move();"
    End Sub

    '跳到指定的坐标位置
    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        MapGotoXY(txb_x.Text, txb_y.Text)
    End Sub

    Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        MapOffsetXY(txb_offsetx.Text, txb_offsety.Text)
    End Sub
End Class

-----------------------------------------------------------------
Default.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="eMap_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 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>电子地图</title>
    <script type="text/javascript">
    //位移变量
    var offsetX,offsetY,startX,startY;
    var isMoving;   //开始移动Flag

    function _start(){
        //设置开始移动
        isMoving=true;
        //记录起点
        startX=event.x;
        startY=event.y;
        startY=startY+17;
    }
    function _move(){
        //如果在移动中模式
        if (isMoving==true){
            //移动
            offsetX=event.x-startX;
            offsetY=event.y-startY;
            //设置图片位置
            $get('Image1').style.left=10+(offsetX);
            $get('Image1').style.top=130+(offsetY);
        }
    }
    function _end(){
        //如果在移动中模式
        if (isMoving==true){
            //设置处理完毕
            isMoving=false;
            //计算调整位移
            offsetX=-(event.x-startX);
            offsetY=-(event.y-startY);
            offsetY= offsetY-17;
            //以计算出的位移重新载入地图
            if (offsetX!=0 && offsetY!=0)
            $get('Image1').src='GetMap.aspx?offsetX='+offsetX+'&offsetY='+offsetY+'&width=300&height=300';
            $get('Image1').style.left=10;
            $get('Image1').style.top=110;
        }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
                <br />
                搜索：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="查询" /><br />
                特定坐标： x:<asp:TextBox ID="txb_x" runat="server" Width="32px">450</asp:TextBox>
                y:<asp:TextBox ID="txb_y" runat="server" Width="32px">50</asp:TextBox> <asp:Button
                    ID="Button2" runat="server" OnClick="Button2_Click" Text="跳至" /><br />
                测试用：offsetx:<asp:TextBox ID="txb_offsetx" runat="server" Width="32px">30</asp:TextBox>
                offsety:<asp:TextBox ID="txb_offsety" runat="server" Width="32px">30</asp:TextBox>
                <asp:Button ID="Button3" runat="server" OnClick="Button3_Click" Text="跳至" /> <br />
                <asp:Panel ID="Panel_base" runat="server" Height="300px" Width="300px" BackColor="Blue" style="filter: alpha(opacity=10)" BorderStyle="Dotted" BorderWidth="1px" BorderColor="Red">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <asp:Panel ID="Panel_phantom" runat="server" Height="300px" Width="300px" BackColor="#E0E0E0" style="position:absolute; z-index: 151;">
                            </asp:Panel>

                            <asp:Panel ID="Panel1" runat="server" BackColor="#E0E0E0" Height="300px" Width="300px">
                                <asp:Image ID="Image1" runat="server" Height="300px" Width="300px" style="position: absolute" />
                            </asp:Panel>

                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="Button1" />
                            <asp:AsyncPostBackTrigger ControlID="Button2" />
                            <asp:AsyncPostBackTrigger ControlID="Button3" />
                        </Triggers>
                    </asp:UpdatePanel>
                </asp:Panel>
    </div>
    </form>
</body>
</html>
-------------------------GetMap.aspx

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        '依照传入参数返回图片
        Dim x As Integer = Request.QueryString("x")
        Dim y As Integer = Request.QueryString("y")
        Dim offsetX As Integer = Request.QueryString("offsetX")
        Dim offsetY As Integer = Request.QueryString("offsetY")
        Dim width As Integer = Request.QueryString("width")
        Dim height As Integer = Request.QueryString("height")

        '从图片
        Dim BMP As System.Drawing.Bitmap
        Dim retBMP As System.Drawing.Bitmap
        '读取图片
        BMP = New System.Drawing.Bitmap(System.IO.Path.GetDirectoryName(My.Request.PhysicalPath) & "/tw.jpg")

        If x = 0 And y = 0 And offsetX <> 0 And offsetY <> 0 Then
            x = Session("_LastX") + offsetX
            y = Session("_LastY") + offsetY
        End If
        If x < 1 Then x = 1
        If y < 1 Then y = 1
        If x + width > BMP.Width Then x = BMP.Width - width
        If y + height > BMP.Height Then y = BMP.Height - height

        Session("_LastX") = x
        Session("_LastY") = y

        '设置网页类型
        Context.Response.ContentType = "image/Jpeg"

        '设置截取范围
        Dim rect As New System.Drawing.Rectangle(x, y, width, height)
        '用截取bmp上的某一个范围重新设置retBMP
        retBMP = BMP.Clone(rect, BMP.PixelFormat)

        '处理图形质量
        Dim codecs As System.Drawing.Imaging.ImageCodecInfo() = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders
        Dim ici As System.Drawing.Imaging.ImageCodecInfo = Nothing
        '找出Encoder
        For Each codec As System.Drawing.Imaging.ImageCodecInfo In codecs
            If codec.MimeType = "image/jpeg" Then
                ici = codec
            End If
        Next
        '参数 - 高质量图片
        Dim ep As System.Drawing.Imaging.EncoderParameters = New System.Drawing.Imaging.EncoderParameters
        ep.Param(0) = New System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, CLng(100))
        '存储-高质量
        retBMP.Save(Context.Response.OutputStream, ici, ep)
        '释放
        BMP.Dispose()
        '释放
        retBMP.Dispose()
        '结束
        Context.Response.End()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>未命名页面</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>