要素

创建要素

createFeature

点我查看代码

<script lang="ts" setup>
import { createCircleFeature, createLineStringFeature, createPointFeature, createPolygonFeature, createStyle, createVectorLayer, EPSG_4326, getOSMLayer, OlMap } from '@summeruse/ol'
import { Map as OLMap } from 'ol'

const olMap = new OLMap()
const osmLayer = getOSMLayer()
olMap.addLayer(osmLayer)
const { source, layer } = createVectorLayer({
  style: (feature) => {
    const name = feature.get('name')
    return 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: name,
        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 = createPointFeature([120, 30], {
  name: 'point',
})

source.addFeature(point)

const line = createLineStringFeature([[120.1, 30.1], [120.2, 30.2]], {
  name: 'line',
})
source.addFeature(line)

const polygon = createPolygonFeature([[[120.11, 30.15], [120.15, 30.25], [120.1, 30.2], [120.11, 30.15]]], {
  name: 'polygon',
})
source.addFeature(polygon)

const circle = createCircleFeature([120.4, 30.12], 0.1, {
  name: 'circle',
})
source.addFeature(circle)
</script>

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

源代码

点我查看代码

import type { Coordinate } from 'ol/coordinate'
import type {
  Geometry,
} from 'ol/geom'
import type { Style } from 'ol/style'
import type { StyleOptions } from '../style'
import { Feature } from 'ol'
import {
  Circle,
  LineString,
  MultiLineString,
  MultiPoint,
  MultiPolygon,
  Point,
  Polygon,
} from 'ol/geom'
import { createStyle } from '../style'

export interface FeatureOptions {
  style?: Style
  styleOptions?: StyleOptions
  geometry?: Geometry
  [key: string]: any
}

export function createPoint(coordinates: Coordinate) {
  return new Point(coordinates)
}

export function createLineString(coordinates: Coordinate[]) {
  return new LineString(coordinates)
}

export function createPolygon(coordinates: Coordinate[][]) {
  return new Polygon(coordinates)
}

export function createCircle(center: Coordinate, radius: number) {
  return new Circle(center, radius)
}

export function createMultiPoint(coordinates: Coordinate[]) {
  return new MultiPoint(coordinates)
}

export function createMultiLineString(coordinates: Coordinate[][]) {
  return new MultiLineString(coordinates)
}

export function createMultiPolygon(coordinates: Coordinate[][][]) {
  return new MultiPolygon(coordinates)
}

export function createFeature(options?: FeatureOptions) {
  const { styleOptions, ...restOptions } = options ?? {}
  const style = styleOptions ? createStyle(styleOptions) : restOptions.style
  const feature = new Feature({
    ...restOptions,
    style,
  })
  return feature
}

export function createPointFeature(coordinates: Coordinate, options?: FeatureOptions) {
  const geometry = createPoint(coordinates)
  return createFeature({
    ...options,
    geometry,
  }) as Feature<Point>
}

export function createLineStringFeature(coordinates: Coordinate[], options?: FeatureOptions) {
  const geometry = createLineString(coordinates)
  return createFeature({
    ...options,
    geometry,
  }) as Feature<LineString>
}

export function createPolygonFeature(coordinates: Coordinate[][], options?: FeatureOptions) {
  const geometry = createPolygon(coordinates)
  return createFeature({
    ...options,
    geometry,
  }) as Feature<Polygon>
}

export function createCircleFeature(center: Coordinate, radius: number, options?: FeatureOptions) {
  const geometry = createCircle(center, radius)
  return createFeature({
    ...options,
    geometry,
  }) as Feature<Circle>
}

export function createMultiPointFeature(coordinates: Coordinate[], options?: FeatureOptions) {
  const geometry = createMultiPoint(coordinates)
  return createFeature({
    ...options,
    geometry,
  }) as Feature<MultiPoint>
}

export function createMultiLineStringFeature(coordinates: Coordinate[][], options?: FeatureOptions) {
  const geometry = createMultiLineString(coordinates)
  return createFeature({
    ...options,
    geometry,
  }) as Feature<MultiLineString>
}

export function createMultiPolygonFeature(coordinates: Coordinate[][][], options?: FeatureOptions) {
  const geometry = createMultiPolygon(coordinates)
  return createFeature({
    ...options,
    geometry,
  }) as Feature<MultiPolygon>
}