OpenLayers开发：调用矢量图层
除栅格数据外，GIS系统中另一类重要的数据类型便是矢量数据。OpenLayers中提供了多种操作矢量数据的方式，可以处理不同数据源、不同协议（HTTP、WFS）、不同格式（GML、KML、GeoJSON、GeoRSS等）的矢量数据。涉及的主要操作类包括OpenLayers.Layer.Vector、OpenLayers.Feature.Vector、OpenLayers.Feature、OpenLayers.Geometry、OpenLayers.Protocol等。
调用GML图层
GeographyMarkup Language (GML)是一个已经被广泛采纳了的OGC标准，采用XML语法来描述地理要素。下面的方法可以从GML文件创建矢量图层。
1.创建HTML文件，引入OpenLayers开发包，插入如下代码：
<!– Map DOM element –>
<div id=”gml”style=”width: 100%; height: 100%;”></div>
2. 接下来，创建地图实例对象，添加图层和相应控件。这里展示了OpenStreetMap的调用方法，实际应用中应按照前面所讨论的方法调用自己的地图。在使用不同的地图作为底图的过程中，应注意区分投影与否，以及不同投影、不同坐标系等空间参考。
<!– The magic comes here–>
<scripttype=”text/javascript”>
//Create the map using the specified DOM element
varmap = new OpenLayers.Map(“gml”);
varlayer = new OpenLayers.Layer.OSM(“OpenStreetMap”);
map.addLayer(layer);
map.addControl(newOpenLayers.Control.LayerSwitcher());
map.setCenter(newOpenLayers.LonLat(0,0), 2);
3.读取GML文件，并转换为矢量图层添加至map中：
map.addLayer(newOpenLayers.Layer.Vector(“Europe (GML)”, {
protocol:new OpenLayers.Protocol.HTTP({
//指向特定GML文件的URL
url:”http://…/…/….gml“,
format:new OpenLayers.Format.GML()
}),
strategies:[new OpenLayers.Strategy.Fixed()]
}));
</script>
KeyholeMarkup Language (KML)是另一种描述地理要素的矢量格式，源自于GoogleMaps，现在也已经变成了OGC的一种标准。
1.创建HTML文件，引入OpenLayers开发包，插入如下代码：
<!– Map DOM element –>
<div id=”kml”style=”width: 100%; height: 100%;”></div>
2. 接下来，创建地图实例对象，添加图层和相应控件。
<!– The magic comes here–>
<scripttype=”text/javascript”>
//Create the map using the specified DOM element
varmap = new OpenLayers.Map(“kml”);
varlayer = new OpenLayers.Layer.OSM(“OpenStreetMap”);
layer.wrapDateLine= false;
map.addLayer(layer);
map.addControl(newOpenLayers.Control.LayerSwitcher());
map.setCenter(newOpenLayers.LonLat(0,0), 2);
3.读取KML文件，并转换为矢量图层添加至map中：
//Global Undersea Fiber Cables
map.addLayer(newOpenLayers.Layer.Vector(“GlobalUndersea Fiber Cables”, {
protocol:new OpenLayers.Protocol.HTTP({
//指向特定KML文件的URL
url:”http:// http://…/…/….kml“,
format:new OpenLayers.Format.KML({
extractStyles:true,
extractAttributes:true
})
}),
strategies:[new OpenLayers.Strategy.Fixed()]
}));
</script>
调用WFS图层
WebFeature Service (WFS)是OGC的另一个标准规范，它规定了地图服务器以统一的方式发布矢量要素，客户端则严格按照该方式获取该矢量要素。实际上是客户端对服务器做了异步的HTTP请求，服务器端则以GML文件的形式返回给客户端，客户端完成对GML文件的解析并生成矢量图层，呈现给用户。
WFS请求过程中应特别注意的是WFS请求可能会导致客户端跨域请求，一般的解决方法是使用服务器端代理，避免由客户端浏览器直接向不同的域做出请求。
以下介绍WFS图层的加载过程。
1.创建HTML文件，引入OpenLayers开发包，插入如下div元素：
<!– Map DOM element –>
<div id=”map”style=”width: 100%; height: 100%;”></div>
2.将proxy.jsp跨域请求代理文件拷贝到项目中，并引用到javascript脚本程序中。
<!– The magic comes here–>
<scripttype=”text/javascript”>
OpenLayers.ProxyHost= “proxy.jsp?url=”; //跨域请求代理文件
3.创建地图实例对象，添加图层和相应控件。
//提供WMS服务的URL
varwmsurl = “http://map.chinalbs.org/beyonserver/gwc/service/wms”;
//定义地图选项
varmapOptions = {
//地图分辨率（以下以度为单位），定义了地图缩放层级
resolutions: [0.703125, 0.3515625,0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625,0.00274658203125, 0.001373291015625, 6.866455078125E-4,
3.4332275390625E-4,1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5,5.364418029785156E-6, 2.682209014892578E-6],
//空间参考，以EPSG代码表示，“EPSG:4326”代表WGS-84地理坐标系
projection: newOpenLayers.Projection(‘EPSG:4326’),
//地图范围
maxExtent: newOpenLayers.Bounds(-180.0, -90.0, 180.0, 90.0),
//可以在以下语句中添加控件
controls: []
};
// 使用指定的文档元素创建map实例对象，这里的”map”就是页面中DIV元素的ID
varmap = new OpenLayers.Map(“map”, mapOptions);
//定义”中国”图层，访问指定的WMSURL，图层或图层组的名字为china，图片格式为png8
var china = new OpenLayers.Layer.WMS(
“中国”,wmsurl,
{
layers: ‘china’,
format: ‘image/png8’
},
{
buffer: 1,
displayOutsideMaxExtent: true,
//设置该图层的显示级别
//maxResolution: 0.703125,
//将该图层设置为基础图层，每个地图窗口中有且仅有一个基础图层
isBaseLayer: true
}
);
//定义”中国注记”图层，图层名字为b0100p014，图片格式为png8
var china_p = new OpenLayers.Layer.WMS(
“中国注记”,wmsurl,
{
LAYERS: ‘beyondb:b0100p014’,
STYLES: ”,
format: ‘image/png8’,
tiled: true
},
{
buffer: 1,
displayOutsideMaxExtent: true,
isBaseLayer: false,
transitionEffect: “none”
//minResolution: 0.00274658203125
}
);
//向map对象中添加以上定义的图层
map.addLayers([china,china_p]);
//设置地图中心和缩放级别
map.setCenter(newOpenLayers.LonLat(116.39, 39.91), 8);
//增加Navigation导航控件，可以随鼠标拖动、滑轮滚动操作地图
map.addControl(newOpenLayers.Control.Navigation());
//增加图层列表控件，用于控制图层显示与隐藏
map.addControl(newOpenLayers.Control.LayerSwitcher());
4.使用WFS协议请求资源，并生成矢量图层，添加到地图。
//实例化OpenLayers.Layer.Vector类
varwfsLayer = new OpenLayers.Layer.Vector(“企业”,{
//WFS请求协议
protocol:new OpenLayers.Protocol.WFS({
//请求资源URL
url:”http://simap.chinalbs.org/beyonserver/beyondb/wfs”,
//图层名称
featureType:”t0703p001″,
//空间参考系统，默认为”EPSG:4326″
srsName: “EPSG:4326”,
//表示地理要素的属性字段名称
geometryName: “the_geom”,
//版本
version: “1.0.0”
}),
//使用OpenLayers.Strategy.BBOX策略，该策略指示该图层随地图窗口的变化而刷新内容
strategies:[new OpenLayers.Strategy.BBOX()]
});
map.addLayer(wfsLayer);
</script>
结果如下图所示：
转载自：https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/46878341.jpg
