Openlayers 中加载渲染 WMTS TMS XYZ WMS WFS 图层

• • 各类图层简介
  • Openlayers 加载 WMTS 图层
  • Openlayers 加载 TMS 图层
  • Openlayers 加载 XYZ 图层
  • Openlayers 加载 WMS 图层
  • Openlayers 加载 WFS 图层
  • 在线示例

在地图工作开发中，经常需要叠加各种图层，有的是公司以往发布的，有的是和其他厂商对接的，还有一些是互联网服务资源。种类太多，就容易弄混，尤其是对刚接触 WebGIS 的人不太友好，这里做个总结，把工作中常用的一些图层叠加方法集中展示一下。

本文主要介绍 Openlayers 中各类图层的添加方法，具体的图层 概念百度直接可以搜到，这里不做过多介绍。

本文包含内容：各类图层简介、Openlayers 加载 WMTS、TMS、XYZ、WMS、WFS 图层。

各类图层简介

这里先放上详细介绍：OGC WebGIS 常用服务标准（WMS/WMTS/TMS/WFS）速查

OGC地图服务的定义[wms，wmts，wfs，tms等]

还有 WMTS、TMS、XYZ 的区别：

TMS, XYZ & WMTS的不同

这个应该是原版，国内很多翻译的：What are the Differences Between TMS, XYZ & WMTS?

还有 WMTS、WMS、WFS 的区别：wms、wmts和wfs的区别

最后稍微总结一下：

WMTS、TMS、XYZ 为静态瓦片，也就是一堆目录为金字塔结构的图片，好处是加载速度快，坏处是更新麻烦、迁移麻烦。

WMS 是动态瓦片，是根据请求参数，后台拿到空间数据之后，依据配置的样式，动态生成的瓦片，好处是可以实时更新数据和样式，坏处是，只能加载不是很大的数据量。

WFS 是矢量数据，一般用于小数据量的查询和编辑，也就是增删改查。

目前互联网地图资源，基本都是标准 WMTS 和 TMS 格式，笔者建议使用 WMTS 格式。

注意：标准 TMS 格式和 XYZ（谷歌）格式的 y 索引是相反的！

Openlayers 加载 WMTS 图层

OCG 标准瓦片图层，目前应用最多的格式，比如天地图各个服务资源。

本文以 geoserver 缓存的 WMTS 图层。

核心代码：

// 加载 WMTS 图层
function WMTS() {// 切片方案，跟 geoserver 对应// 投影坐标系const code = 'EPSG:900913';const projection = ol.proj.get(code);const projectionExtent = projection.getExtent();const size = ol.extent.getWidth(projectionExtent) / 256;const resolutions = new Array(19);const matrixIds = new Array(19);for (let z = 0; z < 19; ++z) {resolutions[z] = size / Math.pow(2, z);matrixIds[z] = code + ':' + z;}// 图层名称const layerName = 'cite:xintai18'// WMTS 资源对象var wmtsSource = new ol.source.WMTS({url: 'http://openlayers.vip/geoserver/gwc/service/wmts',layer: layerName,matrixSet: code,format: 'image/png',projection: projection,tileGrid: new ol.tilegrid.WMTS({origin: ol.extent.getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds,}),wrapX: true,});// WMTS 图层对象var wmtsService = new ol.layer.Tile({source: wmtsSource});clearFunc();map.addLayer(wmtsService);map.getView().fit([104.18060302734375, 30.750732421875, 104.27398681640625, 30.82763671875], map.getSize());
}

Openlayers 加载 TMS 图层

TMS 格式图层应用也非常多，比如现在各个地图下载器都支持 TMS 标准格式。

注意：Openlayers XYZ 资源对象（ol.source.XYZ），默认加载的是谷歌格式，叠加 TMS 图层需要将 y 反转。

需要注意：很多博客中提到 y 的算法是有问题的！！！

比如： let y = Math.pow(2, z) - tileCoord[2] - 1; 和 y= parseInt(String(2 ** z), 10) + y;

解释 y 索引博客（有问题）：Openlayers5.x加载腾讯地图

Openlayers3关于谷歌TMS瓦片和标准TMS瓦片的加载

核心代码：

// 加载 TMS 图层
function TMS() {// 腾讯地图// 注意：y 的方向相反（-y），也可以在 tileUrlFunction 中修改const url = 'http://rt1.map.gtimg.com/realtimerender?x={x}&y={-y}&z={z}&type=vector&style=0';// 自定义下载地图// let url = 'http://openlayers.vip/examples/csdn/ter/{z}/{x}/{-y}.png';const tmsService = new ol.layer.Tile({source: new ol.source.XYZ({minZoom: 1,maxZoom: 7,url: url}),zIndex: 2,});clearFunc();map.addLayer(tmsService);map.getView().setZoom(5);
}

Openlayers 加载 XYZ 图层

XYZ 是谷歌地图格式，跟 TMS 基本一致，只是 y 索引的方向相反。

注意：Openlayers XYZ 资源对象，默认加载的是谷歌格式，不需要调整。

核心代码：

// 加载 XYZ 图层
function XYZ() {// XYZ 图层对象var xyzService = new ol.layer.Tile({source: new ol.source.XYZ({// 高德地图（谷歌 xyz 格式）url: 'http://webst01.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}',}),zIndex: 2,});clearFunc();map.addLayer(xyzService);map.getView().setZoom(5);
}

Openlayers 加载 WMS 图层

对于不是很大数据量 （小于百万级点数据），WMS 还是很合适的，可以根据数据和样式实时变化。

现在比较流行的一种方式是使用 geoserver 来配置发布管理 WMS 图层。

核心代码：

// 加载 WMS 图层
function WMS() {// WMS 图层对象var wmsService = new ol.layer.Tile({source: new ol.source.TileWMS({url: 'http://openlayers.vip/geoserver/cite/wms',params: {'FORMAT': 'image/png','VERSION': '1.1.1',tiled: true,STYLES: '',LAYERS: 'cite:2000', //服务发布的图层名称tilesOrigin: 104.18060302734375 + "," + 30.750732421875}}),zIndex: 2,});clearFunc();map.addLayer(wmsService);map.getView().fit([115.41380999600005, 39.44197808500007, 117.49920000500002, 41.05928408300005], map.getSize());
}

Openlayers 加载 WFS 图层

WFS 矢量数据，在实际开发中，往往不使用 WFS 的方式，而是基于数据库的后台服务进行增删改查操作。

本文以 geoserver 为例。

核心代码：

// 加载 WFS 图层
function WFS() {// WFS 资源对象var vectorSource = new ol.source.Vector({format: new ol.format.GeoJSON(),url: function () {return (// wfs 地址'http://openlayers.vip/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature' +'&typeName=cite%3A2000&maxFeatures=50&outputFormat=application%2Fjson');},strategy: ol.loadingstrategy.bbox,});// WFS 图层对象const vector = new ol.layer.Vector({source: vectorSource,style: defaultStyle,zIndex: 2});clearFunc();map.addLayer(vector);map.getView().fit([115.41380999600005, 39.44197808500007, 117.49920000500002, 41.05928408300005], map.getSize());
}

在线示例

Openlayers 加载 WMTS TMS XYZ WMS WFS 图层：Openlayers ogc layer

参考博客：

What are the Differences Between TMS, XYZ & WMTS?
HSSFCellStyle.ALIGN_CENTER HSSFCellStyle.VERTICAL_CENTER 等爆红的解决办法
TMS和WMTS大概对比（转载）
wms、wmts和wfs的区别
浅谈XYZTiles
TMS和WMTS大概对比（转载）
值得收藏｜基于全球切片解析标准TMS的瓦片规则
Openlayers加载水晶注标准TMS瓦片
openlayers学习（四）加载geoserver发布的wfs图层