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