openlayermap/src/base/SymbolUtil.js

openlayer Map Component for Vue 2.0

/**
 * 胡红勋 2017-5-27地图符号工具转化类
 */
import {
  GeometryType
} from './GeometryType.js'
import SymbolConfig from './SymbolConfig.js'
import ol from 'openlayers'
export function getSybmol(gType, symbolObj) {
  if (GeometryType.POINT === gType || GeometryType.MULTIPOINT === gType) {
    if (symbolObj) {
      return _convertPointSymbol(symbolObj)
    } else {
      return _convertPointSymbol(SymbolConfig['defaultPoint'])
    }
  }
  if (GeometryType.POLYLINE === gType || GeometryType.MULTIPOLYLINE === gType) {
    if (symbolObj) {
      return _convertPolylineSymbol(symbolObj)
    } else {
      return _convertPolylineSymbol(SymbolConfig['defaultPolyline'])
    }
  }
  if (GeometryType.POLYGON === gType || GeometryType.MULTIPOLYGON === gType) {
    if (symbolObj) {
      return _convertPolygonSymbol(symbolObj)
    } else {
      return _convertPolygonSymbol(SymbolConfig['defaultPolygon'])
    }
  }
  return null
}

function _convertPointSymbol({
  iconStyle,
  textStyle,
  circleStyle
}) {
  var _style = null
    // 图片渲染的点
  if (iconStyle && iconStyle.url) {
    _style = new ol.style.Style({
      image: _makeUpIconStyle(iconStyle),
      text: _makeUpTextStyle(textStyle)
    })
  } else {
    // 默认点的样式
    _style = new ol.style.Style({
      image: _makeUpCircleStyle(circleStyle)
    })
  }
  return _style
}

function _convertPolylineSymbol({
  iconStyle,
  textStyle,
  strokeStyle
}) {
  var style = null
  if (iconStyle && iconStyle.url) {
    style = new ol.style.Style({
      image: _makeUpIconStyle(iconStyle),
      text: _makeUpTextStyle(textStyle),
      stroke: _makeUpStrokeStyle(strokeStyle)
    })
  } else {
    style = new ol.style.Style({
      stroke: _makeUpStrokeStyle(strokeStyle)
    })
  }
  return style
}

function _convertPolygonSymbol({
  iconStyle,
  textStyle,
  fillColor,
  strokeStyle
}) {
  var style = null
  if (iconStyle && iconStyle.url) {
    style = new ol.style.Style({ // 矢量图层填充颜色，以及透明度
      image: _makeUpIconStyle(iconStyle),
      text: _makeUpTextStyle(textStyle),
      fill: _makeUpFillStyle(fillColor), // 边界样式
      stroke: _makeUpStrokeStyle(strokeStyle)
    })
  } else {
    style = new ol.style.Style({ // 矢量图层填充颜色，以及透明度
      fill: _makeUpFillStyle(fillColor), // 边界样式
      stroke: _makeUpStrokeStyle(strokeStyle),
      text: _makeUpTextStyle(textStyle)
    })
  }
  return style
}

export function _makeUpIconStyle(config) {
  var {
    url,
    scale = 1,
    rotation = 0,
    offsetOrigin = 'top-left',
    anchor = [0, 0],
    opacity = 1
  } = config
  var image = new ol.style.Icon({
    src: url,
    anchorXUnits: 'pixels', // 默认值为'fraction'.
    anchorYUnits: 'pixels',
    anchor: anchor,
    scale: scale, // 默认为1
    rotation: Math.PI / 180 * (-rotation), // 默认为0，传入角度，openlayer用的是弧度
    offsetOrigin: offsetOrigin, // 默认为'top-left';'bottom-left'/'bottom-right'/'top-right'
    opacity: opacity // 默认为1
  })
  return image
}

export function _makeUpTextStyle(config) {
  if (config) {
    var {
      fontFamily = '微软雅黑',
        label = '',
        labelXOffset = 0,
        labelYOffset = 0,
        fontSize = 1.2,
        fillColor
    } = config
    var text = new ol.style.Text({
      font: fontFamily,
      offsetX: labelXOffset,
      offsetY: labelYOffset, // 单位pixels，默认为0
      text: label,
      scale: fontSize,
      overflow: true,
      fill: _makeUpFillStyle(fillColor)
    })
    return text
  }
}

export function _makeUpStrokeStyle(config) {
  if (config) {
    var {
      outLineColor = '#000080',
        outLineWidth = 2,
        lineDash = [1]
    } = config
    var stroke = new ol.style.Stroke({
      color: outLineColor,
      width: outLineWidth,
      lineDash: lineDash
    })
    return stroke
  }
}

export function _makeUpFillStyle(fillColor) {
  var fill = new ol.style.Fill({
    color: fillColor || 'rgba(0,128,0,0.6)'
  })
  return fill
}

export function _makeUpCircleStyle(config) {
  var {
    fillColor,
    strokeStyle,
    radius = 3
  } = config
  var fill = new ol.style.Circle({
    fill: _makeUpFillStyle(fillColor),
    stroke: _makeUpStrokeStyle(strokeStyle),
    radius: radius
  })
  return fill
}
export const styleUtil = {
  setImage(feature, config) {
    var {
      url,
      width,
      height,
      xOffset = 0,
      yOffset = 0,
      rotation = 0,
      offsetOrigin = 'top-left',
      anchor = [1],
      opacity = 1
    } = config
    if (url) {
      var style = new ol.style.Style({
        image: _makeUpIconStyle({
          url,
          width,
          height,
          xOffset,
          yOffset,
          rotation,
          offsetOrigin,
          anchor,
          opacity
        })
      })
      feature.setStyle(style)
    }
  }
  // setText(feature, config) {
  //   var {
  //     fontFamily = '微软雅黑',
  //       labelXOffset = 0,
  //       labelYOffset = 0,
  //       label = '',
  //       fontSize = 1.2,
  //       fontColor = 'rgba(255, 0, 0, 1)'
  //   } = config
  //   var text = _makeUpTextStyle({
  //     fontFamily,
  //     labelXOffset,
  //     labelYOffset,
  //     label,
  //     fontSize,
  //     // fontColor,
  //     outLineColor,
  //     outLineWidth,
  //     lineDash
  //   })
  //   feature.getStyle().setText(text)
  // }
}