基于GIS技术的内网离线地图的发布，并实现判断输入经纬度是否在用户绘制图层的二次开发

离线地图的发布，并实现判断输入经纬度是否在用户绘制图层的二次开发"/>

基于GIS技术的内网离线地图的发布，并实现判断输入经纬度是否在用户绘制图层的二次开发

记录一下毕业设计在实验室攻克的技术难点，一方面为了给GIS技术人员在做相关项目的时候提供思路，另一方面也为了方便给实验室学弟学妹做项目的交接。你看到此文章，如果是为了课设，毕设或者是项目，相信你对于一个全新的，未知的领域肯定是像我一开始一样经历了，或者是即将经历诸多困难，屡屡碰壁，感叹到“关山难越，谁悲失路之人”，但是还好我们互联网上有许多分享资源的人可以帮助我们，我也是得到了很多网友的帮助，“萍水相逢,尽是他乡之客” 。

项目背景

为了验证电力设备等信息的坐标准确性，判定是否在一个闭合区域内，电力公司需要一种高效，稳定，安全的坐标位置识别平台软件。传统的基于地图的坐标位置识别方法存在诸多问题，在线识别存在安全问题，可能造成数据泄露，并且电子地图因国家安全考虑做了一定程度的偏移，这些都无法满足电力系统的实际需求。

已经完成的研究工作

离线地图数据源的获取（mbtiles文件格式）、成功发布于服务器、成功引用并且添加图层。

提出一种基于离线地图数据GIS识别算法，利用坐标信息实现闭合区域判断。

详细步骤（一步步来小白都能做到）

地图数据源的获取

这里参考了朱老师提供的方法    GIS技术 离线地图实现  

但是最后发现91地图下载和水经注地图下载很多格式，或者超过一定的级别就要开始收费。于是我四处寻找解决方案，在b站up主GIS小呲花发布的一个视频下找到了下载mbtiles文件的软件：【白嫖福利】离线地图瓦片下载，一键发布服务实现共享，WebGIS神技

windows用户下载图新地球4的链接在这：下载链接

图新地球4的使用文档：使用文档

你可以自己根据需求在左下角搜索框下载自己需要的地图，因为一个市的地图数据量是巨大的，我这里选择mbtiles文件格式现在想想真是幸运可以快速加载

点击这个按钮开始下载

然后选定区域，点击选择面

然后双击蓝色区域，也就是你需要的地区，会跳到如下界面

 

这里我成功加载的地图选择的是mbtiles格式，级别如下

输出投影一定要选择WGS84-WEB墨卡托（软件默认也是这个），下载好后发现文件总是比预期的要小，可能是mbtiles做了压缩，要不然为什么叫“mobile tiles”呢，这也很正常。其实mbtiles文件和sqlite数据库文件本质是一样的。

 

地图发布

我二次开发的总技术栈是 geoserver + openlayers + js 

先介绍geoserver，官网如下：官网链接 ， 官方文档如下：官方文档，可能需要科学上网

点击此链接你可以进入到如下页面，你可以下载发行版或者存档文件（archive）

 因为要做成软件，我下载了Archive文件，也就是war包，其实本质都是一样的，只要能打开它的管理页面就行。这样的好处是可以方便的部署到tomcat服务器上去。你可以参考b站up主 摸鱼专家乖乖 的视频：GeoServer介绍及安装 。

下载tomcat

首先介绍tomcat的安装

首先电脑里面得有java环境，按下win键+r键，输入cmd，按下回车，输入java -version，若出现版本号则说明安装了java：

 若没有，随便搜一下如何下载java的文章，这里不介绍，（如何安装java）

相信你肯定安装了，直接去tomcat官方网站下载二进制文件压缩包，注意看自己的操作系统，点我进去下面下载页面，我这里用的是8.5.87版本

 接着解压到d盘，我的如下：

bin：放置的是Tomcat一些相关的命令，启动的命令（startup）和关闭的命令（shutdown）等等，（有这个文件，我们才可以启动服务器）
conf：（configure）配置文件，（后续配置跨域要用到）
lib：（library）库，依赖的 jar包，我是红色标签
logs：Tomcat 的日志文件
temp：Tomcat的临时文件夹
webapps：可执行的项目。默认作为存放开发项目的目录，（这里等会要用到）
work：存放由 jsp翻译成的 .java源文件以及编译的 .class字节码文件(jsp -->java -->class)

下面配置环境变量

win10 右键此电脑，点击属性，点击高级系统设置

 点击高级，点击环境变量

在下面的系统变量中添加一个系统变量

一开始你没有上图红色中的变量映射，现在按下图添加，变量值也就是你下载解压之后bin文件夹的所在目录，你可以通过复制bin文件夹的位置（也建议这么做肯定不会出错）

然后在Path的变量值中新建一条：【%CATALINA_HOME%\bin】，下图所示：

配置好后，你可以像检测java一样启动看是否可以访问tomcat：win+r，输入cmd，回车，输入startup.bat。你也可以在bin文件夹下面点击startup.bat（Linux下可能叫startup.sh）也行。 

接下来在浏览器上输入http://localhost:8080/  你就可以看到汤姆猫啦。这也表明配置成功。

接着回到下载gerserver的war包的步骤：

 这是我下载好的geoserver的war包，解压后到tomcat的这个目录下，这里注意版本，我建议使用2.23.0，因为后续插件需要一致，如果你怕出错最好按照我的版本来，你也不需要使用最新版本的geoserver

 解压找到这个东东：

 你复制到webapp文件夹下

 然后再次启动tomcat，你会发现启动慢了一点，这是因为要解压geoserver到webapp里面，你可以看到多出了这个文件夹：

 现在可以通过 http://localhost:8080/geoserver/web  

访问到geoserver的界面

 这里介绍一下： 默认的账号是admin，密码是geoserver，点击remember me 记住账号，后面可以选择中文zh，这就是我为什么最后选择了geoserver，界面对国人十分友好。点击存储仓库：

添加新的仓库：

点击后你会发现你的页面不能添加mbtiles地图数据库文件，这是因为geoserver还需要一些插件来支持发布mbtiles文件，下面介绍如何下载相应的jar包：

安装mbtiles发布需要的插件

点击此处进入下载插件界面

进去之后把我框起来的这两个压缩包下载了，然后建议把这个也下载了，点击这里

这是支持wps服务的插件。下载完后，都解压了，你会发现解压的文件夹里面有很多jar包和html文件，我们只需要jar包 。将下载 jar 包拷贝至路径 \webapps\geoserver\WEB-INF\lib 文件夹中。

我这里把完整的路径给你做参考，千万别搞错了，因为tomcat也是基于java写的，你别把包全都复制到它那个前面提到的lib里面了，前面提到的带了红色标签的那个。

粘贴过程中可能会有一些替换提示，不要怕，替换或者跳过都可以我是替换的，我组略的对比了一下二进制文件都是一样的。我下面显示10个是因为我全粘贴上去过，你初次操作可能更少。简单来说就是要有三个集合的全集，而三个集合中有两两交集非空。

 最后你关掉tomcat重新启动，应该进入geoserver界面后点击添加存储可以看到这样的界面，你会发现你多个栅格数据源选项：

 下面介绍如何将前面下载的weihai.mbtiles文件发布成wms服务。

geoserver发布

依次点击左侧工作空间，添加新的工作空间

按下图配置，名字按你喜欢的来，设置为默认工作空间，点击保存。 

点击左侧存储仓库，然后点右边添加存储仓库

 

点 mbtiles，你如果有足够时间去研究一下如何发布IMageMosaic文件，它是由多个GeoTIFF文件以多层缓存的形式发布的，清晰度我看了一下可以商用一点问题都没有，数据源也很好获取，我这有1到18级的数据，研究可行性的话可以找我拿数据。

点击后进入如下画面：红色里面填你下载的mbtiles文件绝对路径。如D:\testOpenlayer\weihai.mbtiles

下一步添加图层，点击图层，添加新的资源

 选择刚刚的创建空间下的仓库：

配置如下：  右边你会发现坐标系下坐标对应有很大出入，这是因为我们需要坐标转换（将球坐标系转换至平面坐标系）

 你也可以查看完整的地图坐标系语法：发现我们需要转成 EPSG 4326 ，点击查找

 

 

 输入4326，点击查找，只会查到一个坐标系：

 点击从数据中计算坐标：

 你会发现东经和北纬对上了：

 点击保存，然后点击发布

 预览图层

一般来说如果你是第一次添加，那么添加的图层会在第一页最下面，或者第二页第一个，你可以看到这里openstreetmap开源组织提供的许多自带的图层，我认为开源是技术发展的第一要义，我们只是在前人的工作上做了简单的二次开发，他们展示了各种种类的demo

比如ne（默认空间下的countries）最左边方框代表这是栅格图源，点和线连成类似N的图形表示那些是矢量图源，有兴趣可以去看看webGIS的相关书籍，预览点击openlayers，

 

 我们关心的是自己的图层：

 

 注意右下角坐标。未正确显示图或显示图但是坐标很大请参考前面步骤排错。

利用OpenLayers在你的前端进行开发

openlayers官网：OpenLayers官网  官方文档 ：OpenLayers官网文档  对英文水平有一定要求。

你也可以通过查看实例代码和效果demo来学习和快速上手，有很多的examples，我一开始没打算使用Openlayers，打算用leaflet的，结果写的代码全报错失败了，好好利用ol的实例代码可以省下很多功夫，建议用较早的比较稳定的版本代码，这些代码写出来要有对图层有一定的理解，什么是地图容器，什么是source，什么是layer。

Tomcat跨域配置

在后续需要引用图层的时候，诸如此类代码：

new ol.layer.Image({source: new ol.source.ImageWMS({ratio: 1,url: 'http://localhost:8080/geoserver/weihai/wms?service=WMS',})
})

你可能是用其他端口或者其他同一内网的计算机访问此服务，所以你必须配置跨域：

    <filter><filter-name>CorsFilter</filter-name><filter-class>org.apache.catalina.filters.CorsFilter</filter-class><init-param><param-name>cors.allowed.origins</param-name><param-value>*</param-value></init-param></filter><filter-mapping><filter-name>CorsFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping>

将Tomcat安装目录下找到conf/web.xml配置文件，在大概589行那里，把

<!-- ==================== Built In Filter Mappings ====================== -->

附近的上述代码解掉注释。如果没有（不太可能），你就加上去。

 至此，你就可以自行用前后端知识进行开发了，下面是一些我的需求下的功能，仅供参考，完全copy用途需先联系得到我同意。

 一些可行的代码

这里展示一些完成的研究功能，如：鼠标悬停显示其所在点的坐标：

 

还有输入经纬度，用鼠标绘制闭合多边形（三边以上都可以），点击确认检测显示是否在区域中，我为了顺便检测正确性，还输出了绘制多边形的形心坐标（centroid）

 最后的版本我因为时间关系，将输入的坐标在地图上有个图层显示，也是openlayers上的一个图标：

 

最后优化与展望

如果需要学习相关GIS技术的视频，我这里推荐我在b站对GIS工程学习的视频

为了更好商业化，我建议使用tiffmosaic格式的地图文件而代替mobiletiles格式的地图文件。