Openlayers中加载WMTS地图服务，自定义级别、分辨率

最新推荐文章于 2025-06-11 21:01:35 发布

高端客户

最新推荐文章于 2025-06-11 21:01:35 发布

阅读量1.8w

点赞数 11

CC 4.0 BY-SA版权

分类专栏： OpenLayers 文章标签： OpenLayers应用 WMTS 自定义分辨率、级别

本文链接：https://blog.csdn.net/u013240519/article/details/81514029

OpenLayers 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了在OpenLayers3中如何使用自定义分辨率加载地图，包括设置原点、分辨率数组、矩阵标识等关键参数，以及通过WMTS和XYZ两种方式加载图层的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要以下几个参数

origin（原点）
resolutions（分辨率数组）
matrixIds（分辨率对应的级别）
projection（坐标系）
以arcgis server 发布的服务为例，如图

var projection = ol.proj.get("EPSG:4326");
var resolutions = [0.00118973050291514, 5.9486525145757E-4, 2.97432625728785E-4, 1.5228550437313792E-4,7.614275218656896E-5, 3.807137609328448E-5, 1.903568804664224E-5, 9.51784402332112E-6, 4.75892201166056E-6];
var matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8];
var origin=[-400, 400];

openlayers3中可以通过ol.source.WMTS、ol.source.XYZ等方式加载，无论哪一种，都需要根据上述几个参数进行配置，

var tileGrid = new ol.tilegrid.TileGrid({
     origin: origin, //原点（左上角）
     resolutions: resolutions, //分辨率数组
     matrixIds: matrixIds //矩阵标识列表，与地图级数保持一致
}),

然后根据不同的数据源加载方式，设置参数（url、tileGrid、crossOrigin等）

 //通过WMTS加载
 var wmtsLayer = new ol.layer.Tile({
      opacity: 0.7, //图层透明度
      source: new ol.source.WMTS({
        url: 'http://serverIP:6080/arcgis/rest/services/XXX/MapServer/WMTS/', //WMTS服务基地址
        matrixSet: 'EPSG:4326', //投影坐标系设置矩阵
        format: 'image/png', //图片格式
        projection: projection, //数据的投影坐标系
        //瓦片网格对象
        tileGrid: tileGrid,
        style: 'default',
        wrapX: true
      })
    });
map.addLayer(wmtsLayer);

//通过XYZ加载
var xyzLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        crossOrigin: "anonymous",
        projection: "EPSG:4326",
        tileGrid: tileGrid,
        tileUrlFunction: function (tileCoord) {
          var z = tileCoord[0];
          var x = tileCoord[1];
          var y = -tileCoord[2]-1;
          return "http://serverIP:6080/arcgis/rest/services/XXX/MapServer/tile/" + z + "/" + y + "/" +
            x;
        },
        wrapX: true,
      })
    });
 map.addLayer(xyzLayer);