opengis/src/base/SymbolUtil.js

openlayer Map Component for Vue 2.0

/**
 * 胡红勋 2017-12-21地图符号工具转化类
 */
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 (symbolObj = {
  xOffset: 0,
  yOffset: 0,
  width: 20,
  height: 20,
  rotation: 0,
  offsetOrigin: 'top-left'
}) {
  var _style = null
  const { outLineWidth, outLineColor, backgroundColor, size, width, height, xOffset, yOffset, offsetOrigin, externalGraphic } = symbolObj
  // 图片渲染的点
  if (externalGraphic) {
    _style = new ol.style.Style({
      image: new ol.style.Icon({
        src: symbolObj.externalGraphic,
        size: [width, height],
        offset: [xOffset, yOffset],
        rotation: 0,
        offsetOrigin: offsetOrigin
      })
    })
  } else {
    var fill = new ol.style.Fill({
      color: backgroundColor
    })
    var stroke = new ol.style.Stroke({
      color: outLineColor,
      width: outLineWidth
    })
    _style = new ol.style.Style({
      image: new ol.style.Circle({
        fill: fill,
        stroke: stroke,
        radius: size
      }),
      fill: fill,
      stroke: stroke
    })
  }
  return _style
}

function _convertPolylineSymbol (symbolObj = {
  outLineColor: '#000000',
  outLineWidth: 1
}) {
  var style = new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: symbolObj.outLineColor,
      width: symbolObj.outLineWidth
    })
  })
  return style
}

function _convertPolygonSymbol (symbolObj = {
  outLineColor: '#000000',
  outLineWidth: 1,
  backgroundColor: '#F0E68C'
}) {
  var style = new ol.style.Style({
    fill: new ol.style.Fill({ // 矢量图层填充颜色，以及透明度
      color: symbolObj.backgroundColor
    }),
    stroke: new ol.style.Stroke({ // 边界样式
      color: symbolObj.outLineColor,
      width: symbolObj.outLineWidth
    })
  })
  return style
}