Leaflet加载GeoServer发布的WMTS地图服务

12 篇文章 11 订阅
11 篇文章 2 订阅

       leaflet本身并不支持WMTS服务,需要借助leaflet-tilelayer-wmts插件实现,但是插件是为通用WMTS服务实现的。在使用的过程中出现了无法调用的问题,这里进行了稍微修改。

加载地图

var map = L.map('map', {
    attributionControl: false,
    zoomControl: false,
    measureControl: true,
    center: [21.220817, 109.8864340],
    zoom: 19,
    maxZoom: 40,
    minZoom: 1,
    crs: L.CRS.EPSG4326//设置坐标系4326
});

设置坐标系左上角坐标,3857坐标系可以默认不用设置,插件里已默认带有

var matrixIds = [];
for (var i=0; i<22; ++i) {
  matrixIds[i] = {
    identifier : "" + i,
    topLeftCorner : new L.LatLng(90, -180)
  };
}
加载WMTS地图服务
var ign = new L.TileLayer.WMTS( "http://192.168.1.177:8080/geoserver/gwc/service/wmts" ,//服务地址
    {
        layer: "raster:pingyuan",//图层名称
        tilematrixSet: "EPSG:4326",//GeoServer使用的网格名称
        tileSize : 256,//切片大小
        format: 'image/png',
        maxZoom: 33,
        minZoom: 10,
        matrixIds: matrixIds,
    }
   );

最终结果如下所示:


修改后的插件地址为https://github.com/GISHanBo/leaflet-tilelayer-wmts

  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
好的,我了解了你的问题。使用leaflet.wmts插件加载geoserver发布wmts服务,需要按照以下步骤进行操作: 1. 在 HTML 文件中引入leafletleaflet.wmts插件以及geoserver发布wmts服务的地址,例如: ``` <!DOCTYPE html> <html> <head> <title>Load WMTS service with Leaflet</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" /> <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet.wmts@1.0.2/dist/leaflet-wmts.js"></script> </head> <body> <div id="map"></div> <script> var map = L.map('map').setView([0, 0], 2); var wmtsLayer = L.tileLayer.wmts('http://localhost:8080/geoserver/gwc/service/wmts', { layer: 'workspace:layername', style: '', tilematrixSet: 'EPSG:3857', format: 'image/png', maxZoom: 20, minZoom: 0, attribution: '© <a href="http://www.opengeospatial.org/standards/wmts">OGC WMTS</a> ' + '| © <a href="http://www.openstreetmap.org">OpenStreetMap</a> contributors' }).addTo(map); </script> </body> </html> ``` 2. 在代码中创建一个leaflet地图对象,并设置地图的中心点和缩放级别。 3. 使用leaflet.wmts插件的L.tileLayer.wmts方法创建一个WMTS图层,并指定geoserver发布wmts服务的地址和参数,其中layer参数为geoserver发布的图层名称,tilematrixSet参数为瓦片矩阵集名称,format参数为瓦片格式,maxZoom和minZoom参数为最大和最小缩放级别,attribution参数为图层的属性信息。 4. 将WMTS图层添加到leaflet地图对象中,即可加载geoserver发布wmts服务。 需要注意的是,geoserver发布wmts服务的地址和参数需要根据实际情况进行修改。另外,需要确保geoserver发布wmts服务的地址可以在浏览器中正常访问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GIS开发者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值