js开发,底图上加载WMS图层不显示

0 投票
250 浏览

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();
        }

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

最新提问 2月 6 分类:  250次浏览 | 用户: SSDream (0 分)

1个回答

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

另外就是数据问题,这俩图是否真的叠得上?可以在地图1上找一个点,记住它的坐标和位置,然后在地图2上看这个坐标在哪(可以直接在iDesktop打开俩web数据源叠加看看)
最新回答 2月 6 用户: 毛瑞 名扬四海 (1,769 分)

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

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);

好的,多谢!
...