使用openlayers计算两个经纬度之间的距离 ,单位有米和千米

最新推荐文章于 2026-06-22 16:19:09 发布
原创 最新推荐文章于 2026-06-22 16:19:09 发布 · 566 阅读 · 5
标签
#前端 #javascript #开发语言

以下是使用OpenLayers计算两个经纬度坐标之间距离的实现方案。OpenLayers提供了更精确的地理计算功能，支持不同的投影系统和距离计算方法。

实现思路

  1. 引入OpenLayers库：通过CDN引入最新版本的OpenLayers。
  2. 创建坐标点：将经纬度转换为OpenLayers的ol/coordinate对象。
  3. 设置投影系统：使用WGS 84（EPSG:4326）作为地理坐标系。
  4. 计算距离：使用ol/sphere模块中的getDistance方法计算大圆距离。

代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>OpenLayers距离计算器</title>
    <script src
最低0.47元/天 解锁文章
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.
Vue + OpenLayers 实现获取两点之间的距离（非 `getLength` 方法）
CodeWhizZ的博客
08-29 462
在 Vue 项目中使用 OpenLayers，我们可以实现获取两点之间的距离。首先，我们需要安装并引入 OpenLayers 库。以上就是使用 Vue 和 OpenLayers 实现获取两点之间距离的方法。方法遍历线要素的每个顶点，通过两点间的欧氏距离公式计算线的长度。方法，我们可以自定义计算方式来满足特定的需求。然后，在 Vue 组件中，我们可以按照以下步骤来实现获取两点之间的距离。然而，在本文中，我们将探讨一种非。，并在地图中添加了这个图层。，并将其添加到地图中。方法来计算两个点之间的距离。
Openlayers实现长度测量
Jinuss的博客
11-06 971
Openlayers中如何计算两点之间的距离
Python虚拟环境报错‘No pyvenv.cfg file’？别慌，这3种修复方法总有一种适合你
weixin_30689307的博客
05-10 614
本文详细解析了Python虚拟环境中常见的‘No pyvenv.cfg file’报错问题，提供了三种实用修复方法：从备份恢复、手动创建配置文件以及重新配置开发环境。针对不同场景给出了具体操作步骤，帮助开发者快速解决虚拟环境配置问题，确保项目开发顺利进行。
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2836
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
vue中使用openlayers离线地图计算两点之间距离（四）
林依.的博客
08-24 3053
vue中使用openlayers离线地图计算两点之间距离（四）
vue 使用 openlayer 实现测距功能
“跟他人学，和自己比”
04-07 5910
vue 使用 openlayer 实现测距功能 首先呢说明一下，我是跟着一个大神的视频学的，openlayer的官网上面给出了案例，但是习惯vue开发的我完全不理解，关键是连注释都没多少，而且我 openlayer 用的本来就不多。 然后这里分享一下官网的测距案例：https://openlayers.org/en/latest/examples/measure.html 引入相关库文件 这个库文件直接按照官网的来就可以了。 首先说一个事情哈，官网用的案例是地图使用的 EPSG:3857， 如果我们改成 E
在 OpenLayers 中，绘制一条线new LineString ，线上根据长度像尺子一样展示点，即每隔一段距离显示一个标记来代表距离
qq_52959651的博客
03-13 667
第一个是简易版，复杂版运用到我项目中了，我这边只贴个简易版的代码，目前在我项目中运用还没问题，如果有什么错误可以指出。// 创建 LineString 的 VectorSource 和 VectorLayer。// 创建标记点的 VectorSource 和 VectorLayer。// 创建 LineString 的副本并进行投影转换。// 创建 LineString 的 Feature。// 创建 LineString 对象。// 创建标记点的 Feature。// 计算每 1 千米的标记点。
openlayers
最新发布
a378113472的博客
06-22 253
场景用哪个用户输入的经纬度EPSG:4326（度）地图底图瓦片EPSG:3857（米）传给 View 的 center用转成 3857从地图点击得到的坐标用toLonLat()转成 4326测距/测面积用ol/sphere的方法后端 API 返回的坐标通常是 4326，需要时转projection（投影）就是把地球这个三维球体上的经纬度坐标，"压平"到二维平面地图上的数学方法。你看到的任何一张平面地图（屏幕上的、纸质的），背后都有一个投影。没有投影，你就没法把地球画在平面上。
GIS开发必知：EPSG 4326和3857坐标系到底怎么选？附OpenLayers实战代码
weixin_30776273的博客
04-01 398
本文深入解析GIS开发中EPSG 4326和3857坐标系的区别与应用场景，帮助开发者根据项目需求做出正确选择。通过OpenLayers实战代码演示坐标系转换技巧，涵盖数据采集、Web地图可视化等核心场景，提升GIS开发效率与准确性。
GIS坐标系实战指南：从原理到项目落地
code8的博客
02-21 171
本文深入解析GIS坐标系的核心原理，涵盖地理坐标系与投影坐标系的区别、多样性的成因及EPSG代码的标准化应用。重点提供从常规转换到棘手数据处理的实战方法，并针对不同开发框架（如Cesium、OpenLayers）给出坐标系适配策略，旨在帮助开发者在项目中有效管理坐标系，避免常见陷阱，确保地理数据的精确对齐与分析。
openlayers6 踩坑系列（二）距离转换公式
qq_39404437的博客
11-11 2827
3857坐标系下和4326坐标系下的距离转换
OpenLayers实战，OpenLayers画线测量距离和画多边形测量区域面积
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
08-09 1311
本章使用OpenLayers实现画线测量距离和画多边形测量区域面积这两个功能。本章代码就是通过OpenLayers的图形绘制功能，通过监听绘制事件获取绘制的图形，并进行计算，就可以得到长度和面积。日常开发中比较常用，所以不废话，立刻开始实现。
Openlayers3 计算地图上任意两点间的距离
weixin_34150224的博客
06-27 2365
对应的openlayers的版本为3.7. 主要用的接口是ol.Sphere.haversineDistance（[x1,y1],[x2,y2]）； 4326坐标系中计算两点距离的方式为： var wgs84Sphere = new ol.Sphere(6378137); wgs84Sphere.haversineDistance...
openlayers测距、测面
weixin_56422453的博客
11-12 947
openlayers测距、测面方法封装和调用
openlayers学习（七）量测距离和面积
mylove10086
10-21 3910
实现量测距离和面积 官网示例：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=
基于Vue的Openlayers6自定义测量组件，直接拿来用
xiao猪仙的博客
06-14 3897
基于Vue的Openlayers6自定义测量组件，直接拿来用一级目录二级目录三级目录 在做WebGIS项目开发时，往往都有一个测量的基础功能，这个功能虽然不算太难，但是往往确花费不少的时间去完成，以前都是基于jQuery或原生js去做，现在基于Vue还得改，索性花上一天时间，模仿了其他平台的测量功能效果做一个组件，包含了距离测量、面积测量和角度测量，下次可以直接拿来用。下面是效果图： 一级目录 二级目录 三级目录 ...
Vue2+OpenLayers实现方位角计算功能（提供Gitee源码）
黄团团的个人博客
03-11 353
点击开始绘制功能后，依次在地图上点击三次，将生成三个经纬度点和两条直线，并自动计算出形成的夹角。
openlayers 测量功能实现（测距测面）- vue3
qq_19688207的博客
10-18 1251
注意：props.map是map.vue中传递过来的map容器对象。二、代码如下（测距、测面和清除）一、配置openlayer环境。
Openlayers测量距离与面积
qq_39262215的博客
10-22 3772
测量功能 距离的测量是根据鼠标在地图上绘制的点，实时计算出两点之间的实际距离，面积的测量是根据鼠标绘制的范围，通过地理坐标系的转换而计算出实际面积大小。 本博客参考：https://blog.csdn.net/SmileCoffin/article/details/64122338 在此基础上添加了清除功能 代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值