在deck.gl地圖中動態更新Geojson圖層

Question

我無法動態更新在甲板上創建的圖層。

創建初始圖層（具有城市邊界的要素集合geojson）后，我初始化了地圖。 之后，我選擇一個城市，並嘗試使用下拉菜單將地區圖層加載到地圖中，並使用jquery-change進行監聽。 我使用gejosin.io驗證了城市和地區的geojson，並且voth渲染效果很好。 在我的應用上，顯示了初始城市圖層，但是當我更改圖層實例（共享相同的ID，文件中也是如此）時，它不會在視圖上更新。 我使用過setProps，並且在控制台中可以看到確實發生變化的圖層數據。 唯一的問題似乎是更改未在地圖中采取措施。 我也嘗試使用deck（map）的redraw（）方法沒有成功。

需要注意的一點是，deck.gl不會使用相關方法手動更新地圖元素。 它說它使用“反應式編程范例”。 據我了解，當我們更改數據時，它會自我更新。 在使用外部函數的地方有一個例外，它導致更改不起作用，但是在此我們不使用這種東西。

var tarimDeck;
var typeColorList = {};

$(document).ready(function () {

    // Set the map view zone.
    $("#TarlaMapView").css("height", $(window).height() - 200 + "px").css("width", "100%");


    const LIGHT_SETTINGS = {
        lightsPosition: [-125, 50.5, 5000, -122.8, 48.5, 8000],
        ambientRatio: 0.2,
        diffuseRatio: 0.5,
        specularRatio: 0.3,
        lightsStrength: [1.0, 0.0, 2.0, 0.0],
        numberOfLights: 2
    };

    // Get cities with geojson data to place initial layers.
    // Currently cities are pulled from a local file.
    var ilData = {};
    $.getJSON("./tr_iller_geo.json", function (file_content) {
        ilData = file_content;

        const visibleLayers = new deck.GeoJsonLayer({
            id: "current-layers",
            data: ilData,
            opacity: 0.6,
            stroked: false,
            filled: true,
            extruded: true,
            wireframe: true,
            fp64: true,
            lightSettings: LIGHT_SETTINGS,
            getElevation: f => (5555),
            getFillColor: f => /*(colorSetter(f.properties.urunType) ? colorSetter(f
                        .properties.urunType) : [0, 0, 0]) */random_rgba(),
            getLineColor: f => [0, 0, 0],
            pickable: true,
            onHover: updateTooltip
        });

        // Load the initial map view with city layers.
        tarimDeck = new deck.DeckGL({
            mapboxAccessToken: 'pk.eyJ1IjoiaGFiaWwyNCIsImEiOiJjanU5cHk1a3QwbGZwNGRuMHc4dHZsMGJwIn0.Yrkp8-SSLDqHTRCKzXd8DA',
            mapStyle: 'https://free.tilehosting.com/styles/positron/style.json?key=2OrAmqAgbK4HwBOq6vWN',
            container: 'TarlaMapView',
            latitude: 38,
            longitude: 35.8,
            zoom: 5.9,
            maxZoom: 16,
            pitch: 45,
            layers: [visibleLayers]
        });

        $("#il-dropdown").dropdown('setting', 'onChange', function () {
            // Actions Here

                        var ilceFeatures = [];
                        response.forEach(x => {
                            if (x.geo) {
                                ilceFeatures.push(
                                    {
                                        "type": "Feature",
                                        "geometry": x.geo,
                                        "properties": {
                                            ilce_name: "salla_bisi"
                                        }
                                    });
                            }
                        });

                        var ilceFeatureCollection = {
                            "type": "FeatureCollection",
                            "features": ilceFeatures
                        };
                        console.log("ilce gejson: ", ilceFeatureCollection);
                        // Create new layers for  "ilce" geojson.
                        const newLayers = [new deck.GeoJsonLayer({
                            id: "current-layers",
                            data: ilceFeatureCollection,
                            opacity: 0.8,
                            stroked: false,
                            filled: true,
                            extruded: true,
                            wireframe: true,
                            fp64: true,
                            lightSettings: LIGHT_SETTINGS,
                            getElevation: f => (5555),
                            getFillColor: f => random_rgba(),
                            getLineColor: f => [0, 0, 0],
                            pickable: true,
                            onHover: updateTooltip

                        })];

                        tarimDeck.setProps(newLayers);
                        console.log("tarimdeck: ",tarimDeck);

                    },
                    error: function (err) {
                        console.log(err);
                    }
                });
            }

        });

    });

我希望能夠將可見的圖層從城市更改為地區。 此外，我還將更改視口，但首先我需要具有動態圖層。

Answer 1

在deckgl github頁面上發布問題線程后，我已被糾正如下：

tarimDeck.setProps(newLayers);

應該

tarimDeck.setProps({layers: newLayers});

由於某種原因，我假設給定一個有效的圖層對象作為參數，它會“神奇地”知道要更新哪個道具，這是錯誤的。

對於其他類似情況，我也分享自己的錯誤。