OpenLayers 3 之地图样式（ol.style）详解_qingyafan的博客

一、ol.style

1. 可以配置的选项

* @ typedef { { geometry : ( undefined | string | ol.geom.Geometry | ol.style.GeometryFunction ), * fill : ( ol.style.Fill | undefined ), * image : ( ol.style.Image | undefined ), * stroke : ( ol.style.Stroke | undefined ), * text : ( ol.style.Text | undefined ), * zIndex : ( number | undefined )}} * @ api

geometry，要素的属性，或者要素，或者一个返回一个地理要素的函数，用来渲染成相应的地理要素；
fill，填充要素的样式；
iamge，图片样式，类型为 ol.style.Image ；
stroke，要素边界样式，类型为 ol.style.Stroke ；
text，要素文字的样式，类型为 ol.style.Text ；
zIndex，CSS中的zIndex，即叠置的层次，为数字类型。

2. 子类

ol.style.Circle，针对矢量要素设置圆形的样式，继承 ol.style.Image ；
ol.style.Icon，针对矢量数据设置图标样式，继承 ol.style.Image ；
ol.style.Fill，针对矢量要素设置填充样式；
ol.style.RegularShape，对矢量要素设置规则的图形样式，如果设置 radius ，结果图形是一个规则的多边形，如果设置 radius1 和 radius2 ，结果图形将是一个星形；
ol.style.Stroke，矢量要素的边界样式；
ol.style.Text，矢量要素的文字样式。

可以看出这些样式都是针对矢量要素的。

二、举例说明

假设有一个矢量图层，使用如下的样式配置图层：

var style = new ol.style.Style({
  fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度
    color: 'rgba(255, 255, 255, 0.6)'
  stroke: new ol.style.Stroke({ //边界样式
    color: '#319FD3',
    width: 1
  text: new ol.style.Text({ //文本样式
    font: '12px Calibri,sans-serif',
    fill: new ol.style.Fill({
      color: '#000'
    stroke: new ol.style.Stroke({
      color: '#fff',
      width: 3
按照以上配置，效果如下图： 
 
1. geometry - 地理属性 
      geometry 可以是要素的地理属性，或者 geometry，或者一个返回 geometry 类型的函数。一般与 image 样式配合使用，表示 image 放置的位置，如下面的例子： 
new ol.style.Style({
    image: new ol.style.Circle({
      radius: 5,
      fill: new ol.style.Fill({
        color: 'orange'
    geometry: function(feature) {
      // return the coordinates of the first ring of the polygon
      var coordinates = feature.getGeometry().getCoordinates()[0];
      return new ol.geom.MultiPoint(coordinates);
      该样式配置了一个 image 属性，表示在相应的位置放置的图片的样式，这里是一个半径为 5，填充色为橙色的圆形的图片样式； geometry 属性配置了 image 放置的地理位置， 一个返回相应的要素的地理属性的函数。 
2. fill - 填充样式 
      color: 'rgba(255, 255, 255, 0.9)'，配置了图层的要素的填充颜色和透明度，格式为 [R, G, B, A]，分别代表 RGB 的三个分量，A 代表 alpha，即透明度。以上颜色配置为白色，每个分量值是 [0, 255] 区间内的值，越小，越暗；越大，越亮。透明度为 0.9，透明度是一个 [0, 1] 区间内的值，越小，要素越是透明；越大，越不透明。 
      更改颜色 [0, 255, 0, 0.9]，将颜色的绿色分量调为最大，其他颜色分量调为 0，那么地图的背景色应该变为纯绿色，刷新浏览器，得到下图： 
 
3. image - 图片样式 
      样式主要针对矢量图层（vector layer），矢量图层中包含一个或多个要素（feature），要素中包含一个地理属性（geometry）表示地理位置，还可能包含一个或多个其他属性，比如要素的名称、类型等等，要素可以使用单独的样式，这时候要使用 feature.setStyle(ol.style.Style) 来设置单独使用的样式，否则直接继承矢量图层的样式。 
使用 setStyle 方法设置单个要素样式，首先定义一个图标样式： 
var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(({
    src: 'data/icon.png'
      设置一个显示在特定位置的图片图标，使用 ol.style.Icon配置该属性，src属性设置了图片的地址，还可以设置透明度等属性。接下来定义一个点要素： 
var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point([0, 0]),
      将样式应用于点要素：iconFeature.setStyle(iconStyle);，最后定义一个矢量图层，并加入该要素： 
var iconLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [iconFeature]
得到结果是，在[0, 0]坐标处显示一个图标，如图： 
 
      该样式有一个特性，就是地图中不显示相应区域时候，图片默认不加载，当该区域在地图视口中，才会加载图片，当然这是为了节省带宽，提高性能。如果我们将图层的style属性配置为iconStyle，那么结果是一样的，其结果是图层中的所有要素都会是一样的样式。需要指出的是，该样式只针对于点要素。 
4. stroke - 边界线条 
      color: '#319FD3', width: 1，配置要素边界的颜色为 ‘#319FD3’，16 进制颜色代码，width 说明线条宽度为 1 像素。更改颜色为红色：’#FF0000’，结果如下图： 
 
5. text - 文字 
      设置矢量图层中的各个要素中要显示的文字的字体类型，线条填充颜色，线条边界颜色，因为文字的线条本身就具有宽度，所以有填充色和边界颜色说法。如下面的例子，设置了文字的大小、字体、填充色和边界颜色： 
text: new ol.style.Text({
  font: '12px Calibri,sans-serif',    //字体与大小
  fill: new ol.style.Fill({    //文字填充色
    color: '#000'
  stroke: new ol.style.Stroke({    //文字边界宽度与颜色
    color: '#fff',
    width: 3
      font: '12px Calibri,sans-serif',指定了文字的大小和字体，我们修改文字大小为 24px，得到如下结果： 
 
      stroke 规定了文字的边缘线条的颜色和宽度，其实文字本身就像一个地理要素一样，有填充和线条样式，可以看出文字的笔画线条外边缘有白色，就是这个样式在起作用。 
6. 条件样式 
      条件样式是将样式配置为一个回调函数，其参数包含要素本身和分辨率，可以根据要素本身的属性和地图的分辨率，显示动态的样式，形式如 style: function(feature, resolution) {}。 
例如，以下代码段配置当分辨率小于 5000 时候，在要素上显示一个标签，标识要素名称： 
style: function(feature, resolution) {
    style.getText().setText(resolution < 5000 ? feature.get('name') : '');
    return styles;
      样式主要针对矢量图层数据，既可以配置一个全局的样式，也可以针对每个feature单独配置；既可以应用统一的样式，也可以根据要素和分辨率应用条件样式。样式应用是非常灵活的。 
      另外，样式是可以多个一起起作用的，就如同 HTML 的元素样式类 class 可以有多个一样。如下例子中，就应用了两个样式，一个是应用于多边形本身，另一个用于绘制每个多边形的顶点： 
var styles = [
  new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      width: 3
    fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.1)'
  new ol.style.Style({
    image: new ol.style.Circle({
      radius: 5,
      fill: new ol.style.Fill({
        color: 'orange'
    geometry: function(feature) {
      // return the coordinates of the first ring of the polygon
      var coordinates = feature.getGeometry().getCoordinates()[0];
      return new ol.geom.MultiPoint(coordinates);
OK，就写到这里！
                    地图样式是由 style 类控制的，其包含了地图样式的方方面面，例如，填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等，样式一般针对矢量要素图层。      矢量图层样式可以事先写好，写成静态的，矢量图层直接按照定义好的样式渲染，也可以动态使用样式的 set() 方法，但是要注意刷新矢量图层，重新渲染，否则动态样式不生效。
Iconstyle:function(feature,resolution) {
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(241,242,236,0.8)',
stroke : new ol.style.Stroke({
color : 'red',
width : 2
image:new ol.style.Icon(({
offset: [0, 0]
				// 添加点 val点的数据   点的事件类型envType：pointermove移入singleclick点击
var addPoint = function(val, envType , src ,track) {
    const that = this;
    var overlay = '';
    var key = null;
    var Point = new ol.geom.Point(bd09togcj02([val.lng, val.lat]));
    Point.a.
				上一篇讲过openlayers 可以使用iconfont来表示图标，好处是可以任意修改图标图片的颜色，但是如果是来表示大量要素时，存在卡顿现象，如在航班监控时，全国有1000多架航班同时在飞，系统每隔5秒刷新一次，由于用iconfont是用canvas来实时生成的，1000多架航班刷新会很卡，所以这时候应该用图片来表示图标，即将全国航班监控提取出来，单独用图片表示。
 * 功能：航班样...
公司需要个简单的二维底图，加载点线面数据，为了省时间就用openlayers框架写一个简单的加载方法，openlayers核心包含Map对象、View视图、Layer图层、Source来源、Feature等特征
二、加载配置
三、地图初始化
import esb from '@/plugins/esb'
import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import { getWidth,getC
				最近在学习openlayers的style，不得不佩服ol的设计太灵活了，很好很强大，也顺便了解了一下其它前端gis的框架，也都很强大，不得不佩服，前端技术已经发展到甩桌面程序几条街的程度。
本人学东西，一直都很慢而且容易忘，加上年龄又了，所以很多东西要反复记，所以这次写点下来，给自己看。
以前对arcgis桌面版的渲染了解的多些，所以对比了一下两套引擎的设计，发现ol的设计真尼玛简单，所有的渲染都来自var style =new ol.style.Style({})，{}里面可以放任何东西，不像arc
ol.Map：地图对象。
	ol.layer.Vector：图层对象layer。Map含有多个layer，最终的显示效果是由多个layer叠加而成。
	ol.source.Vector和ol.style.Style：
一个layer由两部分构成：数据源source和样式style。其含义是，该layer下所有的图形都使用同样的绘制样式。
ol.sou...
				新建矢量图层ol.layer.Vector时，可以通过使用ol.style来自定义渲染地图矢量要素的样式；
ol.style概述
在ol.style中默认可以配置的要素包括：
Fill：填充的样式，对应的模块为ol.style.Fill；
Geometry：地理属性，对应模块为ol.style.Style，使用GeometryFunction设置要素的地理位置、几何属性等；
Image：图像的样式...
				       在实际开发中，为了美观，需要设置Openlayers中地图div中除了地图之外的地方的透明度，这个通过设置.ol-viewport的样式就可以完成。项目测试代码如下：&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="utf-8" /&gt;
		&lt;title&gt;背景色测试&lt;/ti..
最近公司有个需求，直接在地图上可以切换天地图的地图和卫星图作为背景图，撇开ol自带的layerswitcher(天地图的标注和底图是分开的,因此算两个layer,切换不方便)，自己扩展了一个mapswitcher，将天地图的卫星图和地图做了封装，先来个封装好的效果图  :
注意在地图右上角的位置 多了一个单选框,可以选择 “卫星图”或者“地图”。
				前言：在ol中我们也可以添加一些图标在地图上，用于展示效果，较早期的版本OL提供一个overlay覆盖物的方式，在OL3和OL4中这种用法不太多了，一个主要的原因它是通过HTML的方式的添加到地图上，这种方式有一个很大的问题就是偏移，随着你放大或者缩小可以看到图标的位置明显偏移。主要的问题是overlay（覆盖物）主要以HTML的方式叠加到地图上。
				前言：OL可以让我们实现自定义的标注样式，用过CAD的同学应该都知道CAD中有上下文字中间用横线隔开的样式，这样标注让人一目了然的了解信息。给人以直观的的信息表达，本文实现就是分式的标注。
先来张图：
一、关于ol.style.Icon类
该类中有一个img参数，该参数非常好用，该参数的输入类型为Image | HTMLCanvasElement，第二个类型就是canvas标签，作为一个...
中国有句古话：“授之以鱼不如授之以渔”，所以今天我要记录的主要是关于 OpenLayers 的应用开发思路，而非某一具体的功能或代码。
OpenLayers 作为一个开源项目，我们首先需要知道的就是它的 官网 和 源码地址。官网作为项目信息的集合地，对开发者来说是一个很好的了解项目的入口；而源码地址则可以帮助我们更好的了解代码逻辑，协助我们定位问题，解决问题。
天才第一步
打开官网，我们会...