南京汽车 企业 网站建设郑州网站优化推广
注：当前使用的是 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
}
OpenLayers示例数据下载，请回复关键字：ol数据
全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏 + 关注 哦 ！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 !