在 deck.gl 地图中动态更新 Geojson 图层

Question

我无法动态更新我在卡片组中创建的图层。

我在创建初始图层（具有城市边界的要素集合 geojson）后初始化了地图。之后，我选择一个城市并尝试使用下拉菜单将地区图层加载到地图中，我用 jquery-change 收听。我使用 gejosin.io 验证了城市和地区的 geojson，并且 voth 呈现得很好。在我的应用程序中，显示了初始城市图层，但是当我更改图层实例时（共享相同的 id，在文档中被告知如此），它不会在视图上更新。我使用了 setProps 并且在控制台中我可以看到层的数据确实在变化。唯一的问题似乎是更改未在地图中采取行动。我也尝试使用 deck(map) 的 redraw() 方法但没有成功。

需要注意的一点是，deck.gl 不会使用相关方法手动更新地图元素。它说它使用 "The Reactive Programming Paradigm"。据我了解，当我们更改数据时，它会自行更新。在我们使用外部函数的地方也有例外，这会导致更改不生效，但我们这里不使用这样的东西。

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});

出于某种原因，我假设给定一个有效的图层对象作为参数，它会 "magically" 知道要更新哪个道具，我错了。

我正在为更多类似事件分享我的错误。

在 deck.gl 地图中动态更新 Geojson 图层

Updating Geojson layers dynamically in a deck.gl map

javascript

data-visualization

deck.gl