Tangram, изменение стиля элементов из вычисленных цветов (с помощью Vuejs)

Question

Я пытаюсь изменить стиль нескольких элементов на карте Tangram на лету, но безуспешно. Под "на лету" я подразумеваю изменение цвета элемента карты, например, массы воды, динамически от вычисленного цвета. Так как Tangram использует файл YAML для стилизации различных элементов, я использую встроенный файл Javascript на сцене (YAML). Другими словами, вместо того, чтобы придать ему фиксированный цвет, я хочу вычислить цвет (по изображению). Вместо этого:

 water:
    draw:
        polygons:
            color: "blue"

Я делаю что-то вроде этого (еще сложнее, потому что я использую Vue Router):

 water:
    draw:
        polygons:
            color: function() { return this.colors[0]; }

computedColors вычисляется в mixingЗатем транслируется на соответствующий маршрут:

var colorize = {

    data: function () {
        return {
            computedColors: []
        };
    },

    created: function () {
        this.getColors();
    },

    methods: {
        getColors: function () {
            ...
            self.computedColors = [
              ...
            ];
          self.$broadcast('parent-colors', self.computedColors);
          ...
        };
    };
}

Вот маршрут:

router.map({
'/map': {

    name: 'map',

    component: Vue.extend({

        template: '#map',

        mixins: [colorize],

        data: function () {
            return {
                colors: []
            };
        },

        events: {
            'parent-colors': function (computedColors) {
                this.colors = computedColors;
            }
        },
    ready: {
        var map = L.map('map');
        var layer = Tangram.leafletLayer({
           scene: './tiles/scene.yaml'
        });
        layer.addTo(map);
        map.setView([40.70531887544228, -74.00976419448853], 15);
    }
});

Любые намеки на то, что я могу делать неправильно, оценены.

---

ОБНОВИТЬ

Я получаю ошибку типа. Это связано с Tangram, но не совсем в состоянии понять, что это такое. Кажется, проблема с анализом файла YAML. Если я изменю это в моем scene.yaml:

 water:
    draw:
        polygons:
            color: function() { return this.colors[0]; }

С этим:

 water:
    draw:
        polygons:
            color: function() { return this.color1; }

Я не получаю ошибок, но, к сожалению, водной массе еще не назначен ни один цвет.

Конечно, мне пришлось изменить эти строки и в экземпляре маршрута карты:

 data: function () {
            return {
                color1: ''
            };
        },
 ...

 events: {
     'parent-colors': function (computedColors) {
         this.color1 = computedColors[0];
     }
 }

Answer 1

Это не столько ответ на вопрос выше, так как он не предлагает решения конкретной проблемы стилизации карты Tangram на лету (что, как кажется, Yaml не позволяет легко), но частично отвечает на вопрос. о том, как стилизовать векторы карты динамически. Он реализует Leaflet.VectorGrid и назначает свойства слоям программно через vectorTileLayerStyles метод (выполняется в примере ниже с color: self.colors[6]).

        L.vectorGrid.slicer(countries, {
        rendererFactory: L.svg.tile,
        vectorTileLayerStyles: {
            sliced: function() {
                return {
                stroke: true,
                color: self.colors[6],
                weight: 0.5,
                };
            }
        },
        }).addTo(map);

Переменная countries на самом деле просто GeoJson с var countries = добавил к этому, что-то вроде этого:

var countries = {
    "type": "FeatureCollection",
    "features": [
        { "type": "Feature"
        (...)
        }
    ]
};

Это простое решение, и оно отлично работает с небольшими объемами данных, но, поскольку это решение на стороне клиента, оно сильно загружает браузер при работе с большими наборами данных. Тем не менее, это может быть полезно для тех, кто ищет простой способ стилизовать упрощенную карту мира или ограниченную область карты на лету.