Question

我有一个建筑物的地图，我想根据用户输入以编程方式突出显示特定的房间。

如果可能的话，我想从服务器端进行，最终，我希望能够突出显示多个房间。详细说明，此功能适用于展览。用户将查看有关参展商的数据，点击展位，并会看到展厅的地图，并突出显示展位。

我还希望以后能够为参展商启用“书签”，这样我们就可以轻松突出多个展位。

最好的方法是什么？

Answer 1

如果你需要这个客户端，jQuery Map Hilight可能会有你想要的东西。

jQuery Map Hilight

Answer 2

这是最终运作良好的结果。

首先，丑陋（但必要）部分 - 映射所有摊位并存储值。因此，对于booth1，我们将存储我们想要突出显示的区域的四个角点。

在图像上，我们使用普通的asp：image，但将ImageUrl设置为BoothMap.ashx，这是我们设计用于绘制展位位置的处理程序，在查询字符串中的booth位置发送。所以，它可能看起来像......

<asp:Image ID="imgBoothMap" ImageUrl="BoothMap.ashx?ID=A1" runat="server" />

我们的处理程序看起来像这样...

 <%@ WebHandler Language="C#" Class="BoothMap" %>

using System.Drawing;
using System.Drawing.Imaging;
using System.Web;

public class BoothMap : IHttpHandler {

    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "image/jpg";

        //load booth corners
        Point[] points = GetBoothCorners(context.Request.QueryString["ID"]);

        Image curImage = Image.FromFile(@"C:\BoothMap.jpg");
        Graphics g = Graphics.FromImage(curImage);
        Pen transPen = new Pen(Color.FromArgb(128, 132, 112, 255), 10);
        Brush transBrush = new SolidBrush(Color.FromArgb(128, 132, 112, 255));
        g.FillPolygon(transBrush, points);
        curImage.Save(context.Response.OutputStream, ImageFormat.Jpeg);
        g.Dispose();
        curImage.Dispose();
        context.Response.End();
    }

    public bool IsReusable {
        get {
            return true;
        }
    }
}

所有这些都为我们提供了在ASP.Net中突出显示地图位置的框架。如果我们愿意，我们可以轻松修改代码以突出显示地图的多个区域，更改颜色等。

Answer 3

我在这里假设服务器端编程。我只是保存原始图像，没有任何突出显示，也许称为building.jpg。然后我会创建建筑图像的变体，每个房间都突出显示（所以建筑物room1.jpg，building-room2.jpg）等等（使用你最喜欢的图像编辑软件--MSPaint可以正常工作）。然后，您只需将Image控件指向适当的ImageUrl。

将它与ASP.NET 2.0中的Image Map控件结合起来会很有趣，因此用户可以点击他们感兴趣的房间，然后您可以加载突出显示该房间的图像。 / p>

在ASP.Net中突出显示图像上的区域

3 个答案: