發布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
天狼 閱讀(2520)
評論(0) 編輯 收藏