发布WFS矢量地图
OGC WFS协议定义了地图客户端查询和传送矢量数据的方法,在查询、分析、动态绘图等实际应用中非常有用。MapServer支持OGC WFS 1.0.0和1.1.0规范。
重新定义一个Mapfile文件,命名为ext2.map,内容如下:
MAP
NAME "vector"
SHAPEPATH "I://cn_data"
FONTSET fonts.txt
IMAGECOLOR 255 255 255
IMAGETYPE agg
SIZE 800 600
STATUS ON
UNITS DD
EXTENT 115.275 39.2204 117.475 40.9462
OUTPUTFORMAT
NAME agg
DRIVER AGG/PNG
IMAGEMODE RGB
FORMATOPTION "INTERLACE=false"
MIMETYPE "image/png"
END
PROJECTION
"init=epsg:4326"
END
WEB
METADATA
"wms_title" "road wms"
"wfs_title" "road wfs"
"wms_onlineresource" "http://192.98.151.23/cgi-bin/mapserv.exe?" #mapserver服务器的url
"wms_srs" "EPSG:4326" #地图坐标系
END
END
LAYER
NAME "road"
METADATA
"wms_title" "road"
"wfs_title" "road"
"wms_srs" "EPSG:4326" #图层坐标系
"gml_include_items" "all"
"gml_featureid" "id" #必须指定id
END
STATUS ON
DATA "roa_4m.shp"
TYPE line
DUMP TRUE
CLASS
STYLE
COLOR "#00FF00"
END
END
END
END
该文件中有两组METADATA标签,是WFS(WMS) Server所需要的,分别是MAP的METADATA标签和LAYER的METADATA标签。
前者是针对整个地图的全局定义,后者是每个图层的元数据定义。
保存Mapfile文件,打开浏览器进行测试
http://192.98.151.23/cgi-bin/mapserv.exe?map=I:/cn_data/ext2.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetCapabilities
正常情况下,可以看到以下返回信息
<WFS_Capabilities version="1.0.0" updateSequence="0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-capabilities.xsd">
<!--
MapServer version 5.2.1 OUTPUT=GIF OUTPUT=PNG OUTPUT=JPEG OUTPUT=WBMP OUTPUT=PDF OUTPUT=SWF OUTPUT=SVG SUPPORTS=PROJ SUPPORTS=AGG SUPPORTS=FREETYPE SUPPORTS=ICONV SUPPORTS=FRIBIDI SUPPORTS=WMS_SERVER SUPPORTS=WMS_CLIENT SUPPORTS=WFS_SERVER SUPPORTS=WFS_CLIENT SUPPORTS=WCS_SERVER SUPPORTS=SOS_SERVER SUPPORTS=FASTCGI SUPPORTS=THREADS SUPPORTS=GEOS SUPPORTS=RGBA_PNG INPUT=JPEG INPUT=POSTGIS INPUT=ORACLESPATIAL INPUT=OGR INPUT=GDAL INPUT=SHAPEFILE
-->
<Service>
<Name>MapServer WFS</Name>
<Title>road wfs</Title>
<OnlineResource>
http://192.98.151.23/cgi-bin/mapserv.exe?map=I:/cn_data/ext2.map&
</OnlineResource>
</Service>
<Capability>
<Request>
<GetCapabilities>
<DCPType>
<HTTP>
<Get onlineResource="http://192.98.151.23/cgi-bin/mapserv.exe?map=I:/cn_data/ext2.map&"/>
</HTTP>
</DCPType>
<DCPType>
<HTTP>
<Post onlineResource="http://192.98.151.23/cgi-bin/mapserv.exe?map=I:/cn_data/ext2.map&"/>
</HTTP>
</DCPType>
</GetCapabilities>
<DescribeFeatureType>
<SchemaDescriptionLanguage>
<XMLSCHEMA/>
</SchemaDescriptionLanguage>
<DCPType>
<HTTP>
<Get onlineResource="http://192.98.151.23/cgi-bin/mapserv.exe?map=I:/cn_data/ext2.map&"/>
</HTTP>
</DCPType>
<DCPType>
<HTTP>
<Post onlineResource="http://192.98.151.23/cgi-bin/mapserv.exe?map=I:/cn_data/ext2.map&"/>
</HTTP>
</DCPType>
</DescribeFeatureType>
<GetFeature>
<ResultFormat>
<GML2/>
</ResultFormat>
<DCPType>
<HTTP>
<Get onlineResource="http://192.98.151.23/cgi-bin/mapserv.exe?map=I:/cn_data/ext2.map&"/>
</HTTP>
</DCPType>
<DCPType>
<HTTP>
<Post onlineResource="http://192.98.151.23/cgi-bin/mapserv.exe?map=I:/cn_data/ext2.map&"/>
</HTTP>
</DCPType>
</GetFeature>
</Request>
</Capability>
<FeatureTypeList>
<Operations>
<Query/>
</Operations>
<FeatureType>
<Name>road</Name>
<Title>road</Title>
<SRS>EPSG:4326</SRS>
<LatLongBoundingBox minx="80.3869" miny="18.2823" maxx="132.515" maxy="49.6272"/>
</FeatureType>
</FeatureTypeList>
<ogc:Filter_Capabilities>
<ogc:Spatial_Capabilities>
<ogc:Spatial_Operators>
<ogc:Equals/>
<ogc:Disjoint/>
<ogc:Touches/>
<ogc:Within/>
<ogc:Overlaps/>
<ogc:Crosses/>
<ogc:Intersect/>
<ogc:Contains/>
<ogc:DWithin/>
<ogc:BBOX/>
</ogc:Spatial_Operators>
</ogc:Spatial_Capabilities>
<ogc:Scalar_Capabilities>
<ogc:Logical_Operators/>
<ogc:Comparison_Operators>
<ogc:Simple_Comparisons/>
<ogc:Like/>
<ogc:Between/>
</ogc:Comparison_Operators>
</ogc:Scalar_Capabilities>
</ogc:Filter_Capabilities>
</WFS_Capabilities>
在OpenLayers中加载WFS图层
OpenLayers是一个功能强大的Web地图客户端引擎。
接下来,我们利用OpenLayers的OpenLayers.Protocol.WFS类,显示刚才发布的WFS图层,代码如下
var protocol = OpenLayers.Protocol.WFS({
url: "http://192.98.151.23/cgi-bin/mapserv.exe?map=I:/cn_data/ext2.map&", //mapserver地图服务器的url,加上mapfi了文件的路径
featureType: "road", //layer的名称
srsName: "EPSG:4326", //layer的坐标系
geometryName: "msGeometry", //geometry字段的名称
featurePrefix: "ms"
});
以下是全部javascript代码:
window.onload = function() {
var map = new OpenLayers.Map('mapdiv', {
projection: "EPSG:4326",
units: "degree"
});
var roads = new OpenLayers.Layer.WMS("road", "http://192.98.151.23/cgi-bin/mapserv.exe?map=I:/cn_data/ext2.map&", {
layers: 'road',
transparent: 'true',
format: 'image/png'
}, {
isBaseLayer: false,
visibility: true,
buffer: 0
});
var empty = new OpenLayers.Layer("empty", {
isBaseLayer: true
});
var select = new OpenLayers.Layer.Vector("Selection", {
styleMap: new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"]),
displayInLayerSwitcher: false
});
var hover = new OpenLayers.Layer.Vector("Hover", {
displayInLayerSwitcher: false
});
map.addLayers([roads, hover, select, empty]);
var protocol = OpenLayers.Protocol.WFS({
url: "http://192.98.151.23/cgi-bin/mapserv.exe?map=I:/cn_data/ext2.map&",
featureType: "road",
srsName: "EPSG:4326",
geometryName: "msGeometry",
featurePrefix: "ms"
});
var control = new OpenLayers.Control.GetFeature({
protocol: protocol,
box: true,
hover: true,
multipleKey: "shiftKey",
toggleKey: "ctrlKey"
});
control.events.register("featureselected", this, function(e){
select.addFeatures([e.feature]);
});
control.events.register("featureunselected", this, function(e){
select.removeFeatures([e.feature]);
});
control.events.register("hoverfeature", this, function(e){
hover.addFeatures([e.feature]);
});
control.events.register("outfeature", this, function(e){
hover.removeFeatures([e.feature]);
});
map.addControl(control);
control.activate();
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
if (!map.getCenter()) {
map.zoomToMaxExtent();
}
}
在浏览器中运行html页面,国道数据将以矢量方式传送到客户端,由openlayers动态绘制,鼠标移动到道路上或者选中道路,道路将实时改变颜色,在Web上实现与传统桌面GIS应用类似的体验效果。
posted on 2010-12-01 15:00
天狼 阅读(2511)
评论(0) 编辑 收藏