openlayers官方教程（十）Vector Data—

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

本文主要是介绍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)'})});}
});

效果图如下：