首先看openlayers官网中wmts模块，https://openlayers.org/en/latest/apidoc/module-ol_source_WMTS-WMTS.html，里面的参数看你需要什么。

下面是我的代码

这个是需要地图需要参数，controlId是封装所需要的，而这个layerName对应得就是openlayer的layer字段，url就是openlayers的url字段。

怎么在geoserver中找他们呢？跟着图片来。

选择png后看源码，这个源码也就是openlayer的代码，不会写可以在上面抄写。

这里面会有你想要的，细心的伙伴你会发现，url对应不上，源码中的是../service/wmts,你这样写里面肯定是不行的啊，所以看上面的url,一定是你的域名+端口号+文件路径，到demo前面，

所以最后的路径就是   http://www.***********.com:8080/geoserver/gwc/service/wmts

希望有需要的小伙伴会有那么一丢丢的帮助，我也是初学者为自己记录，请大牛们多多指教。

openLayers中WMTS结合GeoServer呈现瓦片地图的更多相关文章

  1. Geoserver 谷歌瓦片地图的使用 多级发布

    下面,我来介绍一下如何在离线的情况下,在Geoserver 中配置出如同谷歌地图般绚丽的效果. 为了让大家有动力看我我接下来写的东西,我先把结果图给大伙儿展现一下: 正如上图所示,该地图是谷歌第四级的 ...

  2. OpenLayers加载谷歌地球离线瓦片地图

    本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...

  3. 瓦片地图与geoserver发布

    本文主要包括以下内容 TileMill生成Tile影像金字塔(.mbtiles压缩文件) Mbutil(https://github.com/mapbox/mbutil)解压缩 Apache HTTP ...

  4. 使用openlayers 3 在线加载天地图及GeoServer发布的地图

    使用openlayers3来加载天地图卫星图和标注图层,GeoServer发布地图,一并用openlayers测试加载出来,顺便实现了7种地图控件.下面直接贴代码: <!DOCTYPE html ...

  5. OpenLayers加载高德地图离线瓦片地图

    本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...

  6. OpenLayers加载百度离线瓦片地图（完美无偏移）

    本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...

  7. OpenLayers中地图缩放级别的设置方法

    来源于:http://www.cnblogs.com/sailheart/archive/2011/03/15/1984519.html 一.概述 在OpenLayers中,地图必须具有一个缩放级别的 ...

  8. Cocos2d-JS中瓦片地图API

    为了访问瓦片地图,Cocos2d-JS中访问瓦片地图API,主要的类有:TMXTiledMap.TMXLayer和TMXObjectGroup等.1.TMXTiledMapTMXTiledMap是瓦片 ...

  9. OpenLayers学习笔记（一）—在线加载谷歌影像地图&离线加载本地瓦片地图

    实现根据在线离线判断加载地图, 在线加载谷歌影响地图, 离线加载本地瓦片地图 作者: 狐狸家的鱼 Github: 八至 html代码 <div id="map" tabind ...

随机推荐

  1. oracle函数 sys_guid()

    [功能]生产32位的随机数,不过中间包括一些大写的英文字母. [返回]长度为32位的字符串,包括0-9和大写A-F [示例] select sys_guid() from  dual

  2. SLS机器学习最佳实战：日志聚类+异常告警

    1.手中的锤子都有啥? 围绕日志,挖掘其中更大价值,一直是我们团队所关注.在原有日志实时查询基础上,今年SLS在DevOps领域完善了如下功能: 上下文查询 实时Tail和智能聚类,以提高问题调查效率 ...

  3. @hdu - 6372@ sacul

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 定义矩阵 \(A_i\) 是一个大小为 \(p^i*p^i\) ...

  4. SpringBoot 获取properties配置文件的属性

    自定义properties文件获取属性 使用 @ConfigurationProperties((prefix = "demo")) 和 @PropertySource(" ...

  5. LRJ-Example-06-02-Uva514

    #define _CRT_SECURE_NO_WARNINGS #include<cstdio> #include<stack> using namespace std; + ...

  6. 免费淘宝IP地址库简介及PHP/C#调用实例

    https://yq.aliyun.com/ziliao/25800?spm=a2c4e.11155472.0.0.68027abfcpFb7O 摘要: 本文讲的是免费淘宝IP地址库简介及PHP/C# ...

  7. Activity学习（二）：Activity的启动模式（转载）

    在Android中每个界面都是一个Activity,切换界面操作其实是多个不同Activity之间的实例化操作.在Android中Activity的启动模式决定了Activity的启动运行方式. An ...

  8. Laravel 服务提供者实例教程 —— 创建 Service Provider 测试实例

    从某种意义上说,服务提供者有点类似HTTP控制器,HTTP控制器用于为相关路由注册提供统一管理,而服务提供者用于为相关服务容器提供统一绑定场所,此外服务提供者还可以做一些初始化启动操作.Laravel ...

  9. Ant Design的Form组件中FormItem名称相同引起的问题

    1.问题描述 在使用Antd组件Form表单的过程中,会出现FormItem同名的情况,此时要特别注意同名引起的表单行为异常问题,主要表现在以下方面: (1)同名表单项的值共享,并且其中一个的值改变, ...

  10. js基础-原型

    1.定义:我们创建的函数都有一个prototype(原型)属性,该属性是一个对象,          原型模式声明中多了两个属性(自动生成). 构造函数:       function Box(nam ...