时间戳

首页 > 解决方案 > 如何在 Mapbox-gl-js 中为特定案例创建表达式？

javascript - 如何在 Mapbox-gl-js 中为特定案例创建表达式？

问题描述

我们的目标是尽可能轻量级地创建 Geo-json。为了实现这一点，我们使 Geo-json 属性的键和值尽可能小。

从：

{
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": []//coordinates
        },
        "properties": {
          "rotation": 0, //<-- Notice Keys
          "size": 0.609524,
          "text": "143",
          "text-justify" : "left"
        }
      },

到

{
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": []//coordinates
        },
        "properties": {
          "r": 0,
          "s": 0.609524,
          "t": "143",
          "tj": "l" //"l" is "left", "r" is right and "c" is center
        }
      },

然后在前端添加层时，将执行如下操作：

"layout": {
                "text-justify": ['get', 'tj'] //<--- How to create this expression
                "text-field": ['get', 't'],
                "text-size":
                    [
                        'interpolate',
                        ['exponential', 1.75],
                        ['zoom'],
                        1, ["/", ["get", "s"], 5.15],
                        11, ["/", ["get", "s"], 0.01]
                    ],
                "text-rotate": ['get', 'r'],
            }

所以我的问题是：如何为“text-justify”属性编写表达式，因为值是“l”/“r”/“c”为“left”/“right”/“center”？

标签： javascriptmapbox-gl-js

解决方案

你可以这样写：

"text-justify": ['match', ['get', 'tj'],
  'l', 'left',
  'r', 'right',
  //...
  'center'
]

如果您的目标是将大型数据文件静态发送到浏览器，您可能希望将Geobuf视为一种更节省空间的格式。

推荐阅读