3.4. MapServer交互:图层控制¶
作者:卜坤
更新时间:2022-10/7
3.4.1. 如何控制层¶
能够打开和关闭地图层是Web地图应用程序的标准功能,有许多方法可以使用表单对象作为控件来实现这一点。可以使用下拉框/菜单、复选框和/或单选按钮。在本例中,您将看到如何使用复选框和拖放框实现层选择。
下面是对应的Mapfile:
1MAP
2 IMAGETYPE "PNG"
3 EXTENT -180 -90 180 90
4 SIZE 600 300
5 SHAPEPATH "/gdata"
6 IMAGECOLOR 255 255 255
7 FONTSET "../fonts/fonts.list"
8 PROJECTION
9 "init=epsg:4326"
10 END
11 TEMPLATEPATTERN "tmpl-*"
12 WEB
13 TEMPLATE "to be replaced by map_web_template variable in section2.html"
14 IMAGEPATH "/owg/ms_tmp/"
15 IMAGEURL "/ms_tmp/"
16 METADATA
17 "wms_title" "WMS Demo Server"
18 "wms_onlineresource" "http://192.168.4.211/cgi-bin/mapserv?map=/mstu/htdocs/example2.map&"
19 "wms_srs" "EPSG:3857 EPSG:4326"
20 END
21 END
22 LAYER
23 NAME "land"
24 DATA "land_shallow_topo_8192.tif"
25 STATUS OFF
26 TYPE RASTER
27 END
28 LAYER
29 NAME "topo"
30 TYPE RASTER
31 CONNECTIONTYPE WMS
32 CONNECTION "http://wcs.osgeo.cn:8088/service?"
33 METADATA
34 "wms_srs" "EPSG:4326"
35 "wms_name" "maplet_i887"
36 "wms_server_version" "1.1.1"
37 "wms_format" "image/jpeg"
38 END
39 PROJECTION
40 "init=epsg:4326"
41 END
42 END
43 LAYER
44 NAME "states_poly"
45 DATA "wcountry.shp"
46 STATUS OFF
47 TYPE POLYGON
48 LABELITEM "NAME"
49 CLASS
50 NAME "States"
51 STYLE
52 COLOR 232 232 232
53 END
54 END
55 END
56 LAYER
57 NAME "states_line"
58 DATA "wcountry.shp"
59 STATUS OFF
60 TYPE LINE
61 CLASS
62 NAME "State Boundary"
63 STYLE
64 COLOR 132 132 32
65 END
66 END
67 END
68 LAYER
69 NAME "wriver"
70 DATA "wriver.shp"
71 STATUS OFF
72 TYPE LINE
73 CLASS
74 NAME "World River"
75 STYLE
76 COLOR 0 0 255
77 END
78 END
79 END
80 LAYER
81 NAME "wroads"
82 DATA "wroads.shp"
83 STATUS OFF
84 TYPE LINE
85 CLASS
86 NAME "World Road"
87 STYLE
88 COLOR 100 200 100
89 END
90 END
91 END
92END
请注意图层 STATUS
是如何更改为 OFF
的,除了“States”多边形背景。州背景是默认的,所以地图在没有打开任何层的情况下绘制时,总是会有一些东西。应用程序的用户应该能够控制打开或关闭哪些层。
如果查看以下内容,将会了解MapServ如何打开/关闭这些层:
<form method="get" action="/cgi-bin/mapserv" role="form">
<fieldset>
<legend>Layer control form</legend>
<br>
<!-- The following two variables are user defined variables.
MapServer will pass its value to the HTML template if the
proper tags are found, in square brackets "[]" -->
<input type="hidden" name="root" value="/owg">
<input type="hidden" name="program" value="/cgi-bin/mapserv">
<!-- The map and layer variables are internal MapServer variables.
They are required by the mapping application. -->
<input type="hidden" name="map" value="/owg/mfu3.map">
<input type="hidden" name="layer" value="states_poly">
<input type="hidden" name="zoom" value="0">
<!-- The map_web_template variable will replace the TEMPLATE
parameter in the WEB object of the MAP file... -->
<div class="col-sm-12">
<div class="col-sm-3">
<select name="map_web" class="form-control">
<option value="template tmpl-example-u3.html">Layer control</option>
</select>
</div>
<div class="col-sm-2">
<input type="submit" name="submit" value="Open the tutorial" class="btn btn-primary">
</div>
</div>
</fieldset>
</form>
3.4.2. 打开和关闭地图图层¶
可以通过以下链接直接打开演示:
<a href="/cgi-bin/mapserv?map=/owg/mfu3.map&layer=states_line&zoom=0&mode=browse&root=/mstuto&program=/cgi-bin/mapserv&map_web=template+tmpl-example-u3.html"
target="_blank">Open layer control page</a>
<hr/>
下面显示了一个表单提交,各种参数通过隐藏的 input 控制力。效果同上:
<form method="get" action="/cgi-bin/mapserv" role="form">
<fieldset>
<legend>Layer control form</legend>
<br>
<!-- The following two variables are user defined variables.
MapServer will pass its value to the HTML template if the
proper tags are found, in square brackets "[]" -->
<input type="hidden" name="root" value="/owg">
<input type="hidden" name="program" value="/cgi-bin/mapserv">
<!-- The map and layer variables are internal MapServer variables.
They are required by the mapping application. -->
<input type="hidden" name="map" value="/owg/mfu3.map">
<input type="hidden" name="layer" value="states_poly">
<input type="hidden" name="zoom" value="0">
<!-- The map_web_template variable will replace the TEMPLATE
parameter in the WEB object of the MAP file... -->
<div class="col-sm-12">
<div class="col-sm-3">
<select name="map_web" class="form-control">
<option value="template tmpl-example-u3.html">Layer control</option>
</select>
</div>
<div class="col-sm-2">
<input type="submit" name="submit" value="Open the tutorial" class="btn btn-primary">
</div>
</div>
</fieldset>
</form>