Question

我试图即时更改许多地图元素的样式，但没有成功。即时运行是指根据计算出的颜色动态更改地图元素的颜色，例如水量。如果有更好的解决方案，请使用七巧板，但对其他引擎开放。由于七巧板使用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);
    }
});

任何暗示我可能在做错事的赞赏。

更新

我遇到各种各样的错误。它与七巧板有关，但不能完全弄清它的确切含义。似乎与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

以下内容并未提供解决方式来即时设置七巧板地图的特定问题（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的{{1}}，大致如下：

var countries =

这是一个简单的解决方案，可以完美处理少量数据，但是由于它是一种客户端解决方案，因此在处理更大的数据集时，浏览器会很繁重。不过，对于那些正在寻找一种简单的方法来动态绘制简化的世界地图或有限的地图区域的人来说，它可能仍然有用。

更新

更高效的解决方案是使用切片服务器。下面的示例实现了t-rex，在var countries = { "type": "FeatureCollection", "features": [ { "type": "Feature" (...) } ] };选项中使用了画布渲染器L.canvas.tile，而不是rendererFactory和protobuf：

L.svg.tile

动态更改地图元素的样式

1 个答案: