我在哪里可以找到在 openlayers 3 中实现自定义 ol.style.Style 的详尽描述？

Question

我已经通读了源代码，并查看了示例，但还没有找到答案。

我需要为出现在鼠标光标下方的修改叠加层上的图像设置样式。

我正在使用自定义样式函数将中点和自定义端点添加到 ol.interaction.Modify 使用的层。 ol.interaction.Modify 正在将样式应用到鼠标光标附近的点以指示可以修改该功能。这很棒，只是光标样式位于自定义端点下方。我找不到改变 z-index 的方法。

Answer 1

ol.interaction.Modify, ol.interaction.Select and ol.interaction.Draw 采用 style 参数来改变素描特征的外观。

Answer 2

所以，我正在为自己回答我的问题。我想这就是互联网的美妙之处。我不是狗

// we'd normally pass feature & resolution parameters to the function, but we're going to
// make this dynamic, so we'll return a style function for later use which will take those params.

DynamicStyleFunction = ( function( /* no feat/res yet!*/ ) {

  /**
   you really only get style are rendered upon simple geometries, not features. features are made of different geometry types, and styleFunctions are passed a feature that has its geometries rendered.  in terms of styling vector geometries, you have only a few options. side note: if there's some feature you expect to see on the the map and it's not showing up, you probably haven't properly styled it. Or, maybe it hasn't been put it in a collection that is included in the source layer... which is a hiccup for a different day.
  */

  // for any geometry that you want to be rendered, you'll want a style. 
  var styles = {};
  var s = styles;

 /**
   an ol.layer.Vector or FeatureOverlay, renders those features in its source by applying Styles made of Strokes, Fills, and Images (made of strokes and fills) on top of the simple geometries which make up the features

   Stroke styles get applied to ol.geom.GeometryType.LINE_STRING

   MULTI_LINE_STRING can get different styling if you want

  */

  var strokeLinesWhite =   new ol.style.Stroke({ 
      color:  [255, 255, 255, 1], // white
      width:  5,
    })

  var whiteLineStyle  new ol.style.Style({
    stroke: strokeLinesWhite
  })

  styles[ol.geom.GeometryType.LINE_STRING] = whiteLineStyle

  /** 
    Polygon styles get applied to ol.geom.GeometryType.POLYGON

    Polygons are gonna get filled. They also have Lines... so they can take stroke

  */

  var fillPolygonBlue = new ol.style.Style({
    fill:  new ol.style.Fill({
      color: [0, 153, 255, 1], // blue
    })
  })

  var whiteOutlinedBluePolygon = new ol.style.Style({
    stroke: strokeLinesWhite,
    fill:   fillPolygonBlue,
  })

  styles[ol.geom.GeometryType.POLYGON] = fillPolygonBlue

  /** 
    Circle styles get applied to ol.geom.GeometryType.POINT

    They're made with a radius and a fill, and the edge gets stroked... 

  */

  var smallRedCircleStyle = new ol.style.Style({ 
    image: new ol.style.Circle({
      radius: 5,
      fill: new ol.style.Fill({
        color: '#FF0000', // red... but i had to look it up
      })
    })
  })

  var whiteBigCircleWithBlueBorderStyle = new ol.style.Style({ 
    image: new ol.style.Circle({
      radius: 10,
      fill: new ol.style.Fill({
        color: '#FFFFFF' // i guessed it
      })
    }),
    stroke: new.ol.style.Stroke({
      color: '#0000FF',  // blue
      width: 5
    })
  })

  // render all points as small red circles
  styles[ol.geom.GeometryType.POINT] = smallRedCircleStyle


  // if you pass an array as the style argument, every rendering of the feature will apply every defined style style rendered with the geometry as the argument. that can be a whole lot of rendering in a FeatureOverlay... 

  smallRedCircleStyle.setZIndex(Infinity)
  whiteBigCircleWithBlueBorderStyle.setZIndex(Infinity -1) // that prob wouldn't work, but i hope it's instructive that you can tinker with styles

  // so... 
  var bullseyePointStyle = [ smallRedCircleStyle, whiteBigCircleWithBlueBorderStyle ];

  return function dynamicStyleFunction (feature, resolution){

    // this is the actual function getting invoked on each function call
    // do whatever you want with the feature/resolution.

    if (Array.indexOf(feature.getKeys('thisIsOurBullseyeNode') > -1) {
      return bullseyePointStyle
    } else if (feature.getGeometryName('whiteBlueBox')){
      return whiteOutlinedBluePolygon
    } else {
      return styles[feature.getGeometryName()]
    }
  }
})()

我在哪里可以找到在 openlayers 3 中实现自定义 ol.style.Style 的详尽描述？

where can i find a thorough description of implementing custom ol.style.Style in openlayers 3?

openlayers-3