首页 / 浏览问题 / 云GIS / 问题详情
动态图层叠加衔接处有空白
34EXP 2019年08月13日

JavaScript fot classic进行开发,进行图层叠加的时候,衔接出有空白,放大之后,空白会逐渐减少,感觉好像第二个图层把第一个压盖了,透明度也设置了,能不能控制图层先后顺序呢,或者其他设置

1个回答

叠加的代码怎么写的,发一下。然后地图是切的栅格瓦片还是普通的矢量地图?
5,668EXP 2019年08月13日
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title data-i18n="resources.title_overlayLayer"></title>
<style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%
        }

        #map {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 1px solid #3473b7;
        }
        .editPane {
            position: absolute;
            right: 10px;
            top: 50px;
            width: 350px;
            text-align: center;
            background: #FFF;
            z-index: 1000;
        }
    </style>
</head>
<body>
<div id="map">
<div class='panel panel-primary editPane' id='editPane' style="z-index: 99999">
<div class='panel-heading'>
<h5 class='panel-title text-center' data-i18n="resources.text_mapOverlay"></h5>
</div>
<div class='panel-body' id='params'>
<div class='input-group'>
<span class='input-group-addon' data-i18n="resources.text_opacity"></span>
<input id='layerOpacity' type='text' class='form-control' data-i18n="[placeholder]resources.text_input_tips_opacity"/>
</div>
<p></p>
<div align='right' class='input-group'>
<input type='button' id='calc' class='btn btn-primary' data-i18n="[value]resources.btn_createOpacity" onclick="setLayerOpacity()"/>
</div>
</div>
</div>
</div>
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
<script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
<script type="text/javascript">
    
    var map, layerWorld, layerJingjing;
    var url ="http://localhost:8090/iserver/services/map-XiAnDiTu/rest/maps/map";
    var url2 =  "http://localhost:8090/iserver/services/map-XiAnDiTu2/rest/maps/map";
    map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.LayerSwitcher(),
            new SuperMap.Control.ScaleLine(),
            new SuperMap.Control.OverviewMap(),
            new SuperMap.Control.Zoom(),
            new SuperMap.Control.Navigation({
                dragPanOptions: {
                    enableKinetic: true
                }
            })], allOverlays: true
    });
    layerWorld = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, {
        transparent: true,
        cacheEnabled: true,
        layersID: 0
    });
    layerWorld.events.on({"layerInitialized": addLayer1});
    function setLayerOpacity() {
        var numStr = document.getElementById('layerOpacity').value;
        if (numStr && !isNaN(numStr)) {
            if (Number(numStr) >= 0 && Number(numStr) <= 1) {
                layerJingjing.setOpacity(Number(numStr));
            }
        }
    }
    function addLayer1() {
        layerJingjing = new SuperMap.Layer.TiledDynamicRESTLayer("京津地区地图", url2, {
            transparent: true,
            cacheEnabled: true
        });
        layerJingjing.events.on({"layerInitialized": addLayer2});
        layerJingjing.setOpacity(0.8);
    }
    function addLayer2() {
        map.addLayers([layerWorld, layerJingjing]);
        map.setCenter(new SuperMap.LonLat(110, 30), 0);
    }
</script>
</body>
</html>
就是发布的工作空间,普通的矢量地图,不过切的mongo的瓦片,本来以为是切的瓦片的问题,然后就单独进行矢量叠加,叠加的时候衔接处就有空白

我用官网的范例试了一下,矢量地图设置好transparent:true加载是没有问题的mongodb瓦片的话在切片时需要勾选背景透明,桌面中处理地图的时候也设置好地图属性的背景透明选项,另外iserver版本需要至少不低于桌面idesktop版本

...