Openlayers2图层加载（二）加载矢量图层

最新推荐文章于 2024-11-12 19:00:55 发布

此爱如少年

最新推荐文章于 2024-11-12 19:00:55 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： OpenLayers2笔记文章标签： Openlayers2 GeoJSON layer GIS 地图

本文链接：https://blog.youkuaiyun.com/u012413551/article/details/84145854

OpenLayers2笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用OpenLayers加载GeoJSON矢量图层，包括设置数据源、定义图层投影、制定策略及协议，并展示了一个加载河流矢量数据的具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加载矢量图层文件

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

结果
在这里插入图片描述