首页 / 浏览问题 / 云GIS / 问题详情
js两个图层怎么设置透明度?
91EXP 2017年04月01日

入下图所示,我想看到等值线后面的东西:

我的代码如下:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="./assets/libs/sm/libs/SuperMap.Include.js"></script>
  <script type="text/javascript">
    <!--
    //声明变量map、layer、url
    var map, layer, layerImage, vectorLayer, themeLayer,
      url = ["http://localhost:8090/iserver/services/map-baidu/rest/maps/normal",
        "http://localhost:8090/iserver/services/map-reservoir2/rest/maps/lc@image",
        "http://localhost:8090/iserver/services/map-OSM/rest/maps/normal",
        "http://localhost:8090/iserver/services/map-reservoir2/rest/maps/WatchPoint@data",
		"http://localhost:8090/iserver/services/map-LinCangDiTu/rest/maps/Level17@testB",
		"http://localhost:8090/iserver/services/map-reservoir/rest/maps/isoMap"
      ];
    //创建地图控件
    function init() {
      map = new SuperMap.Map("map", {
        controls: [
          new SuperMap.Control.ScaleLine(),
          //new SuperMap.Control.Zoom(),
          new SuperMap.Control.LayerSwitcher(),
          new SuperMap.Control.Navigation({ //添加导航控件到map
            dragPanOptions: {
              enableKinetic: true //拖拽动画
            }
          })
        ],
        allOverlays: true
      });


      //创建分块动态REST图层,该图层显示iserver 8C 服务发布的地图,
      //其中"world"为图层名称,url图层的服务地址,{transparent: true}设置到url的可选参数
      layer = new SuperMap.Layer.TiledDynamicRESTLayer("地图", url[4], {
        cacheEnabled: true, transparent: true
      }, {
        maxResolution: "auto"
      });
      layer.events.on({
        "layerInitialized": addLayer
      });

    }

	function addThemeLayer() {
		map.addLayer(themeLayer);
	}
    var infowin;


    function addLayer() {
      //将Layer图层加载到Map对象上
      // map.addLayer(layer);
      map.addLayers([layer, vectorLayer]);
	  	  themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer("等值专题图", url[5], {
        cacheEnabled: true, transparent: true
      }, {
        maxResolution: "auto"
      });
      themeLayer.events.on({
        "layerInitialized": addThemeLayer
      });

      //出图,map.setCenter函数显示地图
      try {
        //var lonLat1 = new SuperMap.LonLat(100.08831, 23.88535);
		var lonLat1 = new SuperMap.LonLat(11046444.664073, 2790516.8346258);
        console.log("lonLat1", lonLat1);
        //这里 lonLat1 = lonLat2

map.setCenter(lonLat1, 2);

      } catch (ex) {
        console.log("exception ", ex);
      }
    }

    //-->
  </script>
</head>

<body onload="init()">
  <div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;">
  </div>
</body>

</html>

1个回答

你好:

我看了一下你的代码,这个地图(http://localhost:8090/iserver/services/map-reservoir/rest/maps/isoMap)您是以一个TiledDynamicRESTLayer对象添加在地图上的,并且已经设置了transparent为true,现在地图中显示的图层还是覆盖了底图。

其实这个已经设置了背景透明了,但是这个图层本身就是一个带有面和线的图层。

如果你想只在底图上显示等值线,可以在iDesktop中将这个等值线提取出来做一个单独的线数据集并保存为地图。这样叠加在底图上边才可以只显示线而不压盖底图。

5EXP 2017年04月01日
不能是线和面一起吗?

不好意思我理解错了,你是想设置透明度而不是设置背景透明吧。

设置动态图层透明度可以用setOpacity()方法。具体可以参考示范程序:http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/examples.html#overlayLayer

就是这个,解决了,多谢。
...