加载矢量图层文件
通过WMS请求获取到图层，其实是一张张图片拼在一起的。而矢量图层，是由矢量数据来构造的。OpenLayer是中支持的矢量数据文件格式较多，如GeoJSON、KML、XML等。
以加载GeoJson为例，如下
数据源：GeoJSON文件
示例数据一级河流，命名为river.geosion。
function initMap(){
var map,baseLayer
map = new OpenLayers.Map("map");
baseLayer = new OpenLayers.Layer.WMS(
"basic",
"http://localhost:8080/geoserver/chinaNS/wms",
{
layers: "chinaNS:shengjie"
},
{isBaseLayer:true}
);
var vectorLayer = new OpenLayers.Layer.Vector(
'vector',
{
projection:"EPSG:4326",
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "../data/river.geojson",
format: new OpenLayers.Format.GeoJSON()
})
}
);
map.addLayers([baseLayer,vectorLayer]);
map.setCenter(new OpenLayers.LonLat(108, 34), 4);
}
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="/css/map.css" rel="stylesheet">
<script src="/jquery-2.0.0/jquery.min.js"></script>
<style>
#map{
width: 100%;
height: 768px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="../openlayers2/lib/OpenLayers.js"></script>
<script src="../js/ol2/eg/loadVector.js"></script>
<script>
$(document).ready(function(){
initMap();
})
</script>
</body>
</html>
结果
