核心提示: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, } );
最终结果如下所示: