openlayers官方教程（十）Vector Data——Making it look nice

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)'
      })
    });
  }
});

效果图如下：

转载自：https://blog.csdn.net/u011435933/article/details/80502371