geoserver配合openlayers框架加载地图

蔚落 2022-09-12 04:41 308阅读 0赞

geoserver地图服务器如果搭建成功，那么会有很多图层示例。这些图层可以用作练手示例。在实际工作中，可能需要我们自己设计地图，自己发布，然后使用。

这里以[上一篇][Link 1]最后发布的中国地图为例，采用openlayers框架加载地图。

这里需要我们下载[openlayers][]框架，这个是一个js地图引擎框架，可以很方便的与geoserver提供的地图服务配合使用，而且geoserver中本身也是支持openlayers格式。

下载后的文件，我们要使用到的是一个是ol.css样式，再一个就是ol.js文件。

我们可以在图层预览菜单中看到，我们所要使用的地图：

![2021092021301482.png][]

我们点击表格后面的OpenLayers连接，会弹出一个新的tab标签页，里面显示的地址如下：

http://localhost:8080/geoserver/chinamap/wms?
    service=WMS&version=1.1.0&request=GetMap&layers=chinamap%3Achina&bbox=73.49896240234375%2C3
    .833843469619751%2C135.08738708496094%2C53.55849838256836&width=768&height=620&srs=EPSG%3A4
    326&styles=&format=application/openlayers

这个地址中的信息，我们在做地图的时候要使用到。url参数中有一个bbox是表示边界的，参数经过转码了，所以看得不是很清楚，具体应该是：

bbox= 73.49896240234375,

3.833843469619751,

135.08738708496094,

53.55849838256836

这几个值，正好是地图左下角，右上角的经纬度坐标。

show me the code:

<!doctype html>
    <html>
      <head>
    	<meta charset="utf-8"/>
    	<title>openlayers</title>
    	<link rel="stylesheet" href="v6.7.0/css/ol.css" type="text/css" />
    	<style>
    		html,body{margin:0;padding:0;}
    		.map{
    			height:768px;
    			width:100%;
    		}
    		h2{background:#ddd;margin:0;}
    	</style>
    	<script type="text/javascript" src="v6.7.0/build/ol.js"></script>
      </head>
      <body>
    	<h2>chinamap</h2>
    	<div id="map" class="map"></div>
    	<script>
    		window.onload = function(){
    		  var layer = [
    			new ol.layer.Tile({
    				extent:[
    					73.49896240234375,
    					3.833843469619751,
    					135.08738708496094,
    					53.55849838256836
    				],
    				source: new ol.source.TileWMS({
    					url:'http://localhost:8080/geoserver/chinamap/wms',
    					params:{
    						LAYERS:'chinamap:china',
    						TILED:true
    					},
    					serverType:'geoserver',
    					transition: 0
    				})
    			})
    		  ]
    		  
    		  var map = new ol.Map({
    			layers:layer,
    			target:'map',
    			view : new ol.View({
    				projection:'EPSG:4326',
    				center:[115,39],
    				zoom:4
    			})
    		  })
    		}
    	</script>
      </body>
    </html>

这里是单页面应用，直接开启一个http server就可以访问。

看效果：    ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbHVmZnk1NDU5_size_20_color_FFFFFF_t_70_g_se_x_16][]

这个是一个简单的openlayers框架应用，如今在项目中，一般是结合其他框架比如vue，可以直接npm install ol就可以安装openlayers相关依赖了。

[Link 1]: https://blog.csdn.net/feinifi/article/details/120388885
[openlayers]: https://openlayers.org/download/
[2021092021301482.png]: /images/20220828/da647ff8a7e74dc09b82e4d7287816b3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbHVmZnk1NDU5_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c1b057f40a2c4c7f8ae69cfb8f463db3.png