最近在研究超图,为下一步应用中使用提前做好准备,围绕着需求开始摸索如何让两张地图合并到一起,一张为地图,一张为中文标注。以下是我的研究成果,有什么不对的欢迎指出。

1 <!DOCTYPE HTML>
 2 <html>
 3 <head>   
 4     <title>SuperMap iClient for JavaScript:TiledDynamicRESTLayer</title>
 5     <!--引用需要的脚本-->
 6     <script src="./libs/SuperMap.Include.js"></script>
 7     <script type="text/javascript">
 8     //声明变量map、layer、url
 9     var map, layer,layer2,
10     url = "http://10.1.10.79:8090/iserver/services/map-ugcv5-ShiLiangDiTuJingWeiDu/rest/maps/矢量底图_经纬度",
11     url2 ="http://10.1.10.79:8090/iserver/services/map-ugcv5-ShiLiangZhongWenZhuJiJingWeiDu/rest/maps/矢量中文注记_经纬度";
12     //创建地图控件
13     function init() {
14         map = new SuperMap.Map ("map",{allOverlays: true
15                 });
16         //创建分块动态REST图层,该图层显示iserver 8C 服务发布的地图,
17         //其中"world"为图层名称,url图层的服务地址,{transparent: true}设置到url的可选参数
18         layer = new SuperMap.Layer.TiledDynamicRESTLayer("矢量底图_经纬度", url,{transparent: true, cacheEnabled: true});
19         layer.events.on({"layerInitialized": addLayer});          
20     }
21     function addLayer() {
22         layer2 = new SuperMap.Layer.TiledDynamicRESTLayer("矢量中文注记_经纬度", url2,{transparent: true, cacheEnabled: true});
23         layer2.events.on({"layerInitialized": addLayer2}); 
24         
25     }
26     function addLayer2() {
27         //将Layer图层加载到Map对象上
28         map.addLayers([layer,layer2]);
29         //出图,map.setCenter函数显示地图
30         map.setCenter(new SuperMap.LonLat(120, 30), 3);        
31     }
32     </script>
33 </head>
34 <body onload="init()">
35     <!--地图显示的div-->
36     <div id="map" style="position:absolute;left:0px;right:0px;width:800px;height:500px;" >             
37     </div>    
38 </body>
39 </html>

几个重要参数说明:

  • SuperMap.Layer.TiledDynamicRESTLayer:所有SuperMap iServer 6R 分块动态 REST 图层。
1 // 向服务端发送请求获取后,获取透明、使用服务端缓存的图层, 
2 // 通过options可以设置TiledDynamicRESTLayer的属性及其父类的属性 
3 var layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", World_Map, 
4     {transparent: true, cacheEnabled:true}, {maxResolution:"auto"});

transparent {Boolean} 图层是否透明,默认为 false,即不透明。
cacheEnabled {Boolean} 是否使用服务端的缓存,默认为 true,即使用服务端的缓存

注:刚开始没有设置transparent,两个图层一直不能同时显示出来,总有一个被覆盖。

  • allOverlays{Boolean} 地图所有图层都被当做叠加图层来使用,默认是false。如果设置为 true,则图层相互叠加, 最先绘制的图层可以被视为是底图(显示效果上的底图,但其isBaseLayer为false); 而且所有将要添加的图层的”isBaseLayer”属性在添加的时候都会被默认修改成false

注:该参数不设置,图层叠加也不能正确展示。

  • setOpacity setOpacity: function( opacity )  设置图层的不透明度,取值[0-1]之间。

注:该参数也能达到图层叠加的效果,但是这样,势必有一层展示清晰度模糊。所以开始研究不使用该参数能不能达到想要的效果,如代码所示刚好满足要求。

注:瓦片要求,矢量中文注记_经纬度为分布式切图所得,要求切图的时候,选择背景透明,这个一定要勾选上,负责也只能使用setOpacity来达到图层叠加效果。

android 层叠显示多图viewpager 安卓图层叠加_图层