Question

我试图将我的底图图层不透明度保持在不同选择之间的常量（并且可以由具有滑块的用户控制）。任何没有相关“参考”图层的底图图层都会按预期运行（即如果topo在更改为图像之前为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);
        }    
    }

}    
});

Answer 1

在新选择的底图位于地图中之后，底图库的选择更改事件将触发。这会在添加参考图层之前触发并且是预期的设计，这个想法是您不希望操纵参考图层。在你的情况下，这不是你想要的，所以使用选择改变就出来了。

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

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

关于Terrain with Labels底图的问题，事情按预期工作。因为底图的参考图层包含标签以及政治边界和主要道路，所以看起来实际上并没有应用不透明度。使用上面的代码会在代表terrain basemap的图层以及reference layer上设置不透明度。

以下是我认为可以实现您想要的页面的修改版本：http://jsbin.com/IyixAPa/1/edit

选择 - 更改底图参考图层（文本）忽略不透明度？

码块

1 个答案: