openlayer简易教程 about blog

[rottenpen]

生成线段

先来介绍最简单的生成线段，首先需要数据。
openlayers 的图层由 vector 组成，而 vector 里由 features 组成的。

// 生成 vector
let source = new ol.source.Vector()
// 生成 features
function createFeature ({type = 'Point', coordinates = [0, 0]}) {
  return new ol.Feature({
    geometry: new ol.geom[type](coordinates)
  })
}
// 为 vector 添加 features
source.addFeature(feature)
// 或者在生成 vector 的时候就添加 features
let Features = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: Features // 注意：Features 是数组
        }),
        zIndex: 100
      })

  createDashFeatures ({features: featuresList} = {}, options = {}) { // 生成虚线
    let features = []
    for (let feature of featuresList) {
      let olFeature
      olFeature = createFeature({ 
        type: feature.geometry.type,
        coordinates: feature.geometry.coordinates
      })
      olFeature.setStyle(new ol.style.Style({
        fill: new ol.style.Fill({
          color: '#0044CC'
        }),
        stroke: new ol.style.Stroke({
          lineDash: [10, 10, 10, 10, 10, 10],
          color: options.color || '#ffd700',
          width: 4
        })
      })
      )
      olFeature.data = feature
      features.push(olFeature)
    }
    return features
  }