Making it look nice

前面已經完成了基礎的功能，包括導入、編輯、導出。但是沒有做一下美化，當你創建了一個矢量圖層，會默認很多樣式。編輯過程中的交互也是默認的樣式，你可能注意到在編輯過程中線條很粗，這個可以通過向矢量圖層和交互提供style來控制這些屬性。

Static style

如果我們給所有要素集定義通用的樣式，可以如下配置：

const layer = new VectorLayer({
  source: source,
  style: new Style({
    fill: new Fill({
      color: 'red'
    }),
    stroke: new Stroke({
      color: 'white'
    })
  })
});

也可以給一組styles設置style屬性，但是這種方式并不是很好，采用下面的動態配置樣式更好

Dynamic style

當你想通過要素的一些屬性來分別渲染要素時，你可以用一個style函數來配置矢量圖層。這個函數可以根據不同的feature來渲染不同的樣式。所以，如果你有很多features，并且想有很好的渲染效果，寫好這個style函數很重要。

下面這個例子會根據圖層“name”屬性是以“A-M”或者“N-Z”開頭來渲染兩種不同的樣式：

const layer = new VectorLayer({
  source: source,
  style: function(feature, resolution) {
    const name = feature.get('name').toUpperCase();
    return name < "N" ? style1 : style2; // assuming these are created elsewhere
  }
});

注意這個地方要自定義style1和style2，例子沒有給出，否則會報錯。

Styling based on geometry area

為了動態樣式的原理，創建一個根據面積渲染要素的樣式函數。在此之前，需要在npm上安裝colormap包。我們可以通過下面代碼得到依賴：

npm install colormap

現在，我們載入樣式需要的包：

import {Fill, Stroke, Style} from 'ol/style';
import {getArea} from 'ol/sphere';
import colormap from 'colormap';

接下來，寫一組根據要素面積渲染圖層的樣式函數：

const min = 1e8; // the smallest area
const max = 2e13; // the biggest area
const steps = 50;
const ramp = colormap({
  colormap: 'blackbody',
  nshades: steps
});

function clamp(value, low, high) {
  return Math.max(low, Math.min(value, high));
}

function getColor(feature) {
  const area = getArea(feature.getGeometry());
  const f = Math.pow(clamp((area - min) / (max - min), 0, 1), 1 / 2);
  const index = Math.round(f * (steps - 1));
  return ramp[index];
}

下面就可以創建一個矢量圖層，并且把上面的樣式函數設置到其中：

const layer = new VectorLayer({
  source: source,
  style: function(feature) {
    return new Style({
      fill: new Fill({
        color: getColor(feature)
      }),
      stroke: new Stroke({
        color: 'rgba(255,255,255,0.8)'
      })
    });
  }
});

效果圖如下：