2

我试图在不同的选择之间保持我的底图图层不透明度不变（并且可以由用户使用滑块控制）。没有相关“参考”图层的任何底图图层都按预期运行（即，如果地形在更改为影像之前为 25%，则更改时将更新为 25%）。如果用户选择的底图也具有参考图层（带有标签的图像；浅灰色画布等），则参考图层在加载时会忽略不透明度设置，并且只会在用户尝试移动滑块后更改。想法？

有趣的花絮...底图图层“带标签的地形”在交换时在图像和文本上完全忽略了这一点。它几乎看起来像是在加载后刷新。

这是 JSFiddle ( http://jsfiddle.net/disuse/ez6mN/ ) 中的工作示例和我用来复制我的问题的 dojo 代码。使用最新的 Esri ArcGIS Javascript 3.7。

代码块

var baseMap_Opacity;
var baseOpacity = 0.25;

require([
    "esri/map", 
    "esri/dijit/BasemapGallery",
    "dijit/form/HorizontalSlider",
    "dijit/form/HorizontalRule",
    "dijit/form/HorizontalRuleLabels",
    "dojo/parser",
    "dojo/dom",   
    "dojo/on", 
    "dojo/ready",
    "dojo/domReady!"
], function(
    Map,
    BasemapGallery,
    HorizontalSlider, 
    HorizontalRule, 
    HorizontalRuleLabels,
    parser,
    dom,
    on,
    ready
) {
ready(function() {
    map = new Map("map", {
        center: [-121.569, 39.00],
        zoom: 7,
        optimizePanAnimation: true,
        basemap: "topo"
    });
    var basemapGallery = new BasemapGallery({
      showArcGISBasemaps: true,
      map: map
    }, "basemaps");
    basemapGallery.startup(); 

    basemap = map.getLayer("layer0");
    basemap.setOpacity(baseOpacity);

    on(basemapGallery, "selection-change", function() {
       changeBasemapOpacity(baseOpacity); 
    });

    createHorzSlider();
});    

function createHorzSlider() {
    baseMap_Opacity = dom.byId("baseMap_Opacity");
    baseMap_Opacity.innerHTML = Math.round(baseOpacity*100) + "%";

    var horzSlider = new HorizontalSlider({
        minimum: 0,
        maximum: 1,
        value: baseOpacity,
        intermediateChanges: true,
        showButtons: true,
        discreteValues: 101,
        style: "width: 300px; margin-left: 25px;",
        onChange: function(value) {
            changeBasemapOpacity(value);
        }

    }, "horzSlider");    
    horzSlider.startup();   

    var horzSliderRule = new HorizontalRule({
       container: "bottomDecoration",
       count: 2 ,
       style: "height: 5px; width: 288px; margin-top: 5px; margin-left: 32px;"
    }, "horzSliderRule");
    horzSliderRule.startup();

    var horzSliderLabels = new HorizontalRuleLabels({
       container: "bottomDecoration",
       labels: ["0", "100"],
       style: "width: 288px; margin-left: 32px;",
       labelStyle: "font-style: normal; font-weight: bold; font-size: 14px;"
    }, "horzSliderLabels");
    horzSliderLabels.startup();
}  
function changeBasemapOpacity(value) {
    baseOpacity = value;
    baseMap_Opacity.innerHTML = Math.round(baseOpacity*100) + "%";

    var esriURL = "http://services.arcgisonline.com";

    var layers = map.getLayersVisibleAtScale();

    for (var i = 0; i < layers.length; i++) {
        var lyr = map.getLayer(layers[i].id);
        if ((lyr._basemapGalleryLayerType) || (lyr.id == "layer0") || ((lyr.url) && (lyr.url.indexOf(esriURL) == 0))) {
            lyr.setOpacity(baseOpacity);
        }    
    }

}    
});
4

1 回答 1

2

新选择的底图在地图中后，底图库的选择更改事件会触发。这在添加参考层之前触发并且是预期的设计，其想法是您不想操纵参考层。在您的情况下，这不是您想要的，因此使用 selection-change 已经过时了。

要完成您想要的，请使用地图的 layer-add-result 事件并检查 layer._basemapGalleryLayerType 是否为真。如果是，您知道底图库使用的图层已添加到地图中，您应该更新其不透明度。这是一个代码片段：

map.on("layer-add-result", function(e) {
    if ( e.layer._basemapGalleryLayerType ) {
        e.layer.setOpacity(baseOpacity);
    }
});

关于带有标签的地形底图的问题，事情按预期工作。因为该底图的参考图层包括标注以及政治边界和主要道路，所以看起来不透明度实际上并未应用。使用上面的代码将在表示地形底图的图层和参考图层上设置不透明度。

这是您页面的修改版本，我认为可以满足您的要求：http: //jsbin.com/IyixAPa/1/edit

于 2013-10-18T16:35:22.143 回答