从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。

  
     
     
    
    
    
	
	
    
  
  
    
My Map
    

    

    

      Projection 
      
	     EPSG:4326
	     EPSG:3857             
      
      Precision 
      
    
    
  

下图是网页效果图，点击云蒙山的标点，弹出信息。