一口气学会发布自己的地图查询系统

最新推荐文章于 2024-04-26 16:47:03 发布

ayo-

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.5k

点赞数 7

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/wsyyccy/article/details/129602293

版权

经过几天的研究，终于把发布地图的全流程理顺了；作为经验分享，也作为避坑指南，特此记录，以下内容单纯个人理解，如有纰漏，欢迎指正。

需求场景：

主要用于与GIS相关领域，实现目标是将自己本地的矢量图形，以web服务的形式发布，在网页上查看浏览，能够与我们常用的百度地图，高德地图等套合叠加，并且能实现数据的查询、定位以及矢量图形的属性查看等功能。

全程涉及到的工具软件和技术：

Geoserver

Qgis

Vue.js

参考文档：

1、GeoServer 基础篇（一）_geoserver功能_zyy_pipi的博客-CSDN博客

2、WMS卫星影像接口说明

3、准备-入门-教程-地图 JS API v2.0 | 高德地图API

4、QGIS中怎样实现数据坐标系转换_qgis坐标系转换_霸道流氓气质的博客-CSDN博客

5、WGS84(GPS)、火星坐标系（GCJ02）、百度地图（BD09）坐标系转换案例教程（附转换工具下载）_51CTO博客_wgs84 火星坐标系

6、wms、wmts、wfs等地图服务区别_wms wmts wfs_二十同学的博客-CSDN博客

最终效果预览：

实现过程：

1、搭建初始地图页面

准备工作

首先，需要搭建一个简单的地图页面作为容器，他的效果就像我们平时查看百度地图的网页，这个基础网页的搭建，可以直接调用大厂提供的在线地图服务，天地图，高德地图，百度地图的开发平台都有官方的开发文档，我们只需要CV就行了。这里我们选择高德地图。

无论使用哪个地图平台的服务，我们都要去注册并申请一个Key，登录高德地图的开放平台，在应用管理里面注册一个Key，平台会给你分配一个key 和安全密钥。

页面容器

钥匙准备好后，再去准备一个html页面。在页面里面加一个id是“container” 的div标签，高度给100%，准备用来展示后面加载的地图，这个“container”是地图加载的时候指定的容器名，两者需要保持一致才能将地图展示出来

引入并加载地图

如果是普通js的方式使用地图，那么直接在页面里引入高德地图的 Loader .js就好了，引入的是网络地址，不需要下载到本地。这个 Loader .js是高德地图的加载器，一切地图的复杂处理都靠他，我们不需要去懂那么多，只需要按照官方文档的指引，复制粘贴。

引入完成后，使用地图加载器，加载一个地图，加载地图的时候需要设置一些初始参数，前两个是必要的的，其余的根据需要设置，当然可以设置的还不止这些

Key: "*******" // 申请好的Web端开发者Key，首次调用 load 时必填

"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

plugins:[] // 需要使用的的插件列表，如比例尺'AMap.Scale'，鹰眼地图，工具条等

viewMode: "2D", // 是否为3D地图模式，打开3D模式比较占用内存，慎用

zoom: 12, // 初始化地图的缩放级别

center: [117.271076, 31.835055], //地图打开的时候中心点坐标合肥

mapStyle: "amap://styles/blue" //地图样式，官方提供了多种渲染风格，我这里选择蓝色

具体如下，可从官方文档直接复制

至此，一个地图页面就完成了，放在浏览器里打开。漂亮！

也可以切换到卫星图模式，不错不错

这是我根据自己需要设置的参数，选择3d模式，渲染风格选择沾点科技感的靛青蓝

2、发布本地矢量数据（Shp格式）

2.1 了解WMS

地图页面制作好了，接下来就是想办法把我们自己的shp文件叠加到地图上。经过查阅高德地图的官方文档，得知高德地图支持叠加符合OGC 标准的第三方图层。包括WMS 标准图层、和WMTS 标准图层等

这时候就需要了解一下OGC 标准的WMS、WMTS 和WFS的概念和用法

具体介绍如下：

WMS

WMS全称是Web Map Service，网络地图服务，它是利用具有地理空间位置信息的数据制作地图，其中将地图定义为地理数据的可视化表现，能够根据用户的请求，返回相应的地图，包括PNG、GIF、JPEG等栅格形式，或者SVG或者WEB CGM等矢量形式。WMS支持HTTP协议，所支持的操作是由URL决定的。

WMS 标准包含三个操作：

GetCapabilities（必须）：获取 WMS 服务的内容与接受的请求。

GetMap（必须）：获取指定地图数据

GetFeatureInfo（可选）：查询特定要素

WMTS

WMTS全称是 Web Map Title Service，提供了一种采用预定义图块方法发布数字地图服务的标准化解决方案。

对比WMS，WMTS弥补了WMS不能提供分块地图的不足。WMS针对提供可定制地图的服务，是一个动态数据或用户定制地图（需结合SLD标准）的理想解决办法。WMTS牺牲了提供定制地图的灵活性，代之以通过提供静态数据（基础地图）来增强伸缩性，这些静态数据的范围框和比例尺被限定在各个图块内。这些固定的图块集使得对WMTS服务的实现可以使用一个仅简单返回已有文件的Web服务器即可，同时使得可以利用一些标准的诸如分布式缓存的网络机制实现伸缩性。

WMTS接口支持的三类资源：

一个服务元数据（ServiceMetadata）资源（面向过程架构风格下对GetCapabilities操作的响应）（服务器方必须实现）。 ServiceMetadata资源描述指定服务器实现的能力和包含的信息。在面向过程的架构风格中该操作也支持客户端与服务器间的标准版本协商。
图块资源（对面向过程架构风格下GetTile操作的响应）（服务器方必须实现）。图块资源表示一个图层的地图表达结果的一小块。
要素信息（FeatureInfo）资源（对面向过程架构风格下GetFeatureInfo操作的响应）（服务器方可选择实现）。该资源提供了图块地图中某一特定像素位置处地物要素的信息，与WMS中GetFeatureInfo操作的行为相似，以文本形式通过提供比如专题属性名称及其取值的方式返回相关信息

WFS:

WFS全称是 Web Feature Service ，网络要素服务，支持用户在分布式的环境下通过HTTP对地理要素进行插入，更新，删除，检索和发现服务。该服务根据HTTP客户请求返回要素级的GML(Geography Markup Language、地理标识语言)数据，并提供对要素的增加、修改、删除等事务操作，是对Web地图服务的进一步深入。WFS通过OGC Filter构造查询条件，支持基于空间几何关系的查询，基于属性域的查询，当然还包括基于空间关系和属性域的共同查询。

支持对地理要素的插入，更新，删除，检索和发现服务。该服务根据HTTP客户请求返回GML(Geography Markup Language、地理标识语言)数据。 WFS对应于常见桌面程序中的条件查询功能，WFS通过OGC Filter构造查询条件，支持基于空间几何关系的查询，基于属性域的查询，当然还包括基于空间关系和属性域的共同查询。

其基础接口是：GetCapabilities，DescribeFeatureType，GetFeature

GetCapabilities返回服务级元数据。

DescribeFeatureType返回要素结构，以便客户端进行查询和其他操作。

GetFeature可根据查询要求返回一个符合GML规范的数据文档。GetFeature是最重要的接口。

其它接口如Transaction 它不仅能提供要素读取，同时支持要素在线编辑和事务处理。
在Web上，WFS的请求不是以SQL实现的，而是通过Filter XML来实现，可扩展性更强。WFS所返回的是查询的结果集，从某种程度上说，区别于WMS的“数据的表现”，WFS的结果集是由完整的Schema定义和约束的结果集，以GML为载体。这个结果集，类似于桌面程序查询结果的数据表。

以上概念介绍都是我复制来的，算是众多解释里面比较简洁清楚得了，但是单看概念还是比较模糊笼统。来简单理解一下，WMS服务就是基于shp数据对外提供一个查询接口。WMTS服务就是对WMS的一个功能增强。至于WFS我们后面再谈。

这里我们使用WMS ，这个服务接口支持：GetCapabilities、 GetMap 、GetFeatureInfo三种请求操作。这里我们只讨论 GetMap。讨论之前首先搞清楚一个问题，打开浏览器监视网络请求不难发现，当地图网页刷新，或者在地图缩放的时候，浏览器就会发送数据请求，请求返回的都是一张张图片。也就是说，其实我们平时打开的网页地图，包括我们上面创建好的那个网页地图，其实都是一张张静态图片拼接形成的，并没有多么高深。了解这个基础上我们再来理解GetMap

WMS服务的GetMap请求能够直接返回shp数据地图图片，包括PNG、GIF、JPEG等栅格形式。这些图片就是用来将shp图形展示在浏览器网页上面的。也就是说，只要有了这个符合OGC 标准的接口，我们，我们就可以直接把他交给高德地图，高德地图就会自动发送GetMap请求，然后将获取到的shp数据生成的图片叠加在原本的高德地图上。

至于实现方法，官方文档介绍如下：只需要在原理地图页面的基础上，增加第三方WMS地图的相关配置就好了，而这个配置需要我们关注的是WMS服务的URL地址，还有请求参数里面的Layers。

好了到这里目标就很清晰了，我们需要自己搭建一个 WMS服务，发布我们的shp数据，然后把服务交给高德地图调用。

2.2 Geoserver发布WMS服务

怎么发布WMS服务呢？这时候就要介绍一下Geoserver了，

GeoServer 是 OpenGIS Web 服务器规范的 J2EE 实现，利用 GeoServer 可以方便的发布地图数据，允许用户对特征数据进行更新、删除、插入操作，通过 GeoServer 可以比较容易的在用户之间迅速共享空间地理信息。GeoServer是社区开源项目，可以直接通过社区网站下载，它允许用户查看和编辑地理空间数据，使用开放地理空间联盟（OGC）提出的开放标准，为地图创建和数据分享提供了强大的便利性。

2.2.1、Geoserver的下载安装

GeoServer 就是一款能实现地图发布的轻量级软件，真的非常不错，开源免费，功能强大，社区更新速度快，学习成本低。下载地址：Download - GeoServer

GeoServer本身就是一个Web服务，官网下载下来war包，后直接放到tomcat里面运行就好了，或者下载图中右上角Windows Installer版本，可在Windows直接运行。启动后，浏览器输入 http://localhost:端口号/geoserver/web/,默认端口号8080，修改端口号在安装目录start.ini文件中修改。

进入GeoServer的web界面登录页，输入账号密码admin/geoserver登录。

到这里本地部署geoserver即算完成！

2.2.2、web页面功能介绍（重点）

进入首页，重点关注左侧数据模块的四个菜单。

1 Layer Preview：

这块主要用于查看自己发布的地图服务信息，这块的地图浏览主要基于openlayers引擎实现

这是一个表格展现方式的布局，第一列Type表示数据的类型，如点线面栅格等等，第二列Title表示图层标题，展示图层的标题名称，第三列Name是图层的名称可以看到他的组成是有规律的，是工作空间名称加上图层名称组成（工作空间是什么呢，我们下面会讲到），这个图层名称一般来说是唯一的，第四列Common Formats是一些通用的格式，如openlayers和GML和KML 都是常用的地图数据输出格式，第五列 All Formats 则表示所有的输出格式，这是一个下拉选项，里面有很多格式（如下图），根据自己的业务需求选择对应的格式即可查看数据。
这里常用的有 wms中的 openlayers png， wfs中的geojson等

2 工作区（workspace）

这块主要是用于管理工作区的，基本的增删改查，这个工作区是干什么的呢？

工作区是一组数据存储区。与命名空间类似，它用于对以某种方式相关的数据进行分组。
通俗点就是创建一个地盘，把你想要归类的图层数据地图数据放到一起方便自己管理。

3 数据存储（Stores）

数据存储功能模块就是用于根据自己的地图数据去关联到我们的geoserver地图服务器，用于读取数据发布地图服务。

4 图层（Layers）

图层作为地图服务最核心的模块，是数据转换成地图服务最重要的部分，一个地图服务可以理解为由一个图层和一个样式组成，有数据源获取到对应的图层再加上对应的样式渲染从而获得一个地图服务。

2.2.3 发布一个地图服务

发布一个地图服务的核心三步：工作区，数据存储，图层

1、添加工作区

                工作区->添加新的工作区->保存
                        Name：MyMap，//工作区名称
                        工作区URI：MyMap //后面请求服务时要用到，最好与工作区名称保持一致

2、数据存储->添加新的数据存储

这一步就是用来链接数据源，支持多种格式。也支持链接数据库。单个数据发布选择shapefile，批量发布选择directory of shapefiles 。这里我推荐选择矢量数据源下的directory of shapefiles

选择本数据源所属的工作区，选择我们刚才创建的工作区。填写数据源名称，选择要发布的shp数据所在目录，选择shp属性的字符编码，（属性包含中文一般都选择UTF-8,不过也要看你的源数据导出的时候选择的编码是不是UTF-8 ，会存在读取属性中文乱码的情况，这个时候可以用Qgis打开数据重新导出，并选择UTF-8 编码）

3、发布图层

上一步点击保存后，就可以看到该数据源目录下存在的所有shp数据，点击图层后面的发布按钮，进行图层发布设置

发布设置需要重点关注发布坐标系和边框，坐标系选择我们发布所需坐标系，边框可直接根据shp数据范围自动计算。先点击从数据中计算获取范围，再点下面的compute from native bounds，最后，点击保存，完成发布。

4、发布图层预览

点击Layer Preview 找到刚才发布的图层名称点击openlayers 则可以看到效果，注意：此时浏览器的网址，就是我们这个WMS服务的GetMap原生请求方式http://localhost:8089/geoserver/myMap/wms?service=WMS&version=1.1.0&request=GetMap&layers=myMap%3AChina&bbox=73.502355%2C3.39716187%2C135.09567%2C53.563269&width=768&height=625&srs=EPSG%3A3857&styles=&format=application/openlayers

3、高德地图与WMS的结合

WMS服务有了，按照我们上面的思路，将地图服务地址加到高德地图上，作为第三方图层引入，按照官方文档，添加第三方图层，添加内容如下

注意： url: "http://localhost:8089/geoserver/myMap/wms" 这个myMap就是WMS创建工作区时候填的 uri

LAYERS: "myMap:SHYQZD_DB", 这个 myMap:SHYQZD_DB 就是我的工作区名和我要叠加的图层名

刷新地图页面，叠加成功

4 坐标系的难题

以上过程完成了本地图形和高德地图的叠加展示，然而实际过程并没有这么顺风顺水。其中遇到的最大的问题就是坐标系的问题。

要解决坐标系的问题，首先要弄清楚几个概念：投影，坐标系，地理坐标系（大地坐标系），投影坐标系，平面坐标系，火星坐标系。对于从事地理行业的人来说，这些词汇经常用到，但是真正完全搞清楚的人估计并不多，包括我自己

4.1问题的发现与分析

当我第一次把数据发布完成之后，并不能成功叠加到高德地图上。只能看到原本的高德地图，而看不到我自己发布的图形，为什么呢。我们从网络请求的角度来思考一下。我们上面说到，浏览器展现出来的地图实际上就是一张张图片组合成的。打开网络请求监视，发现浏览器确实也已经向我们自己的WMS服务地址发送GetMap请求了，但是返回的图片却是透明的，这是什么原因呢，我们来分析一下这个请求：

下表是GetMap请求的请求参数，我们需要重点关注以下参数

REQUEST：请求名称。因为我们发布的WMS服务支持GetCapabilities、 GetMap 、GetFeatureInfo三种请求操作。设为“GetMap”，代表你发送的GetMap请求，

LAYERS：因为我们发布的WMS服务可能包含很多图层，这个参数就是指明你要请求的是哪个图层

BBOX：请求范围。也就是两个坐标点，代表你请求的是哪个坐标范围，要传的是请求范围的左上角和右下角的坐标，返回的就是这两个点形成的矩形内的图片

VERSION	是	请求版本号。当前为1.3.0
REQUEST	是	请求名称。需要设为“GetMap”。
LAYERS	是	图层列表。通过 GetCapability请求获取，例如：FY3D_MERSI或GEOS_IRX。
DATETIME	是	希望获取图层的时间值（世界时）。时次产品以YYYYMMDDhhmm的格式，日产品以YYYYMMDD的格式。
BBOX	是	边界框。表示请求返回图像的范围，该参数的值为半角英文逗号分隔的一串实数，形如“minx,miny,maxx,maxy”，分别代表指定 CRS 下的区域坐标最小 X、最小 Y、最大 X、最大 Y。如果请求包含一个非法的 BBOX，比如最小 X 大于或等于最大 X，或者最小 Y 大于或等于最大 Y 等情况，服务器将抛出一个服务异常。如果请求的 BBOX 所表示范围跟服务元数据中的 “BoundingBox”没有重叠，服务器将返回一个空的内容（一幅空白图）。
WIDTH	是	返回图片的像素宽度。
HEIGHT	是	返回图片的像素高度。
FORMAT	是	返回图片的输出格式。

通过请求参数的分析发现，基本确定造成图片透明的原因就是参数BBOX的参数值不对，浏览器自动发送到请求坐标大致是这个样子【13062248.41927412，3936383.542849678】，而我发布的数据，点坐标这个样子【39545832.601，3642474.854】，很明显，坐标范围差得太远，也就是两者的投影或者坐标系不同。

4.2 坐标转换

通过查阅大量资料文档得知：

1、高德地图调取数据时，传入的坐标点所用的坐标系是投影坐标系EPSG:3857（以米为单位），因此你后台传过来的数据，坐标系也要EPSG:3857，坐标点类似这种【13062248.41927412，3936383.542849678】。

2、但是高德地图展示在页面上面之前，会将投影坐标系转换成地理坐标系（以度为单位），也就是去掉EPSG:3857的投影，变成EPSG:4326，坐标系类似于这种【117.304812,33.281684】，也就是经纬度坐标。

3、高德地图展示在页面上的地图坐标，是在EPSG:4326基础上进行的加密，与EPSG:4326会有各地不同程度的偏移，大概在几百米左右，也就是我们常说的火星坐标系。坐标点也类似于这种【117.304812,33.281684】

而我自己的数据是CGCS2000坐标系，需要进行坐标系的转换。转换软件使用Qgis

下载地址：下载 QGIS

Qgis是一款功能强大的gis软件，能进行各种坐标系和投影的转换，安装Geohey插件后，可以将数据进行火星加密，但是需要注意的是，转换应分多步进行，并且遵循如下顺序， CGCS2000>>EPSG:4326>>火星加密>>EPSG:3857, 因为火星加密过程只能在地理坐标系上操作，而CGCS2000，EPSG:3857都属于投影坐标系。

转换完成后，就得到了经过火星加密的EPSG:3857坐标系的数据。再次发布，可以与高德地图完美套合。

5 图形的查询和定位

地图发布完成了，接下来要实现根据地图属性查询并定位图块。这就要提到WFS服务了，与WMS服务类似，WFS服务也是基于shp数据对外提供一个服务接口，该服务支持GetFeature请求，返回的不再是地图图片，而是shp数据的属性信息以及坐标点信息。请求格式类似这样：

http://127.0.0.1:8089/geoserver/myMap/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=myMap:SHYQZD_DB&maxFeatures=50&outputFormat=application%2Fjson&bbox=13062460.389566144%2C3936385.0952322395%2C13062460.448400201%2C3936385.1540662968

需要注意:

bbox参数是查询的坐标范围

cql_filter参数是属性过滤器，语法规则类似于sql

也就是说，WFS服务，支持根据位置查询图形属性信息，也支持根据某个字段查询符合条件的图形属性信息。而且返回数据格式是json格式，方便查询结果的处理和展示。

那怎么发布WFS服务呢？好消息是：不用重新发布，我们上面发布的wms服务，也提供了WFS服务的功能。

那查询功能的思路就很明确了，在页面上增加一个输入表单，收集查询条件，点击查询按钮后，向WFS服务发送一个请求，将我们在表单输入的查询条件拼接在请求信息上。响应成功后，展示一个结果列表，将返回的属性 json展示在列表里面。

至于定位功能，实际上是利用了高德地图本身提供的画图方法，输入坐标点的数组，调用画图方法，在坐标指定位置添加一个多边形覆盖物。可以设置这个多边形的颜色，透明度，边框颜色等，至于输入坐标，上面说到 WFS服务是可以返回查询图形的点坐标的，因此定位方法就思路清奇了，在结果列表加一个按钮列，点击按钮，调用画图方法，并传入坐标点，即完成了图形的绘制。最后，调用一下setFitView方法，直接将地图视野定位到地图的覆盖物，也就是刚刚画的图形。

地图发布查询系统的核心原理基本也就是这些。至此介绍完毕