OpenLayers实战，OpenLayers画线测量距离和画多边形测量区域面积

已于 2024-06-23 19:48:18 修改
阅读量801 收藏 1
点赞数 1
分类专栏： # Vue+OpenLayers6实战 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： 前端 javascript OpenLayers 测距 测面积 绘制测量 区域测量
于 2023-08-09 00:18:59 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/132178948
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 10 订阅 ¥159.90 ¥99.00
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥99.00
订阅专栏
Vue+OpenLayers6实战
53 篇文章 34 订阅 ¥69.90 ¥99.00
订阅专栏

专栏目录：
OpenLayers实战进阶专栏目录

前言

本章使用OpenLayers实现画线测量距离和画多边形测量区域面积这两个功能。
本章代码就是通过OpenLayers的图形绘制功能，通过监听绘制事件获取绘制的图形，并进行计算，就可以得到长度和面积。日常开发中比较常用，所以不废话，立刻开始实现。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖
yarn
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
订阅专栏
openlayers：实现地图测距测面（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 145
openlayers：实现地图测距测面（附完整源码）
openlayers 实现测距测面
qq_23687329的博客
04-13 505
官方例子是在vue的基础上实现的，下面为剔除vue后的写法！
基于Vue的Openlayers6自定义测量组件，直接拿来用
xiao猪仙的博客
06-14 3045
基于Vue的Openlayers6自定义测量组件，直接拿来用一级目录二级目录三级目录 在做WebGIS项目开发时，往往都有一个测量的基础功能，这个功能虽然不算太难，但是往往确花费不少的时间去完成，以前都是基于jQuery或原生js去做，现在基于Vue还得改，索性花上一天时间，模仿了其他平台的测量功能效果做一个组件，包含了距离测量、面积测量和角度测量，下次可以直接拿来用。下面是效果图： 一级目录 二级目录 三级目录 ...
openlayers 绘图功能，编辑多边形，长度面积测量，tip提示（七）
最新发布
无心使然云中漫步
06-14 460
主要是 openlayers 中 styleFunc 功能的使用，效果如下。
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
我只是个很菜的前端
09-30 9775
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
openLayers + Vue实现测量（长度、面积）
siyuechangmeng的博客
08-02 1926
openLayers学习：测量功能
vue中使用openlayers离线地图计算两点之间距离（四）
林依.的博客
08-24 2245
vue中使用openlayers离线地图计算两点之间距离（四）
openlayers学习（七）量测距离和面积
mylove10086
10-21 3220
实现量测距离和面积 官网示例：https://openlayers.org/en/latest/examples/measure.html 1、初始化地图 var rootLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z=
在ol(openlayers)中进行两个多边形要素的拟合，即通过动画的形式从一个多边形过渡到另一个多边形
10-24
在ol(openlayers)中进行两个几何要素的拟合，即通过动画的形式从一个几何对象过渡到另一个几何对象，支持点、线、面： /** * @description 动态拟合两个多边形 * @param {object} map ol.Map * @param {object} ...
openlayers很多特效demo
07-01
1. 地图交互性：OpenLayers 提供了丰富的地图操作功能，如平移、缩放、旋转、测量距离和面积、拖拽地图等。在demo中，你可以看到如何实现这些功能，以便用户能够更方便地探索地图内容。 2. 图层管理：通过...
openlayers
03-31
在OpenLayers中，画线主要涉及到`ol.geom.LineString`几何对象和`ol.feature`特征。`ol.geom.LineString`用于创建直线几何，而`ol.feature`则是将几何对象与属性数据结合在一起，形成可以在图层上显示的元素。 首先...
openlayers实现地图测距测面
01-18
本文实例为大家分享了openlayers实现地图测距测面的具体代码，供大家参考，具体内容如下 项目背景vue-cli3.0 public下html需要引入文件 <link rel=stylesheet href=<%= BASE_URL %>./css/gr-ol.css type=text/css> [removed]./js/ol.js type=text/javascript>[removed] 这里地图为公共组件，方法写在公共组件的init方法里，kpst._this为地图对象 调用 //测距/面 var draw = me.
Openlayers测量demo
09-02
由于公司项目需要使用到openlayers，就开始学习了openlayers，其中有一个需求需要用到测量功能,就写了这个demo
Openlayers测量距离与面积的实现方法
10-14
主要为大家详细介绍了Openlayers测量距离与面积的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers4.6.5实现距离量测和面积量测
10-14
主要为大家详细介绍了openlayers4.6.5实现距离量测和面积量测，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers面层实时动态闪烁
12-07
在本例中，“面层”通常指的是包含多边形几何类型的图层，这些多边形可以代表地理区域或者其他实体。 要创建一个面层，首先你需要创建一个`VectorSource`实例，用于存储面要素数据。例如： ```javascript const ...
openlayers3各种元素图形绘制
11-02
OpenLayers 3 提供了构建几何图形的方法，通过组合线和多边形，可以创建出具有箭头头部的线条。 6. **钳击**：钳击图形通常由两条相交的线构成，表示两支队伍或力量从两侧夹击目标。这需要结合使用LineString和...
145: vue+openlayers 根据坐标点数组值，绘制多边形，显示面积数
大剑师兰特的GIS世界
10-18 521
本示例的目的是介绍如何在vue+openlayers项目中根据提供的一组多边形的坐标值，在地图上回显多边形，并根据获得的feature信息获得geometry，然后展示出面积值，可以清除图层，清除overlay层.点击查看本专栏内容目录列表。
Openlayers7的官方示例如何使用？（以测距测面为例）
AY
10-07 2497
openlayers7的官方示例的使用方法
vue+openlayers面积测量
12-02
在Vue中使用OpenLayers进行面积测量，可以通过以下步骤实现： 1. 首先，在Vue项目中，安装OpenLayers库。可以通过运行以下命令进行安装： ``` npm install ol ``` 2. 在Vue组件中引入OpenLayers库，可以使用`import`语句进行引入： ```javascript import ol from 'ol'; ``` 3. 创建一个Vue组件，并在`mounted`钩子函数中进行OpenLayers地图的初始化。在地图初始化过程中，可以设置视图的初始中心以及缩放级别： ```javascript mounted() { const map = new ol.Map({ target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); } ``` 4. 在组件的模板中，添加一个具有特定ID的`div`元素，作为地图的容器： ```html <template> <div id="map"></div> </template> ``` 5. 在`mounted`钩子函数中，创建一个用于绘制图形的矢量源和矢量层。可以通过`ol.source.Vector`和`ol.layer.Vector`来实现： ```javascript mounted() { // ...省略地图初始化代码 const vectorSource = new ol.source.Vector(); const vectorLayer = new ol.layer.Vector({ source: vectorSource }); map.addLayer(vectorLayer); } ``` 6. 添加一个测量控件，用于测量面积。可以通过`ol.control.Measure`来实现： ```javascript mounted() { // ...省略地图初始化和添加矢量层代码 const measureControl = new ol.control.Measure({ source: vectorSource, type: 'area', interactionType: 'click' }); map.addControl(measureControl); } ``` 7. 最后，在模板中添加一个按钮或其他元素，用于触发测量功能： ```html <template> <div id="map"> <button @click="startMeasurement">开始测量</button> </div> </template> ``` 8. 在组件的方法中，编写`startMeasurement`方法，用于启动测量功能： ```javascript methods: { startMeasurement() { const measureControl = map.getControls().getArray().find(control => control instanceof ol.control.Measure); measureControl.setActive(true); } } ``` 通过以上步骤，Vue中的OpenLayers地图将具备面积测量功能。用户可以点击“开始测量”按钮，然后在地图上绘制多边形，测量结果将以弹窗或其他形式呈现给用户。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值