如何使用 JSF/Richfaces 渲染带有地图的图像？答案

【问题标题】：How to render an image with map with JSF/Richfaces?如何使用 JSF/Richfaces 渲染带有地图的图像？
【发布时间】：2009-03-19 09:56:16
【问题描述】：

我想使用 JSF / Richfaces 执行以下任务

点击链接 - 我想生成一个带有地图的 PNG 图像（图像的一部分应该是可点击的）并在面板下呈现。

当我生成图像时，我知道需要可点击的图像坐标。所以我可以生成地图。但我想在一个 XHTML 文件下完成。可以rich:paint2d标签接受地图之类的 -

<map name="mapGraph">
    <area coords="754,378 20" href="http://google.com" shape="Circle" alt="Drill Down">
    <area coords="33,439 20" href="http://google.com" shape="Circle" alt="Drill Down">
    <area coords="393,425 20" href="http://google.com" shape="Circle" alt="Drill Down">
    <area coords="573,378 20" href="http://google.com" shape="Circle" alt="Drill Down">
    <area coords="213,407 20" href="http://yahoo.com" shape="Circle" alt="Drill Down">
</map>

【问题讨论】：

标签： jsf map richfaces

【解决方案1】：

没有实现此目的的默认方法。唯一的方法是开发自己的 JSF 自定义组件。我开发了自己的 JSF 标签，例如 <custom:image id = "im1" width="800px" height="400px" useMap="dwMap"/>。 JSF 引擎在找到此标记时 - 使用类似

的地图呈现 html 标记“img”

<img  width="800" border="0" height="400" useMap="#dwMap" src="/imageB94DFA031CA999EE65ED586627F630BE.png"/>
<map name="dwMap"><area coords="735,225 20" shape="Circle" onMouseOver="call('735,225 20')" title="Start Time : 2009-02-16 15:32:48
End Time : 2009-02-16 15:34:59" /><area coords="570,225 20" shape="Circle" onMouseOver="call('570,225 20')" title="Start Time : 2009-02-16 15:32:27
End Time : 2009-02-16 15:32:39" /><area coords="405,237 20" shape="Circle" onMouseOver="call('405,237 20')" title="Start Time : 2009-02-16 15:14:41
End Time : 2009-02-16 15:16:58" /><area coords="241,215 20" shape="Circle" onMouseOver="call('241,215 20')" title="Start Time : 2009-02-16 15:13:50
End Time : 2009-02-16 15:14:00" /><area coords="76,181 20" shape="Circle" onMouseOver="call('76,181 20')" title="Start Time : 2009-02-13 17:57:31
End Time : 2009-02-13 17:58:18" /></map>

虽然在 JSF 中开发一个自定义组件听起来很复杂，但它真的很容易。可以关注 Richard Hightower 的文章“JSF for nonbelievers”，开发自定义组件变得尽可能简单。

【讨论】：