Question

我有以下数组：

var SplitUpLevels = [
 [ zoomLevel: 6, locationIDs: [1, 2, 3]],
 [ zoomLevel: 10, locationIDs: [4, 5, 6]],
];

我要基于单个缩放级别并且仅当位置ID在数组中时才在地图上隐藏一些图标。我从JSON源动态获取值。

我已经尝试了一个简单的forEach循环，但没有成功：

"icon-opacity" : [
   "interpolate",
   ["linear"],
   ["zoom"],
   0,
   1,

   SplitUpLevels.forEach(function(SplitUpLevel) {

     SplitUpLevel.zoomlevel,
     [ "match", ["get", "Id"], SplitUpLevel.locationIDs, 0, 0 ] 

   }),

 … ]

我要么得到响应

“ icon-opacity：期望偶数个参数。”

或

“ icon-opacity [5]：”插值“表达式的输入/输出对必须使用文字数字值定义（不计算）表达式）作为输入值。”

基于动态源构建这种表达式的最佳方法是什么。

Answer 1

如果其他人正在寻找解决方案：创建一个表达式数组并使用它添加图层：

var iconopacity = ["interpolate",
                   "linear",
                   "zoom"]

然后为json文件中的每个数组推送表达式

SplitUpLevels.forEach(function(SplitUpLevel) {
  iconopacity.push(SplitUpLevel.zoomlevel, [ "match", ["get", "Id"], SplitUpLevel.locationIDs, 0, 0 ]);
}

然后添加新层

  map.addLayer({
   […]
   "paint" : {
    "icon-opacity" : iconopacity
   }
  });

经过长时间的搜索，我仍然决定使用PHP脚本预先调整数据，而不是创建复杂的过滤规则。

Mapbox GL JS：基于多维数组构建匹配表达式

1 个答案: