从GIS地图到前端页面展示-简述（QGIS+GeoServer+Tomcat+OpenLayers）
一、QGIS部分
QGIS中文教程链接
网易云课堂QGIS入门教程
根据上面的学习就差不多了，我根据视频教程学习，用QGIS绘制了一张地图，最后会生成shp（图层），gpkg（包），sld（样式）文件。
二、GeoServer+Tomcat部分
1、从网上下载geoserver.war包（我的版本是2.13.4），并将其放置tomcat中webapps文件夹下（这里我用的是tomcat8，jdk8），并启动Tomcat。
2、访问localhost:8080/geoserver，用户名/密码为admin/geoserver。
3、首先我们添加一个自己的工作区，之后添加的图层、样式都可以放在这个工作区中。
4、接下来我们就可以添加图层，首先点击左侧的数据存储–>添加新的数据存储，在这里我们可以选择GeoPackage（通过.gpkg文件添加）
通过Shapefile（通过.shp文件添加）来添加图层。
保存后对图层进行发布。
5、发布完成之后，即可在Layer Preview中查看对应的图层，进入之后点击对应图层的OpenLayers，查看图层。
6、这时的图层的样式是初始的样式，所以就需要我们引入QGIS中的样式。首先在QGIS中将图层的样式保存下来，保存为SLD文件，之后在GeoServer左侧Styles中添加新的样式。
7、在图层中引入样式，进入图层的编辑界面，选择发布，在下面的Default Style中选择我们添加的样式。
8、当我们多个图层需要同时查看时，我们就可以在图层组中去添加所有图层，然后去展示这个图层组。
下面是我预览的效果图。
三、OpenLayers部分
我想做的功能是，点击地图上的标点，弹出标点信息，是通过鼠标经过标点时获取经纬度（可在数据库中记录标点的经纬度信息），点击时进行判断并弹出信息。
OpenLayers API
下面是我的代码，引用了ol.js，ol.css，jquery.js。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="ol.css" type="text/css">
<style>
.map {
height: 480px;
width: 90%;
}
</style>
<script src="ol.js"></script>
<script src="jquery-2.1.0.min.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<div id="mouse-position"></div>
<form>
<label>Projection </label>
<select id="projection">
<option value="EPSG:4326">EPSG:4326</option>
<option value="EPSG:3857">EPSG:3857</option>
</select>
<label>Precision </label>
<input id="precision" type="number" min="0" max="12" value="4"/>
</form>
<script type="text/javascript">
//console.log(ol);
var mousePositionControl = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:4326',
// comment the following two lines to have the mouse position
// be placed within the map.
className: 'custom-mouse-position',
target: document.getElementById('mouse-position'),
undefinedHTML: ' '
});
var map = new ol.Map({
controls: ol.control.defaults().extend([mousePositionControl]),
layers: [
new ol.layer.Tile({
//source: new ol.source.OSM()
visible: true,
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/beijing/wms', //geoserver图层地图
params: {
'VERSION': '1.3.0',
'tiled': true,
'STYLES': '',
'LAYERS': 'beijing:beijing', //图层名
//'FORMAT': 'application/openlayers2',
//'BBOX':[118, 39.5, 118, 39.5]
},
serverType:'geoserver' //服务器类型
})
})
],
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center: [116.4,40.2],
zoom: 9
})
});
var projectionSelect = document.getElementById('projection');
projectionSelect.addEventListener('change', function(event) {
mousePositionControl.setProjection(event.target.value);
});
var precisionInput = document.getElementById('precision');
precisionInput.addEventListener('change', function(event) {
var format = ol.coordinate.createStringXY(event.target.valueAsNumber);
mousePositionControl.setCoordinateFormat(format);
});
$("#map").click(function(){
var pos=$("#mouse-position").text();
if(pos!=""){
var x=pos.split(",")[0];
var y=pos.split(",")[1];
for(var i=0;i<posArr.length;i++){
console.log(x-posArr[i][0]);
console.log(y-posArr[i][1]);
if(x-posArr[i][0]<0.05&&x-posArr[i][0]>-0.05){
if(y-posArr[i][1]<0.05&&y-posArr[i][1]>-0.05){
alert(posArr[i][2]);
break;
}
}
}
}
})
var posArr=[
[116.57,40.97,'喇叭沟门国家森林公园'],
[116.61,40.56,'琦峰山国家森林公园'],
[116.71,40.55,'云蒙山国家森林公园'],
[116.78,40.52,'五座楼森林公园'],
[116.26,40.44,'莲花山森林公园'],
[116.00,40.33,'八达岭国家森林公园'],
[116.40,40.32,'大杨山国家森林公园'],
[117.00,40.28,'丫吉山森林公园'],
[117.25,40.28,'黄松峪国家森林公园'],
[116.28,40.26,'蟒山国家森林公园'],
[116.436,40.246,'静之湖森林公园']
]
</script>
</body>
</html>
下图是网页效果图，点击云蒙山的标点，弹出信息。
转载自：https://blog.csdn.net/dj295102400/article/details/86712020
