2

異なる選択間でベースマップ レイヤーの不透明度を一定に保とうとしています (ユーザーがスライダーで制御できます)。関連する「参照」レイヤーを持たないベースマップ レイヤーは、期待どおりに動作します (つまり、画像に変更する前に 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);
        }    
    }

}    
});
4

1 に答える 1

2

ベースマップ ギャラリーの選択変更イベントは、新しく選択されたベースマップがマップ内に配置された後に発生します。これは、参照レイヤーが追加される前に発生し、意図された設計であり、参照レイヤーを操作したくないという考えです。あなたの場合、それはあなたが望むものではないので、選択変更を使用することはできません。

目的を達成するには、マップの layer-add-result イベントを使用して、layer._basemapGalleryLayerType が true かどうかを確認します。そうである場合、ベースマップ ギャラリーで使用されているレイヤーがマップに追加されていることがわかり、その不透明度を更新する必要があります。コード スニペットを次に示します。

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 に答える