mapboxgl?中插值表達(dá)式的應(yīng)用場(chǎng)景分析

更新時(shí)間：2022年09月29日 10:58:23 作者：GIS兵器庫(kù)

interpolate是mapboxgl地圖樣式中用于插值的表達(dá)式，能對(duì)顏色和數(shù)字進(jìn)行插值，這篇文章就把?mapboxgl?中interpolate插值工具的常見(jiàn)應(yīng)用場(chǎng)景介紹一下，感興趣的朋友一起看看吧

一、前言

interpolate是mapboxgl地圖樣式中用于插值的表達(dá)式，能對(duì)顏色和數(shù)字進(jìn)行插值。

它的應(yīng)用場(chǎng)景有兩類：

對(duì)地圖數(shù)據(jù)進(jìn)行顏色拉伸渲染。常見(jiàn)的應(yīng)用場(chǎng)景有：熱力圖、軌跡圖、模型網(wǎng)格渲染等。
在地圖縮放時(shí)對(duì)圖形屬性進(jìn)行插值。具體為，隨著地圖的縮放，在改變圖標(biāo)大小、建筑物高度、圖形顏色等屬性時(shí)，對(duì)屬性進(jìn)行插值，從而實(shí)現(xiàn)平滑的過(guò)渡效果。

這篇文章就把 mapboxgl 中interpolate插值工具的常見(jiàn)應(yīng)用場(chǎng)景介紹一下。

二、語(yǔ)法

先看一下interpolate插值工具的語(yǔ)法。

interpolate表達(dá)式要求至少有5個(gè)參數(shù)，分別是表達(dá)式名稱、插值類型、輸入值、判斷值、輸出值。

["interpolate",		//表達(dá)式名稱
    interpolation: ["linear"] | ["exponential", base] | ["cubic-bezier", x1, y1, x2, y2 ],  //插值類型
    input: number,	//輸入值
    stop_input_1: number, stop_output_1: OutputType,		//一組判斷值和輸出值
    stop_input_n: number, stop_output_n: OutputType, ...	//一組判斷值和輸出值
]: OutputType (number, array<number>, or Color)		//返回插值完的結(jié)果

其中插值類型會(huì)在后面詳細(xì)介紹，這里先不多說(shuō)。

判斷值、輸出值是“一組”的關(guān)系，它們必須兩兩出現(xiàn)。

還有一點(diǎn)需要注意，就是判斷值必須遵循升序規(guī)則。

下面我們結(jié)合實(shí)際場(chǎng)景理解起來(lái)會(huì)更容易一些，先說(shuō)第一類應(yīng)用場(chǎng)景：對(duì)地圖數(shù)據(jù)進(jìn)行顏色拉伸渲染。

三、對(duì)地圖顏色進(jìn)行拉伸渲染

這個(gè)和ArcGIS中對(duì)柵格數(shù)據(jù)進(jìn)行顏色拉伸渲染是一個(gè)意思。

地圖顏色拉伸渲染的本質(zhì)，是根據(jù)網(wǎng)格的屬性值為網(wǎng)格設(shè)置顏色，當(dāng)網(wǎng)格足夠小、足夠密時(shí)，就容易產(chǎn)生顏色平滑過(guò)渡的效果。

前面說(shuō)到，常見(jiàn)的應(yīng)用場(chǎng)景有：熱力圖、軌跡圖、模型網(wǎng)格渲染等。

在mapboxgl中，熱力圖和軌跡圖它們雖然看上去不像是由網(wǎng)格組成的，但在計(jì)算機(jī)圖形學(xué)的框架下，任何在屏幕上顯示的內(nèi)容，都是由像素來(lái)呈現(xiàn)的，而像素是規(guī)律排列的網(wǎng)格，所以可以把熱力圖和軌跡也看成是由網(wǎng)格組成的。

這一點(diǎn)在WebGL開(kāi)發(fā)時(shí)尤為明顯，因?yàn)樾枰约簩懫鞫x每個(gè)像素的顏色。

mapboxgl提供了熱力圖和軌跡圖的像素屬性值計(jì)算工具：

熱力圖中為heatmap-density表達(dá)式，用來(lái)計(jì)算熱力圖上每個(gè)像素的熱力值。
軌跡線中為line-progress表達(dá)式，用來(lái)計(jì)算在當(dāng)前線段上每個(gè)像素的行進(jìn)百分比。

模型網(wǎng)格渲染時(shí)，網(wǎng)格需要自己生成，網(wǎng)格中的屬性值也需要自己計(jì)算，通常在項(xiàng)目上這些是由模型完成的，如：EFDC水動(dòng)力模型、高斯煙羽大氣污染擴(kuò)散模型等。

模型輸出的結(jié)果就是帶屬性值的網(wǎng)格，interpolate表達(dá)式的任務(wù)仍然是根據(jù)網(wǎng)格的屬性值為網(wǎng)格設(shè)置顏色。

1. 熱力圖

實(shí)現(xiàn)效果：

數(shù)據(jù)使用的是北京市公園綠地?zé)o障礙設(shè)施數(shù)量。

代碼為：

//添加圖層
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)',
        ]
    }
});

上述代碼中，使用interpolate表達(dá)式進(jìn)行線性插值，輸入值是heatmap-density熱力圖密度，熱力圖密度的值在0-1之間，輸出值是熱力圖中各個(gè)像素的顏色。

'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)',
]

表達(dá)式詳解：

密度為0或小于0，輸出顏色'rgba(255,255,255,0)'
密度為0-0.2，輸出顏色在'rgba(255,255,255,0)'和'rgb(0,0,255)'之間
密度為0.2，輸出顏色'rgb(0,0,255)'
密度為0.2-0.4，輸出顏色在'rgb(0,0,255)'和'rgb(117,211,248)'之間
密度為0.4，輸出顏色'rgb(117,211,248)'
密度為0.4-0.6，輸出顏色在'rgb(117,211,248)'和'rgb(0, 255, 0)'之間
密度為0.6，輸出顏色'rgb(0, 255, 0)'
密度為0.6-0.8，輸出顏色在'rgb(0, 255, 0)'和'rgb(255,0,0)'之間
密度為0.8，輸出顏色'rgb(255, 234, 0)'
密度為0.8-1，輸出顏色在'rgb(255, 234, 0)'和'rgb(255,0,0)'之間
密度為1或大于1，輸出顏色'rgb(255,0,0)'

在線示例：http://gisarmory.xyz/blog/index.html?demo=mapboxglStyleInterpolate1

和顏色拉伸渲染對(duì)應(yīng)的另一種渲染方式，是使用step表達(dá)式對(duì)數(shù)據(jù)進(jìn)行顏色分類渲染。

顏色分類渲染的實(shí)現(xiàn)方式在上面示例的代碼中就有，只是被注釋了，可以把代碼下載下來(lái)自行嘗試。

實(shí)現(xiàn)效果如下：

2. 軌跡圖

mapboxgl官網(wǎng)上提供了一個(gè)示例，是用顏色來(lái)表達(dá)軌跡行進(jìn)的進(jìn)度，效果圖如下：

它是用線的line-gradient屬性來(lái)實(shí)現(xiàn)的，其中用到了插值表達(dá)式interpolate和線進(jìn)度表達(dá)式line-progress，interpolate表達(dá)式在這里的作用依舊是對(duì)屬性值進(jìn)行顏色拉伸渲染，代碼如下：

map.addLayer({
    type: 'line',
    source: 'line',
    id: 'line',
    paint: {
        'line-color': 'red',
        'line-width': 14,
        // 'line-gradient' 必須使用 'line-progress' 表達(dá)式實(shí)現(xiàn)
        'line-gradient': [    //
            'interpolate',
            ['linear'],
            ['line-progress'],
            0, "blue",
            0.1, "royalblue",
            0.3, "cyan",
            0.5, "lime",
            0.7, "yellow",
            1, "red"
        ]
    },
    layout: {
        'line-cap': 'round',
        'line-join': 'round'
    }
});

在實(shí)際項(xiàng)目中，這種用顏色表達(dá)軌跡進(jìn)度的場(chǎng)景相對(duì)少見(jiàn)，更多時(shí)候我們需要用顏色來(lái)表示軌跡的速度。

用顏色表示軌跡速度：

我們準(zhǔn)備了一條騎行軌跡數(shù)據(jù)，軌跡由多個(gè)線段組成，每個(gè)線段上包含開(kāi)始速度、結(jié)束速度和平均速度屬性，相鄰的兩條線段，前一條線段的結(jié)束點(diǎn)和下一條線段的開(kāi)始點(diǎn)，它們的經(jīng)緯度和速度相同。

//line數(shù)據(jù)中的單個(gè)線段示例
{
    "type": "Feature",
        "properties": {
            "startSpeed": 8.301424026489258, //開(kāi)始速度
            "endSpeed": 9.440339088439941, //結(jié)束速度
            "speed": 8.8708815574646 //平均速度
        },
        "geometry": {
            "coordinates": [
                [
                    116.29458653185719,
                    40.08948061960585
                ],
                [
                    116.29486002031423,
                    40.08911413450488
                ]
            ],
                "type": "LineString"
        }
}

最簡(jiǎn)單的實(shí)現(xiàn)方式就是，根據(jù)線段的平均速度，給每條線段設(shè)置一個(gè)顏色。

實(shí)現(xiàn)方式仍然是使用interpolate表達(dá)式，用它來(lái)根據(jù)軌跡中線段的速度對(duì)顏色進(jìn)行插值。

核心代碼如下：

//添加圖層
map.addLayer({
    type: 'line',
    source: 'line',
    id: 'line',
    paint: {
        'line-color': [
            'interpolate',//表達(dá)式名稱
            ["linear"],//表達(dá)式類型，此處是線性插值
            ["get", "speed"],//輸入值，此處是屬性值speed
            0,'red',//兩兩出現(xiàn)的判斷值和輸出值
            8,'yellow',
            10,'lime'
        ],
        'line-width': 6,
        'line-blur': 0.5
    },
    layout: {
        'line-cap': 'round'
    }
});

上面代碼中，interpolate表達(dá)式的意思是：

0km/h及以下(含0km/h)輸出紅色
0-8km/h輸出紅到黃之間的顏色
8km/h輸出黃色
8-10km/h輸出黃到綠之間的顏色
10km/h及以上(含10km/h)輸出綠色

實(shí)現(xiàn)效果如下：

示例在線地址：http://gisarmory.xyz/blog/index.html?demo=mapboxglStyleInterpolate2

整體看上去還不錯(cuò)，但放大地圖時(shí)會(huì)發(fā)現(xiàn)，顏色是一段一段的，過(guò)渡不夠平滑，如下圖：

如何能讓局部的顏色也平滑起來(lái)呢？

要是能讓兩個(gè)線段間的顏色平滑過(guò)渡就好了。

想到這里，我們又想起了前面那個(gè)用顏色表示軌跡進(jìn)度的官方示例，如果把兩種方式結(jié)合一下或許能實(shí)現(xiàn)想要的效果。

實(shí)現(xiàn)思路：

每條線段的屬性中有開(kāi)始速度和結(jié)束速度，根據(jù)顏色和速度的對(duì)應(yīng)關(guān)系，可以插值出每條線段的開(kāi)始顏色和結(jié)束顏色，前一條線段的開(kāi)始顏色和后一條線段的結(jié)束顏色為同一個(gè)顏色，每條線段中間的顏色通過(guò)使用line-gradient實(shí)現(xiàn)從開(kāi)始顏色到結(jié)束顏色的漸變。

這樣就能實(shí)現(xiàn)兩個(gè)線段間顏色的平滑過(guò)渡了。

實(shí)現(xiàn)方法：

按照這個(gè)思路需要進(jìn)行兩次插值，第一次插值是插值出每個(gè)線段的開(kāi)始顏色和結(jié)束顏色，第二次是插值出每個(gè)線段上每個(gè)像素的顏色

本來(lái)是想在mapboxgl中，通過(guò)多個(gè)表達(dá)式的嵌套來(lái)實(shí)現(xiàn)此功能，這樣代碼會(huì)比較簡(jiǎn)潔，但多次嘗試發(fā)現(xiàn)行不通，原因是，因?yàn)閙apboxgl對(duì)line-gradient和line-progress在的使用上的一些限制，所以第一次插值的邏輯需要自己動(dòng)手實(shí)現(xiàn)。

第一步，自己動(dòng)手寫個(gè)顏色插值函數(shù)，插值出每個(gè)線段的開(kāi)始顏色和結(jié)束顏色，實(shí)現(xiàn)方式注釋里面已經(jīng)寫的比較清楚了。

//通過(guò)canvas獲取開(kāi)始顏色和結(jié)束顏色：
//原理是利用canvas創(chuàng)建一個(gè)線性漸變色對(duì)象，再通過(guò)計(jì)算顏色所在的位置去用getImageData獲取顏色，最后返回這個(gè)顏色
//1.創(chuàng)建canvas
var canvas = document.createElement("canvas");
canvas.width = 101;
canvas.height = 1;
var ctx = canvas.getContext('2d');
//2.創(chuàng)建線性漸變的函數(shù)，該函數(shù)會(huì)返回一個(gè)線性漸變對(duì)象，參數(shù)0,1,101,1分別指：漸變的起始點(diǎn)x，y和漸變的終止點(diǎn)x，y
var grd = ctx.createLinearGradient(0,1,101,1) 
//3.給線性漸變對(duì)象添加顏色點(diǎn)的函數(shù)，參數(shù)分別是停止點(diǎn)、顏色
grd.addColorStop(0,'red');
grd.addColorStop(0.8,'yellow');
grd.addColorStop(1,'lime');
//4.給canvas填充漸變色
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 101, 1);
//5.返回漸變色的函數(shù)
function getInterpolateColor(r) {
    //6.這里是漸變色的精細(xì)度，我將canvas分成101份來(lái)取值，每一份都會(huì)有自己對(duì)應(yīng)的顏色
    //聲明的變量x就是我們需要的顏色在漸變對(duì)象上的位置
    let x =  parseInt(r * 100);
    x>100?x=100:x=x
    //7.傳入插值顏色所在的位置x，通過(guò)canvas的getImageData方法獲取顏色
    var colorData = ctx.getImageData(x, 0, 1, 1).data;
    //8.返回這個(gè)顏色
    return `rgba(${colorData[0]},${colorData[1]},${colorData[2]},${colorData[3]})`
}

第二步，每個(gè)線段設(shè)置為一個(gè)圖層，每個(gè)圖層調(diào)用第一步的方法獲取線段的開(kāi)始顏色和結(jié)束顏色，然后使用line-gradient屬性設(shè)置線段中間的顏色。

//allFeatures是line數(shù)據(jù)中單個(gè)線段組成的集合
allFeatures.map((item,index)=>{
    //通過(guò)上面的漸變色函數(shù)獲取開(kāi)始顏色和結(jié)束顏色
    let startColor = getInterpolateColor(item.properties.startSpeed/10)
    let endColor = getInterpolateColor(item.properties.endSpeed/10)
    //循環(huán)添加圖層
    map.addLayer({
        type: 'line',
        source: 'line',
        id: 'line'+index,
        paint: {
            'line-width': 6,
            'line-blur': 0.5,
            'line-gradient': [
                'interpolate',
                ['linear'],
                ['line-progress'],
                0, startColor,
                1, endColor
            ]
        },
        layout: {
            'line-cap': 'round',
        },
        'filter': ['==', "$id", index]
    });
})

每個(gè)線段設(shè)置為一個(gè)圖層，最后可能會(huì)有上千個(gè)圖層，這樣不容易管理。

這里提供另一種思路，可以將所有線段合并為一條折線，然后計(jì)算出折線上每個(gè)節(jié)點(diǎn)的速度、顏色和占整個(gè)軌跡的百分比，占整個(gè)軌跡的百分比通過(guò)節(jié)點(diǎn)距離起點(diǎn)和終點(diǎn)的長(zhǎng)度來(lái)計(jì)算。

將所有節(jié)點(diǎn)的百分比和顏色兩兩對(duì)應(yīng)作為line-gradient的判斷參數(shù)，這樣就能產(chǎn)生和多個(gè)圖層同樣的效果，同時(shí)只需要?jiǎng)?chuàng)建一個(gè)圖層。

這種方式的缺點(diǎn)是需要處理數(shù)據(jù)，具體適合用哪種可以根據(jù)實(shí)際情況來(lái)定。

最終實(shí)現(xiàn)效果如下：

示例在線地址：http://gisarmory.xyz/blog/index.html?demo=mapboxglStyleInterpolate3

2. 模型網(wǎng)格渲染

這種模式下，網(wǎng)格數(shù)據(jù)主要來(lái)自模型輸出結(jié)果，在輸出結(jié)果的基礎(chǔ)上，只需要用interpolate插值工具，根據(jù)網(wǎng)格屬性值插值出網(wǎng)格顏色就ok。

下面的代碼和效果圖，是用EFDC模型的輸出結(jié)果做的示例，這個(gè)網(wǎng)格相對(duì)比較大一些，但中間部分的過(guò)渡還算自然。

代碼：

//圖層
{
    "id": "waterTN",
    "type": "fill",
    "source": "efdc",
    "paint": {
        "fill-color": [
            "interpolate",
            ["linear"],
            ["get", "TN"],//輸入值是屬性TN
            0, "#36D1DC",
            15, "#6666ff",
            20, "#4444FF"
        ]
    }
}

效果圖：

四、隨著地圖縮放對(duì)圖形屬性進(jìn)行插值

mapboxgl官網(wǎng)給出了兩個(gè)相關(guān)示例：

一個(gè)是按照縮放級(jí)別改變建筑顏色，里面同時(shí)對(duì)建筑物的顏色和透明度進(jìn)行了插值。

相關(guān)代碼：

//對(duì)顏色插值
map.setPaintProperty('building', 'fill-color', [
    "interpolate",
    ["exponential", 0.5],
    ["zoom"],
    15,
    "#e2714b",
    22,
    "#eee695"
]);
//對(duì)透明度插值
map.setPaintProperty('building', 'fill-opacity', [
    "interpolate",
    ["exponential", 0.5],
    ["zoom"],
    15,
    0,
    22,
    1
]);

效果圖：

另一個(gè)是按照地圖縮放級(jí)別去改變建筑物顯示高度，里面對(duì)建筑物的高度和建筑物距離地圖的高度進(jìn)行了插值。

相關(guān)代碼：

map.addLayer({
    'id': '3d-buildings',
    'source': 'composite',
    'source-layer': 'building',
    'filter': ['==', 'extrude', 'true'],
    'type': 'fill-extrusion',
    'minzoom': 15,
    'paint': {
        'fill-extrusion-color': '#aaa',
        'fill-extrusion-height': [
            "interpolate", ["linear"],
            ["zoom"],
            15, 0,
            15.05, ["get", "height"]
        ],
        'fill-extrusion-base': [
            "interpolate", ["linear"],
            ["zoom"],
            15, 0,
            15.05, ["get", "min_height"]
        ],
        'fill-extrusion-opacity': .6
    }
}, labelLayerId);

效果圖：

同理，我們還可以對(duì)地圖圖標(biāo)的大小進(jìn)行插值，比如縮放級(jí)別越大圖標(biāo)越大，縮放級(jí)別越小圖標(biāo)越小等。

五、interpolate的高階用法

前面介紹插值工具interpolate的語(yǔ)法時(shí)，暫時(shí)沒(méi)有介紹插值類型這個(gè)選項(xiàng)，這一節(jié)我們好好說(shuō)說(shuō)它。

前面的多數(shù)示例中，插值類型選項(xiàng)我們都是使用的['linear']這個(gè)類型，意思是線性插值。

除了線性插值外，插值類型還支持["exponential",base]指數(shù)插值和["cubic-bezier", x1, y1, x2, y2]三次貝賽爾曲線插值。

它們的語(yǔ)法為：

["linear"]線性插值，沒(méi)有其它參數(shù)。
["exponential",base]指數(shù)插值，base參數(shù)為指數(shù)值。
["cubic-bezier",x1,y1,x2,y2]三次貝塞爾曲線插值，x1、y1、x2、y24個(gè)參數(shù)用于控制貝塞爾曲線的形態(tài)。

聽(tīng)上去可能有點(diǎn)抽象，我們舉個(gè)例子：

下面這段的代碼是根據(jù)地圖縮放級(jí)別改變建筑物的透明度：

map.setPaintProperty('building', 'fill-opacity', [
   "interpolate", 
    ["linear"],
    ["zoom"],
    15,0,
    22,1
]);

意思為：

當(dāng)縮放級(jí)別小于15時(shí)，透明度為0。
當(dāng)縮放級(jí)別大于等于22時(shí)，透明度為1。
當(dāng)縮放級(jí)別在15到22之間時(shí)，使用線性插值方式自動(dòng)計(jì)算透明度的值，介于0到1之間。

線性插值：

如果把縮放級(jí)別設(shè)置為x，透明度為y，限定x的值在15到22之間，則線性插值的方程式為：

y=(x-15)/(22-15)

從下面的函數(shù)圖像上可以直觀的看出，它就是一條直線，這意味著地圖放大時(shí)，從15級(jí)開(kāi)始到22級(jí)，建筑物不透明度會(huì)勻速的增加，直到完全顯示。

指數(shù)插值：

指數(shù)插值的方程式在線性插值方程式的基礎(chǔ)上增加了指數(shù)值，這個(gè)值我們用z來(lái)表示，方程式為：

y=((x-15)/(22-15))^z

通過(guò)z值來(lái)我們可以調(diào)整函數(shù)圖像的形態(tài)，如：分別取z值為0.1、0.5、1、2、10這5個(gè)值，畫(huà)成圖如下：

以上圖中指數(shù)為10次方的紫色線為例，當(dāng)?shù)貓D從15級(jí)放大到19級(jí)時(shí)，會(huì)一直都看不到建筑物，因?yàn)榻ㄖ锏耐该鞫纫恢睘?。

繼續(xù)放大，從19級(jí)放大到22級(jí)時(shí)，建筑物會(huì)快速的顯現(xiàn)直到完全顯示。

這就是指數(shù)插值和線性插值的區(qū)別，它提供給了我們一個(gè)可以控制插值輸出快慢的方式。

三次貝塞爾曲線插值：

三次貝塞爾曲線插值和上面的指數(shù)插值是一個(gè)意思，都是為了能夠更靈活的控制插值輸出的快慢。

還是通過(guò)函數(shù)圖像來(lái)幫助理解，指數(shù)插值的圖像只能向一個(gè)方向彎曲，指數(shù)在0-1之間時(shí)曲線向上彎曲，大于1時(shí)曲線向下彎曲。

而三次貝塞爾曲線插值則可以讓曲線雙向彎曲。

mapboxgl官網(wǎng)提供了一個(gè)海洋深度的示例，里面有用到三次貝塞爾曲線插值。

示例中使用三次貝塞爾曲線對(duì)表示海洋深度的顏色進(jìn)行插值，效果如下圖：

相關(guān)代碼如下：

{
    'id': '10m-bathymetry-81bsvj',
    'type': 'fill',
    'source': '10m-bathymetry-81bsvj',
    'source-layer': '10m-bathymetry-81bsvj',
    'layout': {},
    'paint': {
    'fill-outline-color': 'hsla(337, 82%, 62%, 0)',
    'fill-color': [
        'interpolate',
        ['cubic-bezier', 0, 0.5, 1, 0.5],
        ['get', 'DEPTH'],
        200,'#78bced',
        9000,'#15659f'
        ]
    }
},

上面代碼中，三次貝塞爾曲線插值的4個(gè)參數(shù)x1、y1、x2、y2的值分別為：0、 0.5、 1、 0.5。

它的函數(shù)圖像為：

通過(guò)上圖可以看出，函數(shù)輸出的速度是先快再慢最后又快，結(jié)合海洋深度的示例，當(dāng)深度在200米和9000米附近時(shí)，顏色變化較快，深度在中間時(shí)，顏色變化比較平緩。下面兩張圖是線性插值和三次貝塞爾曲線插值的對(duì)比：

上圖使用["linear"]線性插值，顏色勻速輸出，能看出深淺變化，但是‘塊狀感’明顯

下圖使用 ['cubic-bezier', 0, 0.5, 1, 0.5]三次貝塞爾曲線插值，顏色輸出先快再慢最后又快，既能看出深淺變化，又能實(shí)現(xiàn)自然過(guò)渡的平滑效果，會(huì)讓人感覺(jué)更柔和。

推薦文章一篇通俗易懂的三次貝塞爾曲線講解可以了解三次貝塞爾曲線是怎么畫(huà)出來(lái)的，還有一個(gè)工具網(wǎng)站可以自己畫(huà)點(diǎn)幫助理解。

這三種插值方法所代表的函數(shù)都可以在坐標(biāo)軸中畫(huà)出來(lái)，無(wú)論畫(huà)出來(lái)是直線還是各種曲線，我們都不需要去糾結(jié)這個(gè)線條是如何畫(huà)的，因?yàn)檫@一步我們可以借助工具來(lái)完成，需要關(guān)心的是這條線它輸出速度的快慢，這才和我們"interpolate"表達(dá)式的意義平滑過(guò)渡相關(guān)。

六、總結(jié)

interpolate是mapboxgl地圖樣式中用于插值的表達(dá)式，能對(duì)顏色和數(shù)字進(jìn)行插值，可以讓地圖實(shí)現(xiàn)平滑的過(guò)渡效果。
它的應(yīng)用場(chǎng)景有兩類，一類是對(duì)地圖數(shù)據(jù)進(jìn)行顏色拉伸渲染，如：熱力圖、軌跡圖、模型網(wǎng)格渲染等。
另一類是在地圖縮放時(shí)對(duì)圖形屬性進(jìn)行插值，如：隨著地圖的縮放實(shí)現(xiàn)建筑物高度的緩慢變化、圖形顏色的平滑切換等效果。
interpolate插值工具提供了三種插值方式，線性插值、指數(shù)插值、三次貝塞爾曲線插值，它們的區(qū)別在于控制插值輸出快慢的不同。

到此這篇關(guān)于mapboxgl 中插值表達(dá)式的應(yīng)用場(chǎng)景的文章就介紹到這了,更多相關(guān)mapboxgl 插值表達(dá)式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: