样式

创建样式

createStyle

调用了 createTextStyle 和 createCircleStyle 两个方法，分别用于创建文本样式和点样式。

点我查看代码

<script lang="ts" setup>
import { createVectorLayer, EPSG_4326, getOSMLayer, OlMap } from '@summeruse/ol'
import { Feature, Map as OLMap } from 'ol'
import { LineString, Point, Polygon } from 'ol/geom'
import { createStyle } from '.'

const olMap = new OLMap()
const osmLayer = getOSMLayer()
olMap.addLayer(osmLayer)
const { source, layer } = createVectorLayer({
  style: createStyle({
    circleOptions: {
      radius: 10,
      fillOptions: {
        color: 'red',
      },
      strokeOptions: {
        color: 'black',
        width: 4,
      },
    },
    fillOptions: {
      color: 'green',
    },
    strokeOptions: {
      color: 'blue',
      width: 5,
      lineDash: [10, 10],
    },
    textOptions: {
      text: 'hello',
      font: '20px Calibri,sans-serif',
      padding: [5, 5, 5, 5],
      offsetY: 30,
      fillOptions: {
        color: 'red',
      },
      strokeOptions: {
        color: 'black',
        width: 4,
      },
      backgroundFillOptions: {
        color: 'rgb(255, 255, 255)',
      },
      backgroundStrokeOptions: {
        color: 'rgb(0, 0, 0)',
        width: 4,
      },
    },
  }),
})
olMap.addLayer(layer)
const point = new Feature({
  geometry: new Point([120, 30]),
})
source.addFeature(point)

const line = new Feature({
  geometry: new LineString([[120.1, 30.1], [120.2, 30.2]]),
})
source.addFeature(line)

const polygon = new Feature({
  geometry: new Polygon([[[120.11, 30.15], [120.15, 30.25], [120.1, 30.2], [120.11, 30.15]]]),
})
source.addFeature(polygon)
</script>

<template>
  <OlMap :ol-map :projection="EPSG_4326" :center="[120, 30]" :zoom="10" class="w-100% h-400px" />
</template>

源代码

点我查看代码

import { Circle, Fill, Icon, Stroke, Style, Text } from 'ol/style'

export type FillOptions = ConstructorParameters<typeof Fill>[0]
export type StrokeOptions = ConstructorParameters<typeof Stroke>[0]
export type IconOptions = ConstructorParameters<typeof Icon>[0]
export type _StyleOptions = ConstructorParameters<typeof Style>[0]
export type _CircleOptions = ConstructorParameters<typeof Circle>[0]
export type _TextOptions = ConstructorParameters<typeof Text>[0]

export type CircleOptions = _CircleOptions & {
  fillOptions?: FillOptions
  strokeOptions?: StrokeOptions
}

export type TextOptions = _TextOptions & {
  fillOptions?: FillOptions
  strokeOptions?: StrokeOptions
  backgroundFillOptions?: FillOptions
  backgroundStrokeOptions?: StrokeOptions
}

export type StyleOptions = _StyleOptions & {
  fillOptions?: FillOptions
  strokeOptions?: StrokeOptions
  iconOptions?: IconOptions
  circleOptions?: CircleOptions
  textOptions?: TextOptions
}

export function createCircleStyle(options: CircleOptions) {
  const { fillOptions, strokeOptions, ...rest } = options
  return new Circle({
    ...rest,
    fill: fillOptions ? new Fill(fillOptions) : undefined,
    stroke: strokeOptions ? new Stroke(strokeOptions) : undefined,
  })
}

export function createTextStyle(options: TextOptions) {
  const { fillOptions, strokeOptions, backgroundFillOptions, backgroundStrokeOptions, ...rest }
    = options
  return new Text({
    ...rest,
    fill: fillOptions ? new Fill(fillOptions) : undefined,
    stroke: strokeOptions ? new Stroke(strokeOptions) : undefined,
    backgroundFill: backgroundFillOptions ? new Fill(backgroundFillOptions) : undefined,
    backgroundStroke: backgroundStrokeOptions ? new Stroke(backgroundStrokeOptions) : undefined,
  })
}

export function createStyle(options: StyleOptions) {
  const { fillOptions, strokeOptions, iconOptions, circleOptions, textOptions, ...rest } = options
  const fill = fillOptions ? new Fill(fillOptions) : undefined
  const stroke = strokeOptions ? new Stroke(strokeOptions) : undefined
  const icon = iconOptions ? new Icon(iconOptions) : undefined
  const circle = circleOptions ? createCircleStyle(circleOptions) : undefined
  const text = textOptions ? createTextStyle(textOptions) : undefined
  return new Style({
    ...rest,
    fill,
    stroke,
    image: icon || circle,
    text,
  })
}