底图参考图层(文本）忽略选择更改时的不透明度

Basemap Reference Layers (text) ignore Opacity on Selection-Change?

本文关键字：选择 不透明度 参考 图层 文本      更新时间：2023-09-26

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

新选择的底图位于地图中后，将触发底图库的选择更改事件。这会在添加参考图层之前触发，并且是预期设计，其想法是您不想操作参考图层。在您的情况下，这不是您想要的，因此使用选择更改是错误的。

要完成所需操作，请使用地图的图层添加结果事件并检查layer._basemapGalleryLayerType是否真实。如果是，则表明底图库使用的图层已添加到地图中，因此应更新其不透明度。下面是一个代码片段：

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

关于带标注的地形底图的问题，一切按预期进行。由于该底图的参考图层包含标注以及政治边界和主要道路，因此看起来未应用不透明度，而实际上已应用不透明度。使用上述代码将在表示 terrain 底图的图层和参考图层上设置不透明度。

这是您页面的修改版本，我认为它实现了您想要的：http://jsbin.com/IyixAPa/1/edit

相关文章：