0

我正在尝试即时更改许多地图元素的样式，但没有成功。我所说的动态是指从计算的颜色动态更改地图元素的颜色，例如水体。使用 Tangram，但如果有更好的解决方案，则对其他引擎开放。由于 Tangram 使用 YAML 文件来设置各种元素的样式，因此我在场景 (YAML) 文件中使用内联 Javascript。换句话说，我不想给它一个固定的颜色，而是想计算颜色（从图像中）。而不是这个：

 water:
    draw:
        polygons:
            color: "blue"

我正在按照这些思路做一些事情（因为我使用的是 Vue 路由器，所以更加复杂）：

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

computedColors在 a 中计算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];
     }
 }
4

1 回答 1

0

以下内容并未提供动态样式化七巧板地图的具体问题的解决方案（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"
        (...)
        }
    ]
};

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

更新

更高效的解决方案是使用切片服务器。下面的示例实现了t-rexL.canvas.tile ，在选项中使用画布渲染器rendererFactory而不是L.svg.tileand protobuf：

  var lines = "http://127.0.0.1:6767/lines/{z}/{x}/{y}.pbf";
  var multilinestrings = "http://127.0.0.1:6767/multilinestrings/{z}/{x}/{y}.pbf";
  var multipolygons = "http://127.0.0.1:6767/multipolygons/{z}/{x}/{y}.pbf";

  var vectorTileStyling = {
      lines: {
          weight: .8,
          fillColor: this.colors[1],
          color: this.colors[1],
          fillOpacity: .8,
          opacity: .8
      },
      multilinestrings: {
          weight: .8,
          fillColor: this.colors[2],
          color: this.colors[2],
          fillOpacity: .8,
          opacity: .8
      },
      multipolygons: {
          fill: true,
          weight: .8,
          fillColor: this.colors[3],
          color: this.colors[3],
          fillOpacity: .8,
          opacity: .8,
      }
  };

  var externalVectorTileOptions = {
      rendererFactory: L.canvas.tile,
      vectorTileLayerStyles: vectorTileStyling,
      maxZoom: 16,
      minZoom: 14
  };
  L.vectorGrid.protobuf(lines, externalVectorTileOptions).addTo(map);
  L.vectorGrid.protobuf(multilinestrings, externalVectorTileOptions).addTo(map);
  L.vectorGrid.protobuf(multipolygons, externalVectorTileOptions).addTo(map);
于 2018-10-22T11:22:35.817 回答