Openlayers2图层加载(二)加载矢量图层

加载矢量图层文件

通过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代码


<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>Documenttitle>
	<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>

结果
Openlayers2图层加载(二)加载矢量图层_第1张图片

你可能感兴趣的:(OpenLayers2笔记)