要素

创建要素

createFeature

点我查看代码

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

const olMap = new OLMap()
const osmLayer = createOpenStreetMapLayer()
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)

// 多几何要素
const multiPoint = createMultiPointFeature([[119.5, 29.8], [119.6, 29.9], [119.7, 29.85]], { name: 'multiPoint' })
source.addFeature(multiPoint)

const multiLine = createMultiLineStringFeature([
  [[119.8, 30.2], [119.9, 30.3]],
  [[119.85, 30.25], [119.95, 30.35]],
], { name: 'multiLine' })
source.addFeature(multiLine)

const multiPolygon = createMultiPolygonFeature([
  [[[119.4, 30.4], [119.5, 30.5], [119.35, 30.45], [119.4, 30.4]]],
  [[[119.6, 30.55], [119.7, 30.65], [119.55, 30.6], [119.6, 30.55]]],
], { name: 'multiPolygon' })
source.addFeature(multiPolygon)
</script>

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

API

geometry 工厂

创建原生 OpenLayers geometry 对象：

名称	类型	说明
createPoint	(coordinates: Coordinate) => Point	创建点
createLineString	(coordinates: Coordinate[]) => LineString	创建线段
createPolygon	(coordinates: Coordinate[][]) => Polygon	创建多边形
createCircle	(center: Coordinate, radius: number) => Circle	创建圆形
createMultiPoint	(coordinates: Coordinate[]) => MultiPoint	创建多点
createMultiLineString	(coordinates: Coordinate[][]) => MultiLineString	创建多线
createMultiPolygon	(coordinates: Coordinate[][][]) => MultiPolygon	创建多多边形

Feature 工厂

创建带样式的 Feature 对象：

名称	类型	说明
createFeature	(options?: FeatureOptions) => Feature	创建要素
createPointFeature	(coordinates: Coordinate, options?: FeatureOptions) => Feature<Point>	创建点要素
createLineStringFeature	(coordinates: Coordinate[], options?: FeatureOptions) => Feature<LineString>	创建线段要素
createPolygonFeature	(coordinates: Coordinate[][], options?: FeatureOptions) => Feature<Polygon>	创建多边形要素
createCircleFeature	(center: Coordinate, radius: number, options?: FeatureOptions) => Feature<Circle>	创建圆形要素
createMultiPointFeature	(coordinates: Coordinate[], options?: FeatureOptions) => Feature<MultiPoint>	创建多点要素
createMultiLineStringFeature	(coordinates: Coordinate[][], options?: FeatureOptions) => Feature<MultiLineString>	创建多线要素
createMultiPolygonFeature	(coordinates: Coordinate[][][], options?: FeatureOptions) => Feature<MultiPolygon>	创建多多边形要素

FeatureOptions

名称	类型	说明
geometry	Geometry	OpenLayers geometry 对象
style	Style	OpenLayers Style 对象
styleOptions	StyleOptions	样式配置，优先级低于 style
...rest	Record<string, any>	自定义数据字段，会存入 Feature 的 properties

源代码

点我查看代码

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, style, geometry, ...restOptions } = options ?? {}
  const _style = styleOptions ? createStyle(styleOptions) : style
  const feature = new Feature({
    geometry,
    ...restOptions,
  })
  feature.setStyle(_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>
}