138.Vue3 + OpenLayers 实战：绘制矩形并标记首尾点、中心点与所有经纬度坐标

🚀Vue3 + OpenLayers 实战：绘制矩形并标记首尾点、中心点与所有经纬度坐标

本文将带你用 Vue3 + OpenLayers 实现一个非常实用的地图绘制功能 —— 一键绘制矩形，并实时展示首尾点、中心点及所有点的经纬度坐标。
适用于兴趣区域标注、区域筛选、高亮矩形绘制等地理信息可视化需求。

📸 效果演示

点击按钮进入绘制模式，完成绘制后：

• 自动显示矩形四角点；

• 标注最后一个点（即终点）坐标；

• 标注中心点坐标；

• 页面底部打印所有点经纬度数组。

🧰 技术栈

• Vue 3（Composition API）

• OpenLayers 7.x

• Element Plus（UI 按钮）

• Vite 构建工具