MapServer+OpenLayers5+Vue实现栅格图层数据查询

MapServer与OpenLayers集成

最新推荐文章于 2025-04-29 08:53:48 发布

原创

最新推荐文章于 2025-04-29 08:53:48 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue #服务器

本文介绍如何使用MapServer发布地图服务，并通过OpenLayers进行栅格数据查询与展示。涵盖Mapfile配置、HTML模板构建、OpenLayers交互逻辑及查询结果显示。

0、先上效果图

1、Mapserver基础与配置

【注意：以下内容默认已经安装了MapServer4.0及以上版本，Web GIS使用Openlayers5作为请求和地图渲染库，ol-ext作为弹窗UI】

1.1、MapServer基础

MapServer是一个流行的开源项目，其目的是能够通过网络服务发布用户自定义的地图[1]。

支持显示和查询多种栅格、矢量数据格式；
能够在各种操作系统上运行(Windows, Linux, Mac OS X等)；
支持流行的脚本语言和开发环境(PHP、Python、Perl、Ruby、Java、.NET)；
动态投影；
高质量渲染；
等；

在其最基本的形式中，MapServer是一个在Web服务器上非活动的CGI程序。当一个请求被发送到MapServer时，它使用在请求URL和Mapfile中传递的信息来创建被请求映射的图像。请求也可能返回图例、比例条、参考地图和以CGI变量传递的值的图像。（前端请求常用的方式）

当然，MapServer也可以通过MapScript脚本语言或templating进行扩展和定制，可以构建它来支持许多不同的矢量和栅格输入数据格式，并且可以生成多种输出格式。大多数预编译的MapServer发行版都包含了大部分MapServer的特性。（有兴趣请到官网查看）

1.2、MapServer前端请求准备

Mapfile：Mapfile文件包含了对应地理数据在MapServer的配置，包括渲染配置和查询配置等，用于告诉MapServer能对里面涉及的地理数据进行什么样的操作[1]。一份Mapfile中能够定义多个地理数据图层，类似于ArcGIS的*.mxd文件。

地理数据：MapServer会通过Mapfile中定义的图层(Layer)的路径读取实际的地理数据，因此，在Mapfile中定义的图层都是需要有实际数据存在，否则会导致MapServer读取数据失败。

HTML页面：MapServer内部提供了默认的HTML页面，当进行查询时，MapServer会将查询到的结果放在HTML页面中返回。当然，用户也可以自己定义符合自己要求的HTML页面。对于查询数据属性而言，HTML页面是必须存在，否则无法触发MapServer的查询机制。

MapServer CGI：有了前面三类材料，前端进行查询还需要一个通用接口，这个接口称为公共网关接口(Common Gateway Interface，CGI)，是Web 服务器运行时外部程序的规范，按CGI 编写的程序可以扩展服务器功能。CGI 应用程序(MapServer CGI程序名为mapserv)能与浏览器进行交互，还可通过数据API与数据库服务器等外部数据源进行通信，从数据库服务器中获取数据[2]。格式化为HTML文档后，发送给浏览器，也可以将从浏览器获得的数据放到数据库中。MapServer CGI一般通过表单提交，参数较多，目前常用方法是通过OpenLayers封装的方法获取对应的URL[10]。

Web服务器：要使得MapServer查询能够通过网络访问，计算机中还需要有一个公有IP地址和配置Web服务访问。

1.3、单个栅格图层Mapfile构建