Vue+OpenLayers学习系列（九）Vue+OpenLayers小案例（长度测量、面积测量、坐标定位、坐标获取）

最新推荐文章于 2024-02-06 16:22:33 发布
最新推荐文章于 2024-02-06 16:22:33 发布
阅读量1.9k 收藏 5
点赞数 3
分类专栏： WebGIS Vue 文章标签： OpenLayers Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ocean111best/article/details/114682436
版权
WebGIS 同时被 2 个专栏收录
16 篇文章 13 订阅
订阅专栏
Vue
16 篇文章 1 订阅
订阅专栏

很早之前做的一个例子，最近想复习下Vue+OpenLayers的使用案例，所以发出来供大家下载

vue-ol-demo-master

本Demo的功能包括：地图展示、地图放大缩小、添加鹰眼、长度测量、面积测量、坐标获取、坐标定位。

其中测量工具实现的方法逻辑单独放在src/shared/tools/measure.js文件里面，避免放到组件里面太大太冗余。

运行方法：

#下载依赖
npm install

#运行
npm run serve

 

 

 

爱睡懒觉的老舅
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
vue+openlayers简单示例
10-19
一个Vue与Openlayers结合的应用示例，以组件的方式在Vue中使用openlayers地图，以及可以进行简单的地图配置
Vue+Openlayer中测距测面和绘制点线面组件-LjMeasureDraw4326和LjMeasureDraw3857
~~
08-23 1159
效果图： 首先下载turf.js: cnpm i -S @turf/turf 全局引入turf.js //引入turf.js import * as turf from '@turf/turf' Vue.prototype.$turf = turf 实现代码： <template> <div id="map" style="height: 100vh; width: 100vw"> <div style="position: fixed; ..
openlayers：实现距离量测和面积量测（附完整源码）
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 47
openlayers：实现距离量测和面积量测（附完整源码）
Vue+Openlayer使用draw实现绘制点线面功能
~~
08-19 2559
实现代码： <template> <div> <span size="mini" @click="drawFeature('Point')">画点</span> <span size="mini" @click="drawFeature('LineString')">画线</span> <span size="mini" @click="drawFeature('Polygon')">画..
openlayers点线面测量、绘制设计实现
weixin_42496466的博客
08-09 616
/ 获取存放feature的vectorlayer层。map初始化的时候可以添加好了。this.continuePolygonMsg = '继续点击绘制多边形';this.continueLineMsg = '继续点击绘制线';var helpMsg = '请点击开始绘制';通过创建draw对象注册事件，再注册交互到地图实现控件的交互。...
openLayers + Vue实现测量（长度、面积）
siyuechangmeng的博客
08-02 1712
openLayers学习：测量功能
【开源WebGIS】07-Openlayers+Vue 测量功能-01
老靳的WebGIS
02-05 1448
OpenLayers是一个开源的地图显示引擎，支持距离测量和面积测量。距离测量功能用于测量地图上两点间的直线距离；面积测量功能用于测量地图上一个图形的面积，可以方便的实现在地图上的测量
openlayers实现动态静态的测距和测面以及删除测距测面和坐标点的功能
weixin_46513664的博客
03-05 3380
Hello，小可爱们，激动人心的双休就要到来，离下班还有三个小时，跟大家分享一下这两天研究出来的一个东西吧，先上效果图： 这是基于openlayers实现的动态测距，静态测距，静态测面以及他们的删除功能，话不多说，直接上代码，首先新建一个measure.js import Draw from 'ol/interaction/Draw' import VectorSource from 'ol/source/Vector' import VectorLayer from 'ol/layer/Vec
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
我只是个很菜的前端
09-30 9215
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
vue+openLayers入门教程
热门推荐
ScoloveCode的博客
09-14 2万+
介绍: OpenLayers官网 OpenLayers插件类型 可以理解为专门处理地图的一个库 其中有两大类 map和view,map是ol中的核心组件,初始化一副地图(map),时,至少需要一个可视化区域(view),一个或多个图层(layer)和一个地图加载的挂载点(target) 1.vue中使用Openlayers 注意:地图容器需要设置宽高,否则看不到初始化的地图效果 地图介绍 一.关于投影 ​ 1.投影,地球不是正圆的球体,是一个不规则的椭圆体,所以我们要是想让它展开在桌面上,就会发现地图都会和
在 Vue 项目中使用 Open Layers
reverb_的博客
07-28 5624
Open Layers 点、线、面以及聚合点功能整合
vue3+vite+openlayers6实现绘制扇形及环形组件代码
08-05
在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑，简化代码实现过程，保留核心功能，例如：vue3接入openlayers openlayers绘制环形 openlayers绘制扇形 适合人群：具备一定编程基础，...
Vue+Openlayers自定义轨迹动画
01-18
本文实例为大家分享了Vue+Openlayers实现轨迹动画的具体代码，供大家参考，具体内容如下 <a>OpenlayersTrack <div class=bar :s
vue + openlayers dom
05-08
项目功能：能够加载存储在 excel 表格中的坐标数据（x，y），在网页上自动绘制多边形，通过点击选中加载的要素，能够以弹窗的形式展示该要素的基本信息，包括加载的文件名称和计算得到的要素面积信息，详情参考链接...
Vue+OpenLayers学习系列（十）OpenLayers读取VectorLayer矢量图层数据(GeoJson格式)
Ocean111best的博客
04-24 3634
之前有看到OpenLayers官网（https://openlayers.org/en/latest/examples/box-selection.html）读取GeoJson数据是下面这样读的，但是我怎么读都读不出来，报各种错。 //这是官网读GeoJson的方法 var vectorSource = new VectorSource({ url: 'data/geojson/countries.geojson', format: new GeoJSON(), }); 后面查了很多资料，发现
Vue+OpenLayers学习系列（四）OpenLayers 加载 WMS 地图服务（GeoServer）
Ocean111best的博客
08-02 3364
一、简单介绍 OpenLayers 读取 WMS 服务与OpenLayers 读取 GeoServer 发布的地图服务 类似 二、代码 本次 Demo 主要介绍读取 GeoServer 发布的 WMS 地图服务，并且绘制矢量 <template> <div> <div id="map" ref="rootmap"> </div> <label>Shape type &nbsp;</label&g.
Vue+OpenLayers学习系列（五）OpenLayers 加载 WMTS 地图服务（GeoServer）
Ocean111best的博客
08-02 3031
一、用 GeoServer 发布地图服务并且查看 选择 Tile Caching 里面的 Tile Layers，选择预览方式为 EPSG:4326/png 点开预览该服务，然后在预览页面查看网页源码，查看具体的调用方式和所需的参数。 二、OpenLayers 调用 WMTS 服务 <template> <div id="map" ref="rootmap"> </div> </template> <scri..
Vue+OpenLayers学习系列（六）OpenLayers 加载 WFS 地图服务（GeoServer）
Ocean111best的博客
08-02 2805
一、首先用 GeoServer 发布地图服务 在 Layer Preview 里面选择一个图层，在 All Formats 里面可以选择 GeoJson 二、OpenLayers 读取 WFS 服务 <template> <div id="map" ref="rootmap"> </div> </template> <script> import 'ol/ol.css'; import Map from 'ol/Ma
Vue+OpenLayers学习系列（八）OpenLayers调用天地图WMTS服务
Ocean111best的博客
04-24 2802
最近调用天地图服务，发现之前大家调用都是用XYZ方式，而切片方式调用比较少，这里记录下，以备后续所需。 1、注册天地图并查看天地图的WMTS服务。 首先登陆后，需要注册天地图账号（这里吐槽下，天地图账号只能用邮箱注册，这样导致我邮箱不能用之后，天地图账号密码忘了无法找回密码，且账号绑定的手机号也不能解绑）。注册之后可以在控制台创建新应用，获得调用服务所需的key。 然后在地图API>地图服务那里可以查看到地图服务列表。 2、Vue+OpenLayers调用天地图WMTS服.
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
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值