openlayers结合turf geojson面获取面积和中心点

ops/2025/2/27 10:46:31/

在 OpenLayers 中绘制 GeoJSON 面要素并计算面积和中心点,可以结合 OpenLayers 的 ol/format/GeoJSON 模块将 GeoJSON 数据转换为 OpenLayers 的 Feature,然后使用 Turf.js 进行计算。示例代码如下

import Map from 'ol/Map';
import View from 'ol/View';
import { Tile as TileLayer } from 'ol/layer';
import OSM from 'ol/source/OSM';
import { Vector as VectorLayer } from 'ol/layer';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import * as turf from '@turf/turf';// 创建地图
const map = new Map({target: 'map',layers: [new TileLayer({ source: new OSM() })],view: new View({center: [0, 0],zoom: 2})
});// 创建一个 GeoJSON 面要素
const geojson = {type: 'Feature',geometry: {type: 'Polygon',coordinates: [[[116.39, 39.91],[116.41, 39.91],[116.41, 39.93],[116.39, 39.93],[116.39, 39.91]]]}
};// 将 GeoJSON 转换为 OpenLayers Feature
const vectorSource = new VectorSource({features: new GeoJSON().readFeatures(geojson, {featureProjection: 'EPSG:4326'})
});const vectorLayer = new VectorLayer({ source: vectorSource });
map.addLayer(vectorLayer);// 使用 Turf.js 计算面积和中心点
const polygon = turf.polygon(geojson.geometry.coordinates);
const area = turf.area(polygon);
const center = turf.center(polygon);console.log('面积:', area.toFixed(2) + ' 平方米');
console.log('中心点:', center.geometry.coordinates);


http://www.ppmy.cn/ops/161656.html

相关文章

冒泡排序(Bubble Sort)详细教程:Java实现与优化

一、什么是冒泡排序? 冒泡排序(Bubble Sort)是一种简单的排序算法,它的基本思想是通过两两比较相邻元素,将较大的元素“冒泡”到数列的末尾。每一轮遍历会将一个较大的元素放到正确的位置,直到整个数组有序…

Unity Shader 学习13:屏幕后处理 - 使用高斯模糊的Bloom辉光效果

目录 一、基本的后处理流程 - 以将画面转化为灰度图为例 1. C#调用shader 2. Shader实现效果 二、Bloom辉光效果 1. 主要变量 2. Shader效果 (1)提取较亮区域 - pass1 (2)高斯模糊 - pass2&3 (3&#xff…

【综合项目】api系统——基于Node.js、express、mysql等技术

目录 0 前言 1 初始化 2 注册登录 2.1 注册 2.1.1 功能:密码加密(2.3.3) 2.1.1.1 操作 2.1.1.2 bcryptjs详解 2.1.2 优化:表单数据验证(2.5) 2.1.2.1 过时代码修正 2.1.2.2 关键操作 0 前言 …

MATLAB基础应用精讲-【数模应用】牛顿迭代法(附MATLAB、C++、R语言和python代码实现)

目录 前言 算法原理 什么是牛顿迭代法? 牛顿迭代如何迭代? 啥时候停止迭代呢? 特点 牛顿迭代法的扩展 迭代过程 数学模型 电力系统中牛顿拉夫逊法(N-R)潮流计算的直角坐标形式详细推导 潮流计算的牛顿-拉夫逊方法 牛顿-拉夫逊法的原理 牛顿-拉夫逊法的意义和…

Qt Creator + CMake 构建教程

此教程基于: Qt 6.7.4Qt Creator 15.0.1CMake 3.26.4 Qt 6 以下的版本使用 CMake 构建可能会存在一些问题. 目录 新建窗体工程更新翻译添加资源软件部署(Deploy) 此教程描述了如何一步步在 Qt Creator 中使用 CMake 构建应用程序工程. 涉及 新建窗体工程, 更新翻译, 添加资源, …

音频模拟信号转数字信号的原理

音频模拟信号转数字信号的原理 音频信号是自然界中常见的模拟信号(Analog Signal),它是连续的、随时间变化的波形。为了在计算机或数字设备中处理和存储音频信号,需要将模拟信号转换为数字信号(Digital Signal)。这个过程称为 模数转换(Analog-to-Digital Conversion, …

从Excel到Hadoop:数据规模的进化之路

从Excel到Hadoop:数据规模的进化之路 在数字时代,数据就像空气,充斥在我们生活的每个角落。今天我们谈"大数据",但回头看看,数据的演变经历了从"小数据"到"大数据"的量变到质变的过程。…

WSL,Power shell 和CMD, Git bash的区别

在 Windows 系统中,WSL、PowerShell、CMD、Git Bash 和 Git Bash(管理员) 是不同的命令行工具和环境,它们各自有不同的用途和特点。以下是它们的详细关系和区别: 1. WSL(Windows Subsystem for Linux&…