场景
GeoServer简介、下载、配置启动、发布shapefile全流程(图文实践)：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/109636080
在上面介绍了geoserver的使用后，怎样通过Openlayers在html中显示地图。
Openlayers
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。
OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机制。
OpenLayers 可以用于开发各类桌面和移动端的WEGIS系统，包括地图显示和地图编辑功能。其最终的开发目标是能够在各种设备和浏览器中显示和管理地图数据。
OpenLayers是一个专为WcbGIS客户端开发提供的JavaScript类库包，用于实现地图数据的网络访问。它访问地理空间数据的方法都符合行业标准，支持各种公开的和私有的数据标
准和资源。OpenLayers采用纯面向对象的JavaScript方式开发，同时借用了Prototype框架和Rico库的一些组件。
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
Openlayers官网
点击右上角的Code-Download进入下载页面
https://openlayers.org/download/#
选择dist版本进行下载
下载之后的内容中有相关的css文件和js文件
然后按照上面的博客启动Geoserver并登陆
然后在Layer Preview中选择一个自带的示例的，这里以Spearfish roads为例，点击其后面的Openlayers按钮
然后会进入地图的预览页面
接下来就是怎样使用Openlayers在html中进行显示这个地图。
新建一个文件夹，文件夹下新建lib,lib下新建ol65目录，并将上面下载的dist中的内容复制进来
然后再建立一个map.html文件
然后在map.html中引入上面lib目录下的css和js文件
<link rel="stylesheet" href="lib/ol65/ol.css" type="text/css"> <script type="text/javascript" src="lib/ol65/ol.js"></script>然后在body中新增一个div并设置其样式
<divid = "map"></div>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>然后找到上面geoserver中预览的页面，右键选择查看网页源代码
然后从网页源代码中抽离出用来显示地图的js代码
然后再对其进行修改
<script type="text/javascript">
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8000/geoserver/sf/wms',
params: {
'FORMAT': "image/jpeg",
'VERSION': '1.1.1',
"STYLES": '',
"LAYERS": 'sf:roads',
"exceptions": 'application/vnd.ogc.se_inimage',
}
})
});
var projection = new ol.proj.Projection({
code: 'EPSG:26713',
units: 'm',
global: false
});
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}).extend([]),
target: 'map',
layers: [
untiled,
],
view: new ol.View({
projection: projection,
})
});
var bounds = [589434.8564686741, 4914006.337837095,
609527.2102150217, 4928063.398014731
];
map.getView().fit(bounds, map.getSize());
</script>注意上面的url其实就是预览地址栏中的前面的部分
然后LAYERS是要和你geoserver中LayersPreview的Name属性对应
完整的map.html示例代码、
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OpenLayers example</title>
<link rel="stylesheet" href="lib/ol65/ol.css" type="text/css">
<style>
html,
body,
#map {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="lib/ol65/ol.js"></script>
<script type="text/javascript">
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8000/geoserver/sf/wms',
params: {
'FORMAT': "image/jpeg",
'VERSION': '1.1.1',
"STYLES": '',
"LAYERS": 'sf:roads',
"exceptions": 'application/vnd.ogc.se_inimage',
}
})
});
var projection = new ol.proj.Projection({
code: 'EPSG:26713',
units: 'm',
global: false
});
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}).extend([]),
target: 'map',
layers: [
untiled,
],
view: new ol.View({
projection: projection,
})
});
var bounds = [589434.8564686741, 4914006.337837095,
609527.2102150217, 4928063.398014731
];
map.getView().fit(bounds, map.getSize());
</script>
</body>
</html>然后在浏览器中打开map.html，查看效果
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136404.html
