Feature

Feature 是一个用于地理要素的矢量对象，具有几何形状和其他属性特征，类似于 GeoJSON 等矢量文件格式中的要素。

Feature 可以通过setStyle单独设置样式；否则它们将使用其矢量图层的样式。

请注意，属性特征被设置为 Feature 对象上的BaseObject属性，因此它们是可观察的，并且具有 get/set 访问器。

通常，一个 Feature 具有单一的几何属性。您可以使用setGeometry方法设置几何形状，并使用getGeometry获取它。可以使用属性特征在 Feature 上存储多个几何形状。默认情况下，用于渲染的几何形状由属性名geometry标识。如果您想使用另一个几何属性进行渲染，请使用setGeometryName方法更改与 Feature 几何形状相关联的属性特征。例如：

import Feature from "ol/Feature.js";
import Polygon from "ol/geom/Polygon.js";
import Point from "ol/geom/Point.js";

const feature = new Feature({
  geometry: new Polygon(polyCoords),
  labelPoint: new Point(labelCoords),
  name: "My Polygon",
});

// get the polygon geometry
const poly = feature.getGeometry();

// 使用labelPoint中的坐标将Feature渲染为一个点
feature.setGeometryName("labelPoint");

// get the point geometry
const point = feature.getGeometry();

要给地图上添加几何图形，需要先添加一个矢量图层：

import "ol/ol.css";
import Map from "ol/Map.js";
import OSM from "ol/source/OSM.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import { fromLonLat } from "ol/proj";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";

const map = new Map({
  target: "map",
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: fromLonLat([109.06450587297525, 34.18640389101999]),
    zoom: 8,
  }),
});

// 矢量数据源
const vectorSource = new VectorSource();
// 矢量图层
const vectorLayer = new VectorLayer({
  source: vectorSource,
});
map.addLayer(vectorLayer);

创建点

const point = [108.0947753580964, 34.84363688848805];

const geometry = new Point(point);

const feature = new Feature({
  // 当前视图默认为EPSG:3857，所以需要转换
  geometry: geometry.transform("EPSG:4326", "EPSG:3857"),
});

const style = new Style({
  image: new Circle({
    fill: new Fill({
      color: "rgba(255,255,255,1)",
    }),
    stroke: new Stroke({
      color: "#3399CC",
      width: 2,
    }),
    radius: 5,
  }),
});

// 给Feature添加样式
feature.setStyle(style);
// 将Feature添加到矢量数据源中
vectorSource.addFeature(feature);

带图标的点：

const geometry = new Point(point);
const feature = new Feature({
  geometry: geometry.transform("EPSG:4326", "EPSG:3857"),
});
const style = new Style({
  image: new Icon({
    anchor: [0.5, 1], // 图表的锚点，此处表示锚点位置在图片横向的中间，竖向的最底下
    src: "./location.png",
  }),
});
feature.setStyle(style);

创建线段

export const coordinates = [
  [108.22710398504609, 34.45292242793366],
  [107.93843379192924, 33.958767830517445],
  [108.4972493877242, 33.875001840102584],
  [108.6229573000557, 34.18856531103877],
];

const geometry = new LineString(coordinates);
const feature = new Feature({
  geometry: geometry.transform("EPSG:4326", "EPSG:3857"),
});
const style = new Style({
  stroke: new Stroke({
    color: "#3399CC",
    width: 2,
  }),
});
feature.setStyle(style);
vectorSource.addFeature(feature);

创建多边形

export const coordinates = [
  [
    [109.60866255346207, 34.47379034833203],
    [109.65387455282263, 34.16068194353555],
    [110.36554646660886, 34.077057398201106],
    [110.39257073706818, 34.979450029620935],
    [109.42734747613684, 34.951391603961724],
    [109.60866255346207, 34.47379034833203],
  ],
];

const geometry = new Polygon(coordinates);
const feature = new Feature({
  geometry: geometry.transform("EPSG:4326", "EPSG:3857"),
});
const style = new Style({
  stroke: new Stroke({
    color: "#3399CC",
    width: 2,
  }),
});
feature.setStyle(style);
vectorSource.addFeature(feature);

带属性的 Feature

const geometry = new Point(point);
const feature = new Feature({
  geometry: geometry.transform("EPSG:4326", "EPSG:3857"),
  name: "雷峰塔",
});

const properties = feature.getProperties();

console.log(properties);

{
  name: "雷峰塔";
  geometry: Point;
}