当前位置：首页 > news >正文

OpenLayers 加载Geoserver WMTS服务

news 2025/6/13 18:08:42

注：当前使用的是 ol 9.2.4 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

WMTS(网络切片地图服务)作为OGC标准之一，获得了各大地图厂商和许多流行地图库的支持，在WebGIS系统开发生产中具有广泛应用。Geoserver作为开源GIS服务器，由于其具有跨平台、使用方便、支持多数据源、部署简单等特点，受到广大GIS开发者的青睐。本节主要介绍在OpenLayers中如何加载Geoserver WMTS服务。

1. 配置WMTS参数

在OpenLayers加载Geoserver WMTS服务中，有很多参数需要配置，其他参数使用默认值即可。最重要的参数如URL、matrixSet、matrixIds需要查看WMTS文档能力介绍文件。在Geoserver中可通过http://192.168.2.148:8080/geoserver/gwc/service/wmts?service=WMTS&version=1.1.1&request=GetCapabilities地址进行查看。

参数名称	中文	参数值
url	服务地址	http://ip:port/geoserver/gwc/service/wmts
version	WMTS版本	1.1.1（默认值-1.0.0）
style	样式	默认为 ""
format	请求格式	默认为 "image/png"
layer	图层名称	如TDLY_2023
requestEncoding	请求类型	"KVP"或者"REST"
matrixSet	切片网格级	图层网格级名称
projection	地图坐标系
tileGrid-tileSize	切片大小	默认值[256,256]，宽高256个像素
tileGrid-extent	切片图层范围	[xmin,ymin,xmax,ymax]
tileGrid-origin	切片原点	如CGCS2000坐标系为[-180.0, 90.0]
tileGrid-resolutions	分辨率数组	对应级别比例尺的地图分辨率
tileGrid-matrixIds	切片网格级矩阵	切片矩阵集

export function getWMTSOption(options) {const gridsetName = "EPSG:4490_" + options.layerNameconst matrixIds = [];for (let i = 0; i <= 19; ++i) {matrixIds[i] = gridsetName + ":" + i}const wmtsOptions = {url: process.env.VUE_APP_GEOSERVER_URL,version: options.version || '1.0.0',style: options.style || "",format: options.format || 'image/png',layer: options.layerName,layerName: options.layerName,requestEncoding: options.requestEncoding || 'KVP',matrixSet: gridsetName,projection: projection,tileGrid: new TWMTS({tileSize: [256,256],extent: [-180.0,-90,180,90.0],origin: [-180.0, 90.0],resolutions: resolutions,matrixIds: matrixIds}),wrapX: false}return wmtsOptions
}

2. 添加WMTS图层

创建WMTS数据源，将数据源添加到Tile切片图层中。

/*** @description：添加Geoserver地图* @param options：加载图层参数*/
export function addGeoServerLayer(options,map = window._map){const paramsData = getWMTSOption(options)const WMTSSource = new WMTS(paramsData)const WMTSLayer = new Tile({source: WMTSSource,wrapX: false,isBaseMap: options.isBaseMap,layerId: options.layerId,layerName: options.layerName})// WMTSLayer.setOpacity(0.85)map.addLayer(WMTSLayer)return WMTSLayer
}

3. 优化请求图层

如图，随着地图缩放或移动时候，请求的图层经常会出现404，对于这些无效请求，在一定程度上会影响地图加载的速度，影响性能（当然，其实也感觉不到这种不良影响）。但是，作为一个程序员，是不能忍受出现红点点的，解决办法也很简单，只需要在图层请求参数中设置extent为图层范围即可

tileGrid: new TWMTS({tileSize: [256,256],extent: [xmin,ymin,xmax,ymax],origin: [-180.0, 90.0],resolutions: resolutions,matrixIds: matrixIds
}),

4. 完整代码

import WMTS from "ol/source/WMTS";
import TWMTS from "ol/tilegrid/WMTS";
import TileGrid from 'ol/tilegrid/TileGrid';
import OlSRS from "@/utils/OpenLayers/olSRS";
import Tile from "ol/layer/Tile";
import GeoJSON from "ol/format/GeoJSON";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";/*** @description：获取WMTS图层参数* @param options* @returns {format: string, version: string, layer: string, noWrap: boolean, requestEncoding: string, tilematrixSet: *, layerId: *, tileSize: number, matrixIds: [], attribution: string, style: (*|string), layerName: string, isBaseMap: *}*/
const resolutions = [0.7039144156840451, ...., 2.6852203967439486E-6];
export function getWMTSOption(options) {const gridsetName = "EPSG:4490_" + options.layerNameconst matrixIds = [];for (let i = 0; i <= 19; ++i) {matrixIds[i] = gridsetName + ":" + i}const wmtsOptions = {url: process.env.VUE_APP_GEOSERVER_URL,version: options.version || '1.0.0',style: options.style || "",format: options.format || 'image/png',layer: options.layerName,layerName: options.layerName,requestEncoding: options.requestEncoding || 'KVP',matrixSet: gridsetName,projection: projection,tileGrid: new TWMTS({tileSize: [256,256],extent: [-180.0,-90,180,90.0],origin: [-180.0, 90.0],resolutions: resolutions,matrixIds: matrixIds}),wrapX: false}return wmtsOptions
}/*** @description：添加Geoserver地图* @param options：加载图层参数*/
export function addGeoServerLayer(options,map = window._map){const paramsData = getWMTSOption(options)const WMTSSource = new WMTS(paramsData)const WMTSLayer = new Tile({source: WMTSSource,wrapX: false,isBaseMap: options.isBaseMap,layerId: options.layerId,layerName: options.layerName})// WMTSLayer.setOpacity(0.85)map.addLayer(WMTSLayer)return WMTSLayer
}