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

博内利亚

我无法动态更新我在甲板上创建的图层。

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

        });

    });

我希望能够将可见图层从城市更改为地区。此外,我也将更改视口,但首先我需要有动态层。

博内利亚

在deckgl github页面中发布问题线程后,我已更正如下:

tarimDeck.setProps(newLayers);

应该

tarimDeck.setProps({layers: newLayers});

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

我正在分享我对进一步类似事件的错误。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章