mapboxgl 中插值表达式的应用场景

1 ["interpolate",        //表达式名称
2     interpolation: ["linear"] | ["exponential", base] | ["cubic-bezier", x1, y1, x2, y2 ],  //插值类型
3     input: number,    //输入值
4     stop_input_1: number, stop_output_1: OutputType,        //一组判断值和输出值
5     stop_input_n: number, stop_output_n: OutputType, ...    //一组判断值和输出值
6 ]: OutputType (number, array<number>, or Color)        //返回插值完的结果

//添加图层
map.addLayer({
    "id": "park",
    "type": "heatmap",
    "minzoom": 0,
    "maxzoom": 24,
    "source": "park",
    "paint": {
        "heatmap-weight": 1,
        "heatmap-intensity": 1,
        'heatmap-opacity':0.4,
        'heatmap-color': [//热力图颜色
            'interpolate',
            ['linear'],
            ['heatmap-density'],
            0,'rgba(255,255,255,0)',
            0.2,'rgb(0,0,255)',
            0.4, 'rgb(117,211,248)',
            0.6, 'rgb(0, 255, 0)',
            0.8, 'rgb(255, 234, 0)',
            1, 'rgb(255,0,0)',
        ]
    }
});

 1 //添加图层
 2 map.addLayer({
 3     type: 'line',
 4     source: 'line',
 5     id: 'line',
 6     paint: {
 7         'line-color': [
 8             'interpolate',//表达式名称
 9             ["linear"],//表达式类型，此处是线性插值
10             ["get", "speed"],//输入值，此处是属性值speed
11             0,'red',//两两出现的判断值和输出值
12             8,'yellow',
13             10,'lime'
14         ],
15         'line-width': 6,
16         'line-blur': 0.5
17     },
18     layout: {
19         'line-cap': 'round'
20     }
21 });

本来是想在mapboxgl中，通过多个表达式的嵌套来实现此功能，这样代码会比较简洁，但多次尝试发现行不通，原因是，因为mapboxgl对line-gradient和line-progress在的使用上的一些限制，所以第一次插值的逻辑需要自己动手实现。

 1 //通过canvas获取开始颜色和结束颜色：
 2 //原理是利用canvas创建一个线性渐变色对象，再通过计算颜色所在的位置去用getImageData获取颜色，最后返回这个颜色
 3 //1.创建canvas
 4 var canvas = document.createElement("canvas");
 5 canvas.width = 101;
 6 canvas.height = 1;
 7 var ctx = canvas.getContext('2d');
 8 //2.创建线性渐变的函数，该函数会返回一个线性渐变对象，参数0,1,101,1分别指：渐变的起始点x，y和渐变的终止点x，y
 9 var grd = ctx.createLinearGradient(0,1,101,1) 
10 //3.给线性渐变对象添加颜色点的函数，参数分别是停止点、颜色
11 grd.addColorStop(0,'red');
12 grd.addColorStop(0.8,'yellow');
13 grd.addColorStop(1,'lime');
14 //4.给canvas填充渐变色
15 ctx.fillStyle = grd;
16 ctx.fillRect(0, 0, 101, 1);
17 //5.返回渐变色的函数
18 function getInterpolateColor(r) {
19     //6.这里是渐变色的精细度，我将canvas分成101份来取值，每一份都会有自己对应的颜色
20     //声明的变量x就是我们需要的颜色在渐变对象上的位置
21     let x =  parseInt(r * 100);
22     x>100?x=100:x=x
23     //7.传入插值颜色所在的位置x，通过canvas的getImageData方法获取颜色
24     var colorData = ctx.getImageData(x, 0, 1, 1).data;
25     //8.返回这个颜色
26     return `rgba(${colorData[0]},${colorData[1]},${colorData[2]},${colorData[3]})`
27 }

 1 //allFeatures是line数据中单个线段组成的集合
 2 allFeatures.map((item,index)=>{
 3     //通过上面的渐变色函数获取开始颜色和结束颜色
 4     let startColor = getInterpolateColor(item.properties.startSpeed/10)
 5     let endColor = getInterpolateColor(item.properties.endSpeed/10)
 6     //循环添加图层
 7     map.addLayer({
 8         type: 'line',
 9         source: 'line',
10         id: 'line'+index,
11         paint: {
12             'line-width': 6,
13             'line-blur': 0.5,
14             'line-gradient': [
15                 'interpolate',
16                 ['linear'],
17                 ['line-progress'],
18                 0, startColor,
19                 1, endColor
20             ]
21         },
22         layout: {
23             'line-cap': 'round',
24         },
25         'filter': ['==', "$id", index]
26     });
27 })

每个线段设置为一个图层，最后可能会有上千个图层，这样不容易管理。

这里提供另一种思路，可以将所有线段合并为一条折线，然后计算出折线上每个节点的速度、颜色和占整个轨迹的百分比，占整个轨迹的百分比通过节点距离起点和终点的长度来计算。

将所有节点的百分比和颜色两两对应作为line-gradient的判断参数，这样就能产生和多个图层同样的效果，同时只需要创建一个图层。

这种方式的缺点是需要处理数据，具体适合用哪种可以根据实际情况来定。

 1 //图层
 2 {
 3     "id": "waterTN",
 4     "type": "fill",
 5     "source": "efdc",
 6     "paint": {
 7         "fill-color": [
 8             "interpolate",
 9             ["linear"],
10             ["get", "TN"],//输入值是属性TN
11             0, "#36D1DC",
12             15, "#6666ff",
13             20, "#4444FF"
14         ]
15     }
16 }

 1 //对颜色插值
 2 map.setPaintProperty('building', 'fill-color', [
 3     "interpolate",
 4     ["exponential", 0.5],
 5     ["zoom"],
 6     15,
 7     "#e2714b",
 8     22,
 9     "#eee695"
10 ]);
11 //对透明度插值
12 map.setPaintProperty('building', 'fill-opacity', [
13     "interpolate",
14     ["exponential", 0.5],
15     ["zoom"],
16     15,
17     0,
18     22,
19     1
20 ]);

 1 map.addLayer({
 2     'id': '3d-buildings',
 3     'source': 'composite',
 4     'source-layer': 'building',
 5     'filter': ['==', 'extrude', 'true'],
 6     'type': 'fill-extrusion',
 7     'minzoom': 15,
 8     'paint': {
 9         'fill-extrusion-color': '#aaa',
10         'fill-extrusion-height': [
11             "interpolate", ["linear"],
12             ["zoom"],
13             15, 0,
14             15.05, ["get", "height"]
15         ],
16         'fill-extrusion-base': [
17             "interpolate", ["linear"],
18             ["zoom"],
19             15, 0,
20             15.05, ["get", "min_height"]
21         ],
22         'fill-extrusion-opacity': .6
23     }
24 }, labelLayerId);

1 map.setPaintProperty('building', 'fill-opacity', [
2    "interpolate", 
3     ["linear"],
4     ["zoom"],
5     15,0,
6     22,1
7 ]);

 1 {
 2     'id': '10m-bathymetry-81bsvj',
 3     'type': 'fill',
 4     'source': '10m-bathymetry-81bsvj',
 5     'source-layer': '10m-bathymetry-81bsvj',
 6     'layout': {},
 7     'paint': {
 8     'fill-outline-color': 'hsla(337, 82%, 62%, 0)',
 9     'fill-color': [
10         'interpolate',
11         ['cubic-bezier', 0, 0.5, 1, 0.5],
12         ['get', 'DEPTH'],
13         200,'#78bced',
14         9000,'#15659f'
15         ]
16     }
17 }

推荐文章一篇通俗易懂的三次贝塞尔曲线讲解可以了解三次贝塞尔曲线是怎么画出来的，还有一个工具网站可以自己画点帮助理解。

这三种插值方法所代表的函数都可以在坐标轴中画出来，无论画出来是直线还是各种曲线，我们都不需要去纠结这个线条是如何画的，因为这一步我们可以借助工具来完成，需要关心的是这条线它输出速度的快慢，这才和我们"interpolate"表达式的意义平滑过渡相关。