基于PostGIS实现本地矢量切片服务,通过mapboxgl来进行服务渲染

2024-07-14 13:21| 来源: 网络整理| 查看: 265

在PG支持ST_AsMVT函数之前，如果要从PostGIS中生成矢量切片，需要借助地图服务软件来进行服务发布，如：GeoServer。从PostGIS2.4.0及以上版本后，可以使用ST_AsMVT聚合函数将基于MapBox VectorTile坐标空间的几何图形转换为MapBox VectorTile二进制矢量切片，从而实现不需要地图服务软件就能进行地图加载的功能。所需软件

postgresqlpostgis 软件安装：略。(本文在具备postgresql、postgis软件环境下进行编写)。具体软件安装步骤，参考：https://www.cnblogs.com/alunzuishuai/p/16344904.html 导入数据：安装PostGIS后会提供一个数据导入工具，可以将shapefile数据导入到指定数据库中。选择PostGIS Shapefile Import工具 ,输入用户密码，数据库地址，连接数据库，导入数据。在这里插入图片描述

连接成功之后点击 Add File 导入shapefile文件到数据库。注意：1.文件名和文件路径不要是中文，否则导入可能会失败。 2.将SRID编码设置为4326。在这里插入图片描述

服务端实现： Dirt-Simple PostGIS HTTP API 介绍： Dirt-Simple PostGIS HTTP API 是一种向应用程序公开地理空间功能的简单方法。它通过 HTTP 接受简单的请求，并将 JSON、JSONP 或 protobuf（Mapbox Vector Tile）返回给请求者。仓库地址：https://github.com/tobinbradley/dirt-simple-postgis-http-api，下载后安装依赖并运行。修改config目录中index.json文件，将db改为本地postgresql数据库地址在这里插入图片描述

修改前： “db”: “postgres://user:password@server/database”, 修改后： “db”: “postgres://postgres:123456@localhost:5432/test”,

使用npm run start 运行程序，访问localhost:3000查看API文档在这里插入图片描述其中 /v1/mvt/{table}/{z}/{x}/{y} 就是生成矢量切片服务所用到的api 前端实现：前端使用mapboxgl来进行服务渲染。注意：矢量切片数据源的路径，参考api。示例：‘http://127.0.0.1:3000/v1/mvt/fxq_hxd_tzq_pg/{z}/{x}/{y}?geom_column=geom’ 如我这示例中要加载 fxq_hxd_tzq_pg 图层

Display a map on a webpage body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } mapboxgl.accessToken = '你的token'; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/mapbox/streets-v11', // style URL center: [104.44406, 30.30933], zoom: 12, hash: true, maxZoom: 30 }); map.on('load', function() { map.addLayer({ id: 'fxq_hxd_tzq_pg', source: { type: 'vector', tiles: ['http://127.0.0.1:3000/v1/mvt/fxq_hxd_tzq_pg/{z}/{x}/{y}?geom_column=geom'], }, 'source-layer': 'fxq_hxd_tzq_pg', type: 'fill', paint: { 'fill-color': '#088', 'fill-outline-color': 'rgb(215,25,28)' } }) }); **加载效果：**

本文整理转载来自：https://zhuanlan.zhihu.com/p/349849542?utm_id=0

【本文地址】

公司简介

联系我们