OpenLayers学习笔记一——实现WMTS的逐级无缝缩放

OpenLayers学习笔记1——实现WMTS的逐级无缝缩放

在内网部署应用时,将下载的地图发布为WMTS服务,可以提升地图访问速度,并可以通过设置相关参数实现不同地图的无缝缩放(世界---中国----省---市),效果图如下所示:

OpenLayers学习笔记一——实现WMTS的逐级无缝缩放

OpenLayers学习笔记一——实现WMTS的逐级无缝缩放

OpenLayers学习笔记一——实现WMTS的逐级无缝缩放

OpenLayers学习笔记一——实现WMTS的逐级无缝缩放

主要需要设置不同图层的最大和最小分辨率(maxResolution,minResolution)属性,然后通过几次调试以达到最佳效果

代码如下:

 //GSM矢量全球切片
    GSMapEarth = new OpenLayers.Layer.WMTS(
            {
                name: "世界矢量地图",
                url: wmtsUrl,
                layer: layer,
                matrixSet: matrixSet,
                /*   matrixIds: matrixIds,
                 resolutions: resolutions,*/
                // maxScale: 559082264.028718,
                // minScale: 8735660.37544871,
                maxResolution: 156543.033928041,
                minResolution: 2.38865713391176,
                displayInLayerSwitcher: false,
                format: format,
                style: "default",
                opacity: 1,
                isBaseLayer: true,
                tileOrigin: new OpenLayers.LonLat(originX, originY)
            }
    );
    map.addLayer(GSMapEarth);


  //GSM 山东切片地图
    GSMapSD = new OpenLayers.Layer.WMTS(
            {
                name: "山东省矢量地图",
                url: wmtsUrl_GSMSD,
                layer: layer,
                matrixSet: matrixSet,
                /*    matrixIds: matrixIds_GSMQD,
                 resolutions: resolutions_GSMQD,*/
                // maxScale: 8735660.37544871,
                // minScale: 9.55462853564702,
                maxResolution: 1222.99245256282,
                minResolution: 2.38865713391176,
                tileOrigin: new OpenLayers.LonLat(originX, originY),
                format: format,
                opacity: 1,
                style: "default",
                isBaseLayer: false
            }
    );

    //GSM青岛市切片地图服务
    GSMapQD = new OpenLayers.Layer.WMTS(
            {
                name: "青岛市矢量地图",
                url: wmtsUrl_GSMQD,
                layer: layer,
                matrixSet: matrixSet,
                /*    matrixIds: matrixIds_GSMQD,
                 resolutions: resolutions_GSMQD,*/
                // maxScale: 8735660.37544871,
                // minScale: 4265.45916769957,
                maxResolution: 19.1092570712941,
                minResolution: 1.19432856695588,
                tileOrigin: new OpenLayers.LonLat(originX, originY),
                format: format,
                opacity: 1,
                style: "default",
                isBaseLayer: false

            }
    );



WMTS服务参数js文件:

var wmtsUrl = 'http://localhost:9009/arctiler/ogc/services/GSM_Earth/WMTS';
var layer = 'AZDBMap';
var matrixSet = 'AZMap_AZDBMap';
var projection = 'EPSG:102100';
var wkid = 102100;
var dpi = 90.7142857142857;
var format = 'image/png';
var format2 = 'png';
var minx = -20037508.3427892;
var miny = -20037508.3430388;
var maxx = 20037508.3427892;
var maxy = 20037508.3430388;
var minx2 = -180;
var miny2 = -85.05112878;
var maxx2 = 180;
var maxy2 = 85.05112878;
var centerX = 106.8368;
var centerY = 33.231954;
var centerLng = 106.8368;
var centerLat = 33.231954;
var resolutions = [];
var matrixIds = [];
var scales = [];
var layerIds = [];
scales[0] = 559082264.028718;
matrixIds[0] = {identifier: 0};
layerIds[0] = 0;
resolutions[0] = 156543.033928041;
scales[1] = 279541132.014359;
matrixIds[1] = {identifier: 1};
layerIds[1] = 1;
resolutions[1] = 78271.5169640205;
scales[2] = 139770566.007179;
matrixIds[2] = {identifier: 2};
layerIds[2] = 2;
resolutions[2] = 39135.7584820101;
scales[3] = 69885283.0035897;
matrixIds[3] = {identifier: 3};
layerIds[3] = 3;
resolutions[3] = 19567.8792410051;
scales[4] = 34942641.5017949;
matrixIds[4] = {identifier: 4};
layerIds[4] = 4;
resolutions[4] = 9783.93962050257;
scales[5] = 17471320.7508974;
matrixIds[5] = {identifier: 5};
layerIds[5] = 5;
resolutions[5] = 4891.96981025127;
scales[6] = 8735660.37544871;
matrixIds[6] = {identifier: 6};
layerIds[6] = 6;
resolutions[6] = 2445.98490512564;
scales[7] = 4367830.18772436;
matrixIds[7] = {identifier: 7};
layerIds[7] = 7;
resolutions[7] = 1222.99245256282;
var originX = -20037508.3427892;
var originY = 20037508.3430388;