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

由于某种原因，我假设给定了一个有效的图层对象作为参数，它会“神奇地”知道要更新的道具，这是错误的。

对于其他类似情况，我正在分享自己的错误。

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

1 个答案: