HTML图像映射¶
- 作者
David Fawcett
- 联系方式
david.fawcett at gmail.com
- 最后更新
2008-10-08
介绍¶
创建图像映射的shpxy方法使用mapserver查询功能来构建HTML图像映射。就像常规的mapserver查询一样，您发送一个查询请求，mapserver使用模板构建一个HTML块，并将其发送回浏览器。第一个示例演示如何基于点图层构建图像映射。还包括多边形层的示例模板。
Components
映射服务器 Mapfile
查询模板文件
查询头模板
查询页脚模板
Mapfile 层定义¶
下面是一个简单的 Mapfile 作为示例
MAP
NAME "myMapFile
STATUS ON
SIZE 200 200
EXTENT 178784 4804000 772653 5483346
UNITS METERS
STATUS ON
SHAPEPATH "/web/maps/data"
IMAGECOLOR 255 255 255
WEB
IMAGEPATH "/web/maps/tmp/"
IMAGEURL "/maps/tmp/"
END
QUERYMAP
STATUS ON
STYLE NORMAL
END
LAYER
NAME "sites"
STATUS DEFAULT
TYPE point
DATA 'aqiAreas'
TEMPLATE "bodytemplate.html"
HEADER "imapheader.html"
FOOTER "imapfooter.html"
END
END
您可以看到我们有一个带有一个点图层的 Mapfile ，它包含对三个查询模板的引用。
模板¶
在MapServer中，查询头和查询尾只处理一次。在本例中，主查询模板bodytemplate.html将针对查询返回的记录集中的每个记录处理一次。
点图层¶
这是查询头“imapheader.html”。它为HTML图像映射创建了开始标记。
<map id="mymap" name="mymap">
这是查询模板“bodytemplate.html”。它创建HTML图像映射的主体。
<area shape="circle" coords="[shpxy precision=0 proj=image yf=",7" xf=","]" href="http://my.url/mypage.cfm?region=[NAME]" title="[NAME]" alt="[NAME]">
此模板用于为点图层创建圆形图像映射元素。name是数据源中的字段名，在处理模板时，每个记录的name值都会被替换。如果单击元素，则href指定URL链接。当鼠标悬停元素时，title和alt将显示该值。
生成的HTML元素看起来像
<area shape="circle" coords="80,103,7" href="http://my.url/mypage.cfm?region=Northern" >
关键是
coords="[shpxy precision=0 proj=image xf="," yf=",7"]"
在这里，MapServer将替换该查询记录的图像坐标。精度为0时，坐标为整数。
您还可以看到shpxy模板格式选项“xf”和“yf”。xf=“，”告诉mapserver在x坐标后面加一个逗号。yf=“，Y坐标后7”。这样做是为了指定圆的半径为7像素。更多选项可在 Template Reference .
查询页脚模板只是为HTML图像映射添加结束标记
</map>
多边形层¶
这是一个多边形层的查询模板
<area shape="poly" coords="[shpxy precision=0 proj=image]" href="http://my.url/mypage.cfm?ID=[SITE_ID]" title="[NAME]" alt="[NAME]">