当前位置： 首页 > news >正文

OpenLayers 快速入门（七）矢量数据

news 2025/7/25 12:03:26

看过的知识不等于学会。唯有用心总结、系统记录，并通过温故知新反复实践，才能真正掌握一二
作为一名摸爬滚打三年的前端开发，开源社区给了我饭碗，我也将所学的知识体系回馈给大家，助你少走弯路！
OpenLayers、Leaflet 快速入门 ，每周保持更新 2 个案例
Cesium 快速入门，每周保持更新 4 个案例

OpenLayers 快速入门（一）Map对象
OpenLayers 快速入门（二）Layer 对象
OpenLayers 快速入门（三）Source 对象补充
OpenLayers 快速入门（四）View 对象
OpenLayers 快速入门（五）Controls 对象
OpenLayers 快速入门（六）Interaction 对象
OpenLayers 快速入门（七）矢量数据
OpenLayers 快速入门（八）事件系统
OpenLayers 快速入门（九）Extent 介绍
OpenLayers 快速入门（十）常用 API 补充

矢量图形

OpenLayers 中的矢量图形，Feature（要素）和 Geometry（几何）类构成了矢量图形系统的基础

在这里插入图片描述

Geometry 类详解

Geometry 类表示地理空间中的形状，是所有几何图形的基类。

类型一览

几何类型描述创建示例
Point单点位置new Point([x, y])
LineString线（有序点序列）new LineString([[x1,y1], [x2,y2]])
Polygon多边形（外环+内环）new Polygon([[[x1,y1], [x2,y2], …]])
Circle圆形new Circle(center, radius)
MultiPoint多点集合new MultiPoint([[x1,y1], [x2,y2]])
MultiLineString多线集合new MultiLineString([[…], […]])
MultiPolygon多面集合new MultiPolygon([[…], […]])
GeometryCollection混合几何集合new GeometryCollection([point, line])

公共方法

所有几何类型都继承自 ol/geom/Geometry 基类，具有以下公共方法

方法描述参数
clone()创建几何的深拷贝-
getExtent()获取空间范围extent(可选)
getType()获取几何类型-
transform(source, destination)转换坐标系sourceProj, destProj
applyTransform(transformFn)应用自定义坐标变换transformFn
simplify(tolerance)简化几何tolerance
rotate(angle, anchor)旋转几何angle(弧度), anchor(中心点)
scale(factorX, factorY, anchor)缩放几何factorX, factorY, anchor
translate(deltaX, deltaY)平移几何deltaX, deltaY
intersectsCoordinate(coordinate)判断坐标是否在几何内[x, y]
intersectsExtent(extent)判断是否与范围相交[minX, minY, maxX, maxY]
getCoordinates()获取坐标-
setCoordinates(coordinates)设置坐标坐标数组

点（Point）

点几何表示地球上的一个单一位置。

import Point from "ol/geom/Point";const point = new Point([116.4074, 39.9042]);
point.getCoordinates(); // [116.4074, 39.9042]point.transform("EPSG:4326", "EPSG:3857"); // [12245410.74511129, 3844357.763493687]

线（LineString）

线几何表示由有序点序列组成的路径。

特有方法：

  • getLength()：返回线要素在投影平面上的长度
  • getCoordinateAt(fraction)：根据参数 fraction（取值范围 0 到 1）返回线要素上的坐标
import LineString from "ol/geom/LineString";const line = new LineString([[0, 0],[10, 10],
]);
line.getLength(); // 14.142135623730951
line.getCoordinateAt(0.5); // [5, 5]

面（Polygon）

面几何表示由有序点序列组成的闭合区域。

特有方法：

  • getArea()：返回面要素在投影平面上的面积
  • getInteriorPoint()：返回面要素内部的一个点
import Polygon from "ol/geom/Polygon";const polygon = new Polygon([[[0, 0],[10, 0],[10, 10],[0, 10],[0, 0],],
]);
polygon.getArea(); // 100
polygon.getInteriorPoint().getCoordinates(); // [5, 5, 10]

圆（Circle）

圆形几何，Circle 类表示一个圆形区域。

new Circle(center, radius)

  • center：圆的中心点坐标，格式为 [x, y]
  • radius：圆的半径，单位与地图投影单位相同

特有方法：

  • getRadius()：返回圆要素的半径
  • getCenter()：返回圆要素的中心点
  • setRadius(radius)：设置圆要素的半径
  • setCenter(center)：设置圆要素的中心点
  • setCenterAndRadius(center, radius)：同时设置中心点和半径
import Circle from "ol/geom/Circle";const circle = new Circle([0, 0], 5);circle.getRadius();circle.getCenter();circle.setRadius(10);circle.setCenter([1, 1]);circle.setCenterAndRadius([2, 2], 15);

多点（MultiPoint）

MultiPoint 类表示多个点的集合。

特有方法：

  • getPoints()：返回多点要素的点数组
  • getPoint(index)：返回指定索引的点
  • appendPoint(point)：添加一个点到多点要素中
import MultiPoint from "ol/geom/MultiPoint";const multiPoint = new MultiPoint([[0, 0],[10, 10],
]);multiPoint.getPoints(); // [Point, Point]multiPoint.getPoint(0); // PointmultiPoint.appendPoint(new Point([20, 20]));

多线（MultiLineString）

MultiLineString 类表示多个线的集合。

特有方法：

  • getLineStrings()：返回多线要素的线数组
  • getLineString(index)：返回指定索引的线
  • appendLineString(lineString)：添加一条线到多线要素中
  • getLength()：返回多线要素的总长度
import MultiLineString from "ol/geom/MultiLineString";const multiLine = new MultiLineString([[[0, 0],[10, 10],],[[20, 20],[30, 30],],
]);multiLine.getLineStrings(); // [LineString, LineString]multiLine.getLineString(0); // LineStringmultiLine.appendLineString(new LineString([[40, 40],[50, 50],])
);

多面（MultiPolygon）

MultiPolygon 类表示多个面的集合。

特有方法：

  • getPolygons()：返回多面要素的面数组
  • getPolygon(index)：返回指定索引的面
  • appendPolygon(polygon)：添加一个面到多面要素中
  • getArea()：返回多面要素的总面积
import MultiPolygon from "ol/geom/MultiPolygon";const multiPoly = new MultiPolygon([[[[0, 0],[10, 0],[10, 10],[0, 10],[0, 0],],],[[[20, 20],[30, 20],[30, 30],[20, 30],[20, 20],],],
]);
multiPoly.getArea(); // 200
multiPoly.appendPolygon(new Polygon([[[5, 5],[15, 5],[15, 15],[5, 15],[5, 5],],])
);

集合（GeometryCollection）

GeometryCollection 类表示多个几何要素的集合。

特有方法：

  • getGeometries()：返回集合中的几何要素数组
  • setGeometries(geometries)：设置集合中的几何要素数组
  • getExtent()：返回集合中所有几何要素的范围
import GeometryCollection from "ol/geom/GeometryCollection";const collection = new GeometryCollection([new Point([0, 0]),new LineString([[0, 0],[10, 10],]),
]);
collection.getGeometries().length; // 2

Feature 类详解

在 OpenLayers 中，一个 Feature 对象就表示一个地理要素。

核心概念

  • Feature = Geometry + Attributes + Style
  • 每个 Feature 代表地图上的独立实体（如建筑物、道路）
  • 通过 Vector Layer 渲染到地图

属性

  • 直接传递一个 Geometry 对象，或者传入一个对象，存在geometry键，Geometry 会和这个键相关联
// 示例1：直接传入一个 Geometry 对象
const feature = new Feature(new Point([116.4074, 39.9042]));// 示例2：传入一个对象，存在 geometry 键，Geometry 会和这个键相关联
const feature = new Feature({geometry: new Point([0, 0]),name: "YGYong",
});

方法

  • getGeometry()：获取要素的几何对象
  • setGeometry(geometry)：设置要素的几何对象
  • get(key)：获取要素的属性值
  • set(key, value)：设置要素的属性值
  • getProperties()：获取要素的所有属性
  • setProperties(properties)：设置要素的所有属性
  • getGeometryName()：获取要素的几何类型名称
  • setGeometryName(name)：设置要素的几何类型名称
  • getKeys()：获取要素的所有属性键
  • getStyle()：获取要素的样式
  • setStyle(style)：设置要素的样式
  • getId()：获取要素的唯一标识符
  • setId(id)：设置要素的唯一标识符，要素 ID 可以与 getFeatureById 方法一起使用
// 创建要素
const feature = new Feature({geometry: new Point([0, 0]),name: "YGYong",
});// 获取name属性
const name = feature.get("name");

// 设置ID
feature.setId("feature_001");// 获取ID
const featureId = feature.getId();// 通过source获取ID
const featureById = source.getFeatureById("feature_001");

// 设置几何
feature.setGeometry(new Point([10, 20]));// 获取几何
const geom = feature.getGeometry();

// 设置属性集合
feature.setProperties({name: "重要设施",type: "医院",capacity: 500,contact: {phone: "123-456-7890",email: "contact@example.com",},
});// 获取属性集合
const properties = feature.getProperties();

// 设置固定样式
feature.setStyle(new Style({image: new CircleStyle({radius: 10,fill: new Fill({ color: "red" }),}),})
);// 设置动态样式函数
feature.setStyle((feature, resolution) => {const size = resolution < 100 ? 10 : 5;return new Style({image: new CircleStyle({radius: size,fill: new Fill({ color: "blue" }),}),});
});
http://www.xdnf.cn/news/1173223.html

相关文章：

  • Linux 环境下安装 MySQL 8.0.34 二进制 详细教程 附docker+k8s启动
  • 亚马逊广告优化技巧:如何减少预算浪费
  • 软件性能测试全景图：十维质量保障体系
  • Redis--多路复用
  • CI/CD与DevOps集成方法
  • 删除远程分支上非本分支的提交记录
  • ElasticSearch基础数据管理详解
  • 基于Python（Django）+MongoDB实现的（Web）新闻采集和订阅系统
  • 数据结构自学Day13 -- 快速排序--“挖坑法”
  • Java冒泡排序的不同实现
  • 阿里云ODPS十五周年重磅升级发布：为AI而生的数据平台
  • Leetcode力扣解题记录--第54题（矩阵螺旋）
  • 负压产生电路分析
  • HakcMyVM-Luz
  • 前端实现可编辑脑图的方案
  • 【世纪龙科技】汽车专业数字课程资源-新能源汽车维护与故障诊断
  • 亚远景-传统功能安全VS AI安全：ISO 8800填补的标准空白与实施难点
  • ​多线程 + io_uring 实现高效大文件写入
  • MCP：UVX的安装
  • JS逆向基础（ AES 解密密文WordArray和Uint8Array实战②）
  • 在线深凹槽深检测方法都有哪些 —— 激光频率梳 3D 轮廓检测
  • 【Word Press基础】创建一个动态的自定义区块
  • 探索大语言模型（LLM）：提升 RAG 性能的全方位优化策略
  • 主要分布在背侧海马体（dHPC）CA1区域（dCA1）的时间细胞对NLP中的深层语义分析的积极影响和启示
  • OpenCV（01）基本图像操作、绘制，读取视频
  • 【趣味解读】淘宝登录的前后端交互机制：Cookie-Session 如何保障你的账户安全？
  • 网络基础DAY18-动态路由协议基础
  • Python笔记之跨文件实例化、跨文件调用、导入库
  • 基于 XGBoost 与 SHAP 的医疗自动化办公与可视化系统（下）
  • 用Phi-3 Mini微调实现英文到尤达语翻译