Динамическое обновление слоев Geojson на карте deck.gl - PullRequest
Новая
       33

Динамическое обновление слоев Geojson на карте deck.gl

0 голосов
/ 17 июня 2019

Я не могу обновлять слои, которые я создаю в колоде, динамически.

Я инициализировал карту после создания начальных слоев (геоджон коллекции объектов, имеющий границы города).После этого я выбираю город и пытаюсь загрузить слои местности в карту с помощью выпадающего меню, которое я слушаю с помощью jquery-change.Я проверял geojson как в городах, так и в районах, используя gejosin.io, и voth хорошо рендерится.В моем приложении отображаются начальные городские слои, но когда я изменяю экземпляры слоев (с одинаковым идентификатором, который указан в документах), он не обновляется в представлении.Я использовал 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);
                    }
                });
            }

        });

    });

Я хотел бы иметь возможность изменять видимые слоииз городов в районы.Кроме того, я собираюсь также изменить view-port, но сначала мне нужно иметь динамические слои.

1 Ответ

0 голосов
/ 01 июля 2019

После публикации цепочки вопросов на странице github deckgl меня исправили следующим образом: 

tarimDeck.setProps(newLayers);

Должно быть 

tarimDeck.setProps({layers: newLayers});

По какой-то причине я предположил, чтодопустимый объект слоя в качестве параметра, он будет «волшебным образом» знать, какую реквизит обновлять, я ошибся.

Я делюсь своей ошибкой для дальнейших подобных случаев.

...