您现在的位置:首页 >> 前端 >> 内容

Leaflet加载GeoServer发布的WMTS地图服务(代码实例)

时间:2018/6/26 16:05:13 点击:

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

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( "https://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,
    }
   );

最终结果如下所示:

Leaflet加载GeoServer发布的WMTS地图服务(代码实例)

Tags:LE EA AF FL 
作者:网络 来源:GISuuser的博