Question

iServer 8c ，js开发，底图为切片，想在底图上加载wms图层。

问题描述：

单独加载底图或wms图层均可显示，但先加载底图后，无法在其上加载wms图层。浏览器不报错。

实现代码：

加载底图：

function init(){
            //初始化地图
            map = new SuperMap.Map("map",{controls:[
                new SuperMap.Control.Navigation() ,
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom()
            ]});
            map.addControl(new SuperMap.Control.MousePosition());
            //初始化图层
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("地图", url,{transparent: true, cacheEnabled:true},{maxResolution:"auto"});
            //监听图层信息加载完成事件
            //layer.events.on({"layerInitialized":addBaseLayer});
            mapDiv=document.getElementById("map");
        }
        //异步加载图层
        function addBaseLayer(){
            map.addLayer(layer);
            //显示地图范围
            map.setCenter(new SuperMap.LonLat(121.63469, 38.91935),8);
        }

加载wms：

function addLayerWms(){
            var wms=new SuperMap.Layer.WMS("WMS1", url1, { layers: "路段面@大连全数据", version: '1.3.0'}, {projection:"EPSG:4326",maxExtent: new SuperMap.Bounds(121.28,38.79 ,121.73,39.09)});
            map.addLayers([wms]);
            map.setCenter(new SuperMap.LonLat(121.63469, 38.91935),8);
            //mapDiv.focus();
        }

单独加载可显示(图片)：

Answer 1

俩图层都加到地图上后，对比俩layer对象的：
dpi
units
resolutions或scales
是否一致
maxExtent是否有冲突，叠加层的地图MaxExtent最好要小于等于底图的范围

另外就是数据问题，这俩图是否真的叠得上？可以在地图1上找一个点，记住它的坐标和位置，然后在地图2上看这个坐标在哪（可以直接在iDesktop打开俩web数据源叠加看看）

Comments

你好，我按照提供的图层叠加的示例实现功能，目前存在如下问题：

1.添加矢量图层，后续会对图层进行查询等操作，应该使用SuperMap.Layer.TiledDynamicRESTLayer还是使用SuperMap.Layer.TiledVectorLayer？

2.单独添加矢量图层，成功添加后，如果不进行地图的平移或缩放操作，后添加的矢量图层无法显示出来，当进行平移或缩放操作后，添加的矢量图层可以较快显示。想问一下图层是否存在刷新或其他操作？

3.超图提供的图层选择控件，功能的实现方式是什么？是控制图层的显隐性吗？我尝试使用layer的setVisibility方法但没有实现，想知道具体使用的是哪个方法？

以下图片是图层添加后，不移动地图及移动地图后的图层的显示情况：

---

1. 查询跟底图的显示无关，互不影响；查询就是发个http请求获得响应结果而已，可以用地图服务或数据服务的查询都行，不加载任何地图也能查询的。

2. iClient js map上添加的layer默认分为baselayer和叠加层，只显示一个baselayer，叠加层可显示任意个（>=0）。来自服务端的图层（要填地图服务地址的图层）默认都是baselayer，可以设置layer.isBaseLayer=false（从父类 SuperMap.Layer 继承的属性，所有layer都是 SuperMap.Layer 的子类）使当做叠加层显示或设置 map.allOverlays=true 使所有图层都当做叠加层；注意，这两种设置不熟悉的情况下建议在构造函数写，见类参考SuperMap.Map类和layer类的Constructor（构造函数）的参数列表，一般是构造函数的最后一个参数对象可以设置此类的属性（包括从父类继承的）

3. LayerSwitcher控件确实就是控制图层是否显示，调用的图层的setVisibility方法（也是从SuperMap.Layer继承的），但是要考虑到baselayer的问题（见2），可以map.setBaseLayer方法用于切换当前map显示的baselayer (一个map只能有一组请求的比例尺或分辨率、地图单位，baselayer就是用于确定地图请求的这些参数，比如放大缩小地图的时候应该请求哪个比例尺、使用什么方式计算瓦片行列号（根据baselayer的坐标系或者地图单位是米还是度）等)

（有点忙，回来发现打了字没发出去...还好浏览器没刷新）

---

感谢，可能第一个问题表述的不是很清楚，我想问的是我添加的是矢量图层，之后会对图层有类似于点选查询等操作，用哪一种初始化方法好？或者说两种方法会不会有什么影响？（SuperMap.Layer.TiledDynamicRESTLayer/SuperMap.Layer.TiledVectorLayer）

---

点选查询（几何查询或距离查询？）只需要查询条件（包括用于查询的点坐标）和服务地址就行了，跟地图没啥关系啊，地图也就是提供个拾取点的坐标系而已。。。
建议看下这俩的介绍，一个是瓦片地图，即返回给客户端的是一张张图片；一个是矢量瓦片，即返回给客户端的是矢量瓦片（可以理解成json），由客户端来解析和呈现。只是渲染地图的方式不一样而已，各有优缺点，就不详细说了，建议多看看API和示例。

---

所以没啥影响（矢量瓦片地推是前端渲染的，所以可以自定义样式和交互，视情况可以不需要发http请求去iServer查了，但是只支持矢量数据，也就是点线面文本数据集祥见文档；而且依赖浏览器的渲染能力）

---

好的，了解了，另外上面我描述过的图层已经成功添加了以后，必须要挪动地图(平移、缩放)后才能加载显示出来，如果不动的话一直都显示不出来，请问是什么原因？我给图层进行了redraw()方法，也没有明显的效果。

---

注意看示例。。。这俩图层一般都需要异步加载，也就是注册图层初始化完成事件，在回调函数去添加图层并且设置地图显示参数（一般用map.setCenter方法指定当前显示的中心点和比例尺级别，当然也可以用别的方法，比如zoomToMaxExtent等）。添加的多个图层都是需要异步加载的图层的话得都异步加载，比如a做底图（保证第一个添加）可以在a初始化完成的回调函数里添加图层a且new b，在b初始化完成的回调里添加b图层，当然也可以不这么嵌套，在a的初始化完成回调函数里添加a图层并且设置a为baselayer（map.setBaseLayer）也成。

---

我需要添加多个图层，和示例里面一样设置的allOverlays: true，最后用map.addLayers一起加载所有图层。

代码图片：希望能帮忙看下存在什么问题，谢谢！

---

每个layer都要异步加载，你for里面的没有异步加载呀。。。
可以自己写个函数包装下（或者用ES6的promise）或者循环改成递归，比如：

function addlayer(layerurls)
{
    if(!layerurls||typeof(layerurls.shift)!= "function") throw new Error("请输入url数组！");
    var i=layerurls.length
    if(!i) { // 所有url都加上了
        map.zoomToMaxExtent();
    } else {
        var layer = new SuperMap.Layer.TiledDynamicRESTLayer("layer"+i,layerurls.shift(),
{cacheEnabled: true,transparent:true},{maxResolution:"auto"});
        layer.events.on({"layerInitialized":function(){
            map.addLayer(layer);
            addlayer( layerurls );
        }});
    }
}

// 调用：
var layers=["http://***","http://***","http://***","http://***"];
addlayer(layers);

---

好的，多谢！