首先看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. 2018-8-10-WPF-修改按钮按下的颜色

    title author date CreateTime categories WPF 修改按钮按下的颜色 lindexi 2018-08-10 19:16:53 +0800 2018-03-15 2 ...

  2. 数据节点Datanodes

  3. laravel5.4 前后台未登陆，跳转到各自的页面

    https://www.imooc.com/wenda/detail/378208?t=266634 laravel我做了前后台登陆,后台未登录跳转到前台登陆页面了. 我想让后台未登入跳转到后台登陆页 ...

  4. angular安装应用

    首先你要有node 和npm 全局安装angular    npm install -g @angular/cli 安装一个angular项目     ng new 项目名称 cd进入新建的项目 跑页 ...

  5. [kuangbin带你飞]专题九 连通图D - Network POJ - 3694

    这道题其实也非常简单,只是在求割边及其个数的情况下,每次往里面加入新的边,并再次计算割边的个数. 我们用tarjan可以求出原图的桥以及个数,当然我们不能暴力加边,然后求解,那么如何求呢??? 其实非 ...

  6. 认识一下ES6的Reflect和Proxy

    Reflect Reflect要替代Object的很多方法, 将Object对象一些明显属于言内部的方法放到了Reflect对象上,有13个方法 Reflect.apply(target, thisA ...

  7. jieba中文分词源码分析（四）

    一.未登录词问题在jieba中文分词的第一节曾提到未登录词问题 中文分词的难点 分词规范,词的定义还不明确 (<统计自然语言处理>宗成庆)歧义切分问题,交集型切分问题,多义组合型切分歧义等 ...

  8. java抽象类的体现-模板模式

    抽象类是多个具体子类抽象出来的父类,具有高层次的抽象性;以该抽象类作为子类的模板可以避免子类设计的随意性; 抽象类的体现主要就是模板模式设计,抽象类作为多个子类的通用模板,子类在抽象类的基础上进行拓展 ...

  9. C# 输出文件夹下的所有文件

    问题:如何输出给定文件夹目录下面的所有文件的名称? C#代码: using System; using System.IO; namespace MyTest { public class Progr ...

  10. 2018-9-2-WPF-开发自动删除软件

    title author date CreateTime categories WPF 开发自动删除软件 lindexi 2018-09-02 14:51:48 +0800 2018-08-09 09 ...