Leaflet加载geowebcache的WMTS服务

本文展示了如何在网页中使用Leaflet的WMTS插件连接GeoWebCache,以及提供了一个实际的代码片段。同时提及了其他可能的选择,如OpenLayers和ESRI-Leaflet库。
摘要由CSDN通过智能技术生成

方法1:leaflet.TileLayer.WMTS插件

插件地址https://github.com/alexandre-melard/leaflet.TileLayer.WMTS
用法示例https://hanbo.blog.csdn.net/article/details/80768710
我的示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_wmtsLayer"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script src="../js/leaflet-tilelayer-wmts.js"></script>
<script type="text/javascript">
    var map = L.map('map', {
        attributionControl: false,
        logoControl: false,
        center: [0, 0],
        zoom: 1,
        minZoom: 0,
        maxZoom: 18,
        crs: L.CRS.EPSG4326,
    });
    //设置坐标系左上角坐标,3857坐标系可以默认不用设置,插件里已默认带有
    const matrixIds = [];
    for (let i = 0; i < 19; ++i) {
        matrixIds[i] = {
            identifier: "" + i,
            topLeftCorner: new L.LatLng(90, -180)
        };
    }
    var ign = new L.TileLayer.WMTS('http://localhost:8090/geowebcache/service/wmts',
        {
            layer: "arcgis_com",
            style: "",
            tilematrixSet: "EPSG:4326_arcgis_com",
            format: "image/jpeg",
            minZoom: 0,
            maxZoom: 5,
            matrixIds: matrixIds,
            attribution: "<a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>&copy; <a href='http://www.ign.fr'>IGN</a>"
        }
    );
    map.addLayer(ign);
</script>
</body>
</html>

再来备份一个“注意事项”示例,满屏图层会覆盖其他图层(纵使顺序调整也没用)。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_wmtsLayer"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script src="../js/leaflet-tilelayer-wmts.js"></script>
<script type="text/javascript">
    var map = L.map('map', {
        attributionControl: false,
        logoControl: false,
        center: [24.5,102.4],
        zoom: 5,
        minZoom: 0,
        maxZoom: 18,
        crs: L.CRS.EPSG4326,
    });
    var url2="https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
    // L.supermap.imageMapLayer(url2).addTo(map);//该方法满屏绘制会覆盖WMTS图层,不要用该方法加载。
    L.supermap.tiledMapLayer(url2).addTo(map);

    //设置坐标系左上角坐标,3857坐标系可以默认不用设置,插件里已默认带有
    const matrixIds = [];
    for (let i = 0; i < 19; ++i) {
        matrixIds[i] = {
            identifier: "" + i,
            topLeftCorner: new L.LatLng(90, -180)
        };
    }
    var ign = new L.TileLayer.WMTS('http://localhost:8888/geowebcache/service/wmts',
        {
            layer: "yunnan4326",
            style: "",
            tilematrixSet: "EPSG:4326_yunnan4326",//EPSG:4326_yunnan4326   "EPSG%3A4326_yunnan4326%3A7"
            format: "image/png",
            minZoom: 5,//避免1级就开始加载,1级没瓦片会疯狂报错。5级才有数据。
            maxZoom: 18,
            matrixIds: matrixIds,
            attribution: "<a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>&copy; <a href='http://www.ign.fr'>IGN</a>"
        }
    );
    map.addLayer(ign);
    L.marker([24.5,102.4]).addTo(map);
    map.on('click',function (e){
        let mzoom=map.getZoom();
        console.log(mzoom)
        console.log(e)
    })
</script>
</body>
</html>

其他方法

leaflet管网用其他插件或者esri-leaflet插件。

OpenLayers加载geowebcache的WMTS服务

https://blog.csdn.net/weixin_40184249/article/details/84615192

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
加载WMTSWeb地图瓦片服务)中的4326坐标系,我们需要使用leaflet库来实现。 首先,我们需要在HTML文件中引入leaflet相关的CSS和JS文件,以及WMTS插件。 ```html <!DOCTYPE html> <html> <head> <title>Leaflet WMTS 4326</title> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet.tilelayer.wmts/dist/leaflet-tilelayer-wmts.js"></script> </head> <body> <div id="map" style="width: 100%; height: 600px;"></div> <script> // 创建地图容器 var map = L.map('map').setView([0, 0], 2); // 创建WMTS图层 var wmtsLayer = L.tileLayer.wmts('https://example.com/wmts', { layer: 'layer_name', style: '', format: 'image/png', tilematrixSet: '4326', attribution: 'Map data © <a href="https://www.example.com">Map Provider</a>', }); // 将WMTS图层添加到地图中 wmtsLayer.addTo(map); </script> </body> </html> ``` 在以上代码中,我们首先创建一个包含id为"map"的div元素,用作地图容器。然后,使用`L.map('map')`创建一个地图对象,并通过`setView([0, 0], 2)`设置地图的初始中心点坐标和缩放级别。 接下来,使用`L.tileLayer.wmts()`创建一个WMTS图层对象。在该函数中,我们需要传入WMTS服务的URL以及相关配置参数。其中,`layer`参数是指WMTS服务中的图层名,`tilematrixSet`参数是指定坐标系为4326,`attribution`参数是指定地图数据的来源。 最后,通过`wmtsLayer.addTo(map)`将WMTS图层添加到地图中。 需要注意的是,以上代码仅为简单示例,实际应用中,你需要根据WMTS服务的具体配置进行相应的调整。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Q行天下

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

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

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

打赏作者

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

抵扣说明:

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

余额充值