gis地图常用的工具：geoserver、openlayers、cesium，为我们初学者学习gis提供的福利

1、geoserver：（底下有个案例说 geoserver+openlayers ）

是 OpenGIS Web 服务器规范的 J2EE 实现，利用 GeoServer 可以方便的发布地图数据，允许用户对特征数据进行更新、删除、插入操作，通过 GeoServer 可以比较容易的在用户之间迅速共享空间地理信息。

官网地址：http://blog.geoserver.org/ （官网地址）

geoserver的安装与使用：https://blog.csdn.net/qq_35732147/article/details/81869864

2、openlayers：（二维地图）：（底下有个案例说 geoserver+openlayers ）

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。

官网地址：https://openlayers.org/

openlayers与 react.js 来配合开发：https://blog.csdn.net/yatsov/article/details/80045090

openlayers与 vue.js 来配合开发：https://blog.csdn.net/xuerwang/article/details/82769871

3、cesium.js：（三维地图）：(这个太复杂了，另写一个来专门说这个吧)

官网地址：http://cesium.marsgis.cn/go.html?id=14

扫描二维码关注公众号，回复： 5828439 查看本文章

---------------------------------------------------------------------------------------------------------------------------------------------------------------

*** 在这里我们在说一下如何用OpenLayers这个js库来结合GeoServer使用来显示二维地图***

第一：从官网下载OpenLayers库

第二：将js与css文件导入到页面中。这里版本为v5.0。

<link rel="stylesheet" href="v5.2.0-dist/ol.css">

<script src="v5.2.0-dist/ol.js"></script>

  第三：定义一个<div>元素作为地图容器，将其id定义为map：

<div id="map"></div>

第四：js代码，可以直接看下面的完整代码

第五：打开geoserver的

第六：打开我们的目标地址

第七：从头部导航栏拿到我们需要的值：

其中：http://192.168.15.98:8082/geoserver/wms 使我们的url：地址；

layers=tasmania：图层名，需要赋值给layer的source的params. LAYERS属性。

http://localhost:9800/geoserver/wms?service=WMS&version=1.1.0&request=GetMap&layers=tasmania&bbox=143.83482400000003%2C-43.648056%2C148.47914100000003%2C-39.573891&width=768&height=673&srs=EPSG%3A4326&format=application/openlayers

这里看下完整代码：

<!DOCTYPE html>
<html>
<head>
	<title>openlayers+geoserver</title>
	<link rel="stylesheet" href="v5.3.0-dist/ol.css">
	<script src="v5.3.0-dist/ol.js"></script>
</head>
<body>
	<div id="map" style="width:1000px;height: 800px;"></div>
</body>
</html>
<script>
	var map = new ol.Map({
		target: 'map',
		view: new ol.View({
			center: ol.proj.fromLonLat([146.8, -42]),  //初始化的位置
			zoom: 8    //图层
		})
	});
 
	var baseSource = new ol.source.TileWMS({
		url: 'http://localhost:9800/geoserver/wms', //改成你的geoserver地址
		params: {
			'LAYERS': 'tasmania',
			'TILED': true
		},
		serverType: 'geoserver'
	});
 
	var baseLayer = new ol.layer.Tile({
		source: baseSource
	});
	
	map.addLayer(baseLayer);
</script>

实现效果-二维的澳大利亚小岛地图：

这样就实现了我们用openlayers来配合geoserver实现的地图效果；

---------------------------------------------------------------------------------------------------------------------------------------------------------------

gis地图常用的工具：geoserver、openlayers、cesium，为我们初学者学习gis提供的福利

猜你喜欢