如何从geojson为mapbox GL获取'line-dasharray'值答案

【问题标题】：How to get 'line-dasharray' value from geojson for mapbox GL如何从geojson为mapbox GL获取'line-dasharray'值
【发布时间】：2020-05-28 09:35:43
【问题描述】：

我正在尝试通过 ['get', 'line-dasharray'] 获取值，但出现错误

这是我的代码

var data = {
          'type': 'FeatureCollection',
          'features': [
 {
              'type': 'Feature',
              'geometry': {
                'type': 'LineString',
                'coordinates': []
              },
              'properties': {
                'route_id': 300,
                'route_url': 'http://test.com/file.gpx',
                'line-color': '#426d7e',
                'line-width':     3,
                'line-opacity':   1,
                'line-dasharray': [5, 2]
              },
            },
]
    }

// some code



              map.addSource('locations-rote', {
                type: 'geojson',
                data: data,
                generateId: true
              });

map.addLayer({
                  'id': 'route-coordinates',
                  'type': 'line',
                  'source': 'locations-rote',
                  'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                  },
                  'paint': {
                    'line-color': ['get', 'line-color'],
                    'line-width': ['get', 'line-width'],
                    'line-opacity': ['get', 'line-opacity'],
                    'line-dasharray': ['get', 'line-dasharray']
                  }
                });

我尝试使用数组表达式 - https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#types-array，但也出现错误。告诉我如何解决这个问题。

【问题讨论】：

标签： javascript mapbox mapbox-gl-js mapbox-gl

【解决方案1】：

虽然您没有具体说明您遇到的错误是什么，但您可能会看到类似于以下内容的情况：

Error: layers.route-coordinates.paint.line-dasharray: data expressions not supported

正如 SDK 对 line-dasharray 文档 here 的支持所指出的那样，这是因为数据驱动的样式（即使用 expression 来确定属性值以及从源数据中派生的信息）还没有GL JS 支持 line-dasharray 属性。

如果您想根据不同的属性为虚线设置不同的样式，您可以通过应用 filters 创建几个不同的图层来引用此源数据。

【讨论】：

【解决方案2】：

Mapbox 在 2.3.0 版本上支持数据驱动属性 'line-dasharray'。您可以更新 sdk 版本。

更多详情，请参阅github issue。

【讨论】：