OpenLayers 加载Geoserver WMTS服务

❝

注：当前使用的是 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	切片网格级矩阵	切片矩阵集

php 复制代码

export function getWMTSOption(options) {
  const gridsetName = "EPSG:4490_" + options.layerName
  const 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切片图层中。

php 复制代码

/**
 * @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为图层范围即可

php 复制代码

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

4. 完整代码

javascript 复制代码

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.layerName
  const 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
}

OpenLayers示例数据下载，请回复关键字：ol数据

全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。

欢迎访问我的博客网站-长谈GIS ：http://shanhaitalk.com

都看到这了，不要忘记点赞、收藏 + 关注哦！

本号不定时更新有关 GIS开发 相关内容，欢迎关注 !