Question

如何使用iClient for JavaScript叠加地图

Answer 1

一．rest + rest
iserver自带的图层叠加范例,就属于这种场景，点击显示源码即可查看，
这里就不列出一一讲解了，注意两点就可以了，一是map的allOverlays属性设置为true;二是一定要使用异步加载的方法，即需要监听地图加载完成的事件，否则会出现两幅地图加载比例尺错乱显示等现象。
二．wmts+rest 、SuperMap Cloud+rest
如果你对wmts服务不太了解，你可以查看这个地址，里面对wmts做了详细的介绍。这里就简单介绍下JavaScript是如何对接的。
这里写图片描述
图层的url、matrixSet、layer、style、matrixIds、resolutions为必设属性. 当matrixIds设置字符串数组时，传入矩阵标识符列表，所设置的各级图层矩阵标识符要求与地图分辨率resolutions一一对应; 当matrixIds设置为对象数组时，此数组应与WMTS capabilities 中声明矩阵的描述一致，对象属性参考matrixIds属性描述。 如果未设置matrixIds，则矩阵标识符（identifier）默认为地图缩放级别的interger值：”0”、”1”、”2”…等。 resolutions属性继承于父类layer， 用户在创建WMTS图层时需要依照服务端出图的标准比例尺集( GlobalCRS84Scale、 GlobalCRS84Pixel、 GoogleCRS84Quad、 GoogleMapsCompatible)设置此属性，否则在出图时可能会出现地图偏差等问题。
下面是初始化wmts的代码片段
//wmts或许所需要的matrixID信息
var matrixIds = [];
for (var i=0; i<15; ++i) {
matrixIds[i] = {identifier:i};
};
//当前图层的分辨率数组信息,和matrixIds一样，需要用户从wmts服务获取并明确设置,resolutions数组和matrixIds数组长度相同
var resolutions = [165664.43905455674,82832.2195272785,41416.10976363925,
20708.054881819593,10354.027440909796,5177.0137204548855,
2588.506860227448,1294.2534301137255,647.1267150568613,
323.5633575284321,161.78167876421546,80.89083938210773,
40.44541969105401,20.222709845526946,10.111354922763473];
//新建wmts图层
layer = new SuperMap.Layer.WMTS({name: "wmts图层",
url: wmtsurl,
layer: "China",
style: "default",
matrixSet: "Custom_China",
format: "image/png",
resolutions:resolutions,
matrixIds:matrixIds,
opacity: 1,
requestEncoding:"KVP"});

你不必填写所有的分辨率，可以自定义缩放级别，但是得保证resolutions数组的值与matrixIds数组中的identifier是一一对应的；同时当你的地图的全幅范围不是默认的全球范围时，需要设置map.maxExtent为相应的值。
下面就是添加rest图层,j代码片段如下：
//实例化rest图层
RestLayer=new SuperMap.Layer.TiledDynamicRESTLayer("REST图层",resturl,{transparent:true},{resolutions:[165664.43905455674,82832.2195272785,41416.10976363925,
20708.054881819593,10354.027440909796,5177.0137204548855,
2588.506860227448,1294.2534301137255,647.1267150568613,
323.5633575284321,161.78167876421546,80.89083938210773,
40.44541969105401,20.222709845526946,10.111354922763473]});
//监听图层信息加载完成事件
RestLayer.events.on({"layerInitialized":addLayer})
}
function addLayer(){
//图层添加并显示指定级别
map.addLayers([layer,RestLayer]);
map.setCenter(new SuperMap.LonLat(0 , 0), 2);
}
可以看出，需要给rest图层设定与wmts对应的resolutions，这样两张地图叠加，就不会产生偏移。效果图如下
这里写图片描述
以此类推，使用超图云地图，天地图以及通过iserver直接发布的ugcv5，smtiles，mbtiles,MongoDB缓存的rest服务叠加自己的矢量地图，由于前两者和wmts一样都属于瓦片地图，有自身的resolutions分辨率数组。因此需要rest图层设置一致的scales或者resolutions。

Answer 2

下面是初始化wmts的代码片段
//wmts或许所需要的matrixID信息
var matrixIds = [];
for (var i=0; i<15; ++i) {
matrixIds[i] = {identifier:i};
};
//当前图层的分辨率数组信息,和matrixIds一样，需要用户从wmts服务获取并明确设置,resolutions数组和matrixIds数组长度相同
var resolutions = [165664.43905455674,82832.2195272785,41416.10976363925,
20708.054881819593,10354.027440909796,5177.0137204548855,
2588.506860227448,1294.2534301137255,647.1267150568613,
323.5633575284321,161.78167876421546,80.89083938210773,
40.44541969105401,20.222709845526946,10.111354922763473];
//新建wmts图层
layer = new SuperMap.Layer.WMTS({name: "wmts图层",
url: wmtsurl,
layer: "China",
style: "default",
matrixSet: "Custom_China",
format: "image/png",
resolutions:resolutions,
matrixIds:matrixIds,
opacity: 1,
requestEncoding:"KVP"});
1234567891011121314151617181920212223

你不必填写所有的分辨率，可以自定义缩放级别，但是得保证resolutions数组的值与matrixIds数组中的identifier是一一对应的；同时当你的地图的全幅范围不是默认的全球范围时，需要设置map.maxExtent为相应的值。
下面就是添加rest图层,j代码片段如下：
//实例化rest图层
RestLayer=new SuperMap.Layer.TiledDynamicRESTLayer("REST图层",resturl,{transparent:true},{resolutions:[165664.43905455674,82832.2195272785,41416.10976363925,
20708.054881819593,10354.027440909796,5177.0137204548855,
2588.506860227448,1294.2534301137255,647.1267150568613,
323.5633575284321,161.78167876421546,80.89083938210773,
40.44541969105401,20.222709845526946,10.111354922763473]});
//监听图层信息加载完成事件
RestLayer.events.on({"layerInitialized":addLayer})

}
function addLayer(){
//图层添加并显示指定级别
map.addLayers([layer,RestLayer]);
map.setCenter(new SuperMap.LonLat(0 , 0), 2);
}123456789101112131415

可以看出，需要给rest图层设定与wmts对应的resolutions，这样两张地图叠加，就不会产生偏移。效果图如下

以此类推，使用超图云地图，天地图以及通过iserver直接发布的ugcv5，smtiles，mbtiles,mongodb缓存的rest服务叠加自己的矢量地图，由于前两者和wmts一样都属于瓦片地图，有自身的resolutions分辨率数组。因此需要rest图层设置一致的scales或者resolutions。