Geowebcache发布WMTS服务

标签： Geoserver 分类： Gis 创建时间：2020-03-11 06:45:48 更新时间：2025-01-17 10:39:22

前言

在很久以前,自己写过一篇文章就是Geowebcache发布WMTS服务的文章，现在都忘了，一起放在了csdn,百度文库,用word写的，现在拿出来在自己的博客中重写一遍。

参考文章：
1.使用GeoServer（GeoWebCache插件）发布ArcGIS切片地图
2.GeoServer 发布ArcGIS切片数据
3.GeoServer发布ArcgisServer切片，GeoWebCache插件。 (这篇文章进行了描述如何发布ArcGIS切片)
4.GeoServer中GeoWebCache(GWC)的使用

1.切片

首先，就是用Geoserver或者是GeoWebcahe进行切片，谷歌上很多文章。不会的话可以打开这里,说的非常详细了。

参考文章:
1.GeoWebCache的使用和配置

2.查看服务信息

打开这个 Geowebcache 页面

看看WMTS这个文档，可以下载下来看看，里面定义了坐标系和图层，

调用WMTS服务时主要是使用里面的东西。

3.预览

切完片之后，预览。

4.调试

可以打开firebug等调试工具，可以看见，就算切片之后，还是调用的是WMS服务，只不过，这时候的WMS服务不在是动态切片来的，而是直接调用了你已经切好的切片了。

5.WMTS调用

到这里就完成了，发布切片服务，如果有强迫症的，非得要用WMTS服务方式调用，其实不需要专门的发布WMTS服务了，只要将上面的WMS服务地址，用WMTS服务的Rest服务风格的地址调用就好 例如: http://192.168.9.26:8080/geowebcache/service/wmts?layer=img%20states&style=default&tilematrixset=EPSG%3A4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=EPSG:4326:1&TileCol=0&TileRow=0

当然，这是Geowebcache，如果是没有独立安装Geowebcache,那就是 ....gwc/service/wmts?.... 这样的了。

6.ArcGIS API 示例

(5) 用ArcGIS API for javascrip 调用没有什么问题，用官网的例子，改改地址就好。

下面是我写的代码，以前可以运行来着，现在能不能行，全靠运气了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>OpenGeo WMTS Service</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
   </style>
    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      require([
        "dojo/_base/declare",
        "esri/map",
        "esri/layers/WMTSLayer",
        "esri/layers/TiledMapServiceLayer",
        "esri/geometry/Extent",
        "esri/SpatialReference",
        "esri/layers/TileInfo",
        "dojo/domReady!"
      ], function (declare, Map, WMTSLayer, TiledMapServiceLayer, Extent, SpatialReference, TileInfo){

        // Create ogc.WMTSLayer custom layer
        var CustomWMTSLayer = declare([TiledMapServiceLayer], {
          declaredClass: "ogc.WMTSLayer",
          constructor: function (){
            this.copyright = '<a href="http://v2.suite.opengeo.org/geoserver/gwc/service/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities">WMTS</a> served by <a href="http://opengeo.org/">OpenGeo</a>';
            this.version = "1.0.0";
            this.identifier = "img states";
            this.imageFormat = "image/png";
            this.tileMatrixSet = "EPSG:4326";
            this.spatialReference = new SpatialReference({wkid: 4326});
            this.initialExtent = new Extent(-180.0,-90.0,180.0,90.0, this.spatialReference);
            this.fullExtent = new Extent(-180.0,-90.0,180.0,90.0, this.spatialReference);
            //
            this.tileInfo = new TileInfo({
              "dpi": "90.71428571427429",
              "format": "image/png",
              "compressionQuality": 0,
              "spatialReference": {
                "wkid": "4326"
              },
              "rows": 256,
              "cols": 256,
              "origin": {
                "x": -180.0,
                "y": 90.0
              },

               "lods": [
					{ "level": 0, "resolution": 0.703125, "scale": 295497593.05875 },

					{ "level": 1, "resolution": 0.3515625, "scale": 147748796.529375 },

					{ "level": 2, "resolution": 0.17578125, "scale": 73874398.264688 },

					{ "level": 3, "resolution": 0.087890625, "scale": 36937199.132344 },

					{ "level": 4, "resolution": 0.0439453125, "scale": 18468599.566172 },

					{ "level": 5, "resolution": 0.02197265625, "scale": 9234299.783086 },

					{ "level": 6, "resolution": 0.010986328125, "scale": 4617149.891543 },

					{ "level": 7, "resolution": 0.0054931640625, "scale": 2308574.945771 },

					{ "level": 8, "resolution": 0.00274658203125, "scale": 1154287.472886 },

					{ "level": 9, "resolution": 0.001373291015625, "scale": 577143.736443 },

					{ "level": 10, "resolution": 0.0006866455078125, "scale": 288571.86822143558 },

					{ "level": 11, "resolution": 0.00034332275390625, "scale": 144285.93411071779 },

					{ "level": 12, "resolution": 0.000171661376953125, "scale": 72142.967055358895 },

					{ "level": 13, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447 },

					{ "level": 14, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724 },

					{ "level": 15, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 },

					{ "level": 16, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 },

					{ "level": 17, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655 }]
				});

				this.loaded = true;

				this.onLoad(this);
			},

			getTileUrl: function (level, row, col) {
				var levelMap = "";
				levelMap = "http://localhost:8080/geowebcache/service/wmts" + "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile"

					+ "&LAYER=img states" + "&STYLE=_null" + "&FORMAT=image/png" + "&TILEMATRIXSET=EPSG:4326"

					+ "&TILEMATRIX=EPSG:4326:" + level + "&TILEROW=" + row + "&TILECOL=" + col;
				return levelMap;
			}
        });

        var map = new Map("map", {
          //basemap: "streets",
          center: [-97.19961,33.15156],
          zoom: 5
        });

        // add WMTS layer http://v2.suite.opengeo.org/geoserver/gwc/service/wmts
        var customWMTSLayer = new CustomWMTSLayer();
        map.addLayer(customWMTSLayer);
      });
    </script>
  </head>
  <body class="claro">
    <div id="map"></div>
  </body>
</html>
参考文章:
1.arcgis wmts 和天地图 服务叠加的偏移问题解决

7.Openlayers 示例

但是用openlayers调用，瓦片的请求地址 http://192.168.9.26:8080/geowebcache/service/wmts?layer=img%20states&style=default&tilematrixset=EPSG%3A4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=1&TileCol=0&TileRow=0,示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
  <head>
    <title>openlayers3加载本地WMTS</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css" type="text/css">
    <script src="./openlayers/ol.js"></script>
  </head>
  <style type="text/css">
	#map{
		position:absolute;
		width:100%;
		height:100%;
		overflow:hidden;
		left:0;
		top:0;
	}
  </style>
  <body>
    <div id="map" class="map"></div>
    <script>
	  var projection = ol.proj.get('EPSG:4326');
      var projectionExtent = projection.getExtent();
      var size = ol.extent.getWidth(projectionExtent) / 256;
      var resolutions = new Array(14);
      var matrixIds = new Array(14);
      for (var z = 0; z < 14; ++z) {
        // generate resolutions and matrixIds arrays for this WMTS
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
      }
	  function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regex = new RegExp("[\\?&amp;|&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search.replace("&amp;","&"));
        return results == null ? "" : decodeURIComponent(results[1]);
	  }
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.WMTS({
              url: 'http://192.168.9.26:8080/geoserver/gwc/service/wmts',
              layer: 'nurc:Img_Sample',
              matrixSet: 'EPSG:4326',
              format: 'image/png',
              projection: projection,
              tileGrid: new ol.tilegrid.WMTS({
				//extent:[-130.85168,20.7052,-62.0054,54.1141],
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds,
				minZoom:1
              }),
              style: 'raster',
			  tileLoadFunction:function(imageTile, src){
				var TileMatrix=getParameterByName(src);
				var src1=src.substring(0,src.indexOf("TileMatrix")+11);
				var src2=src.substring(src.indexOf("TileMatrix")+11,src.length);
				src=src1+"EPSG:4326:"+src2;
				imageTile.getImage().src=src;
			  },
              wrapX: false
            })
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),
        view: new ol.View({
          center: [-97.19961,33.15156],
		  projection:projection,
          zoom: 4
        })
      });
    </script>
  </body>
</html>
参考文章:
1.关于openlayers加载arcgis wmts服务问题记录 需要根据ScaleDenominator(比例尺分母)去计算对应级别下的resolution.
2.记一次 CesiumJS 中非 4326/3857 WMTS 数据的加载

问题

(1) InvalidParameterValue:Unknown TILEMATRIX 1
在使用openlayer调用的时候，出现了这个问题。

【解决方法】
看这个地址中TileMatrix后面是1，其实是EGPS:4326:1,为了解决这个问题，我想的是像下面这样,修改代码：

把调用地址之间强制加上EGPS:4326:1,这样就不会有问题了，效果图:

**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 前言
  2. 2. 1.切片
  3. 3. 2.查看服务信息
  4. 4. 3.预览
  5. 5. 4.调试
  6. 6. 5.WMTS调用
  7. 7. 6.ArcGIS API 示例
  8. 8. 7.Openlayers 示例
    1. 8.1. 问题
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文