openlayers 实现测距测面

已于 2023-04-13 16:05:54 修改
阅读量502 收藏
点赞数
分类专栏： openlayers地图学习 文章标签： javascript 前端
于 2023-04-13 15:21:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23687329/article/details/130130993
版权

openlayers 实现测距测面

管网示例： https://openlayers.org/en/latest/examples/measure.html

以下代码中剔除了import…那种写法

  1. ceshi.html 中的代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Measure</title>
    <link rel="stylesheet" href="../static/lib/ol-7/ol.css" type="text/css">
    <script src="../static/lib/ol-7/ol.js"></script>
    <style>
        .map {
     
            width: 100%;
            height: 400px;
        }
        .ol-tooltip {
     
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            color: white;
            padding: 4px 8px;
            opacity: 0.7;
            white-space: nowrap;
            font-size: 12px;
            cursor: default;
            user-select: none;
        }
        .ol-tooltip-measure {
     
            opacity: 1;
            font-weight: bold;
        }
        .ol-tooltip-static {
     
            background-color: #ffcc33;
            color: black;
            border: 1px solid white;
        }
        .ol-tooltip-measure:before,
        .ol-tooltip-static:before {
     
            border-top: 6px solid rgba(0, 0, 0, 0.5);
            border-right: 6px solid transparent;
            border-left: 6px solid transparent;
            content: "";
            position: absolute;
            bottom: -6px;
            margin-left: -7px;
            left: 50%;
        }
        .ol-tooltip-static:before {
     
            border-top-color: #ffcc33;
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<form>
    <label for="type">Measurement type &nbsp;
最低0.47元/天 解锁文章
一只黑色的喵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
openlayers：实现距离量测和面积量测（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 130
openlayers：实现距离量测和面积量测（附完整源码）
OpenLayers实战，OpenLayers画线测量距离和画多边形测量区域面积
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
08-09 772
本章使用OpenLayers实现画线测量距离和画多边形测量区域面积这两个功能。本章代码就是通过OpenLayers的图形绘制功能，通过监听绘制事件获取绘制的图形，并进行计算，就可以得到长度和面积。日常开发中比较常用，所以不废话，立刻开始实现。
openlayers测距及测面积
03-26
openlayers 测距 直线测距 区域面积
openlayers实现地图测距测面
10-14
主要为大家详细介绍了openlayers实现地图测距测面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
01、vue+openlayers6实现自定义测量功能（提供源码）
最新发布
Swampis的博客
05-10 214
在组件的monted中调用 initDrawLayer(map);
基于Vue的Openlayers6自定义测量组件，直接拿来用
xiao猪仙的博客
06-14 3026
基于Vue的Openlayers6自定义测量组件，直接拿来用一级目录二级目录三级目录 在做WebGIS项目开发时，往往都有一个测量的基础功能，这个功能虽然不算太难，但是往往确花费不少的时间去完成，以前都是基于jQuery或原生js去做，现在基于Vue还得改，索性花上一天时间，模仿了其他平台的测量功能效果做一个组件，包含了距离测量、面积测量和角度测量，下次可以直接拿来用。下面是效果图： 一级目录 二级目录 三级目录 ...
vue 使用 openlayer 实现测距功能
大家好，我是 ed.
04-07 4732
vue 使用 openlayer 实现测距功能 首先呢说明一下，我是跟着一个大神的视频学的，openlayer的官网上面给出了案例，但是习惯vue开发的我完全不理解，关键是连注释都没多少，而且我 openlayer 用的本来就不多。 然后这里分享一下官网的测距案例：https://openlayers.org/en/latest/examples/measure.html 引入相关库文件 这个库文件直接按照官网的来就可以了。 首先说一个事情哈，官网用的案例是地图使用的 EPSG:3857， 如果我们改成 E
【开源WebGIS】07-Openlayers+Vue 测量功能-01
老靳的WebGIS
02-05 1672
OpenLayers是一个开源的地图显示引擎，支持距离测量和面积测量。距离测量功能用于测量地图上两点间的直线距离；面积测量功能用于测量地图上一个图形的面积，可以方便的实现在地图上的测量
openlayers测距和测面积
qq_41588568的博客
05-15 4531
初次使用openlayers地图进行开发各种地图功能，测距和测面积使用的是官方例子并进行了一些简单的修改，官方示例在测量一次之后不能停止，修改后，每点击测量，只会测量一次。 js文件：measure.js import Draw from 'ol/interaction/Draw' import VectorSource from 'ol/source/Vector'; import VectorLayer from 'ol/layer/Vector'; import TileLayer fro.
openlayers4.6.5实现距离量测和面积量测
01-18
本文实例为大家分享了openlayers4.6.5实现距离量测和面积量测的具体代码，供大家参考，具体内容如下 版本： openlayers4.6.5 效果图： 小插曲： 原本使用ol官方提供的 量测例子，就挺不错的。但是由于放在项目中后...
Vue+Openlayer中测距测面和绘制点线面组件-LjMeasureDraw4326和LjMeasureDraw3857
~~
08-23 1221
效果图： 首先下载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; ..
vue中使用openlayers离线地图计算两点之间距离（四）
林依.的博客
08-24 2205
vue中使用openlayers离线地图计算两点之间距离（四）
openlayers：实现地图测距测面（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 131
openlayers：实现地图测距测面（附完整源码）
openlayers实现动态静态的测距和测面以及删除测距测面和坐标点的功能
weixin_46513664的博客
03-05 3512
Hello，小可爱们，激动人心的双休就要到来，离下班还有三个小时，跟大家分享一下这两天研究出来的一个东西吧，先上效果图： 这是基于openlayers实现的动态测距，静态测距，静态测面以及他们的删除功能，话不多说，直接上代码，首先新建一个measure.js import Draw from 'ol/interaction/Draw' import VectorSource from 'ol/source/Vector' import VectorLayer from 'ol/layer/Vec
Openlayers之测量距离与面积
热门推荐
SmileCoffin的博客
03-20 1万+
1、地图测量功能 一般的地图的测量功能主要表现在两个方面，一是测量距离，一是测量面积；面积的测量是根据鼠标绘制的范围，通过地理坐标系的转换而计算出实际面积大小，距离的测量是根据鼠标在地图上绘制的点，实时计算出两点之间的实际距离，下面我们就在Openlayers3中来实现这一功能； 2、代码实现
Openlayers实战：测量长度，测量面积
大剑师兰特的GIS世界
07-11 341
Openlayers地图上经常是要用到测量功能，诸如测量长度，测量面积。在本实战中，引用一个js，实现测量长度、测量面积功能。
openlayers学习（七）量测距离和面积
mylove10086
10-21 3195
实现量测距离和面积 官网示例：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=
openlayers测距测面
10-18
OpenLayers提供了测距和测面的功能，可以通过使用ol.interaction.Draw来实现。具体步骤如下： 1. 创建一个绘制交互对象，指定绘制类型为LineString或Polygon。 ``` var draw = new ol.interaction.Draw({ source: source, type: 'LineString' // 或者 'Polygon' }); ``` 2. 监听draw的drawend事件，在绘制完成后获取绘制的几何图形。 ``` draw.on('drawend', function(event) { var feature = event.feature; var geometry = feature.getGeometry(); // 进行测距或测面操作 }); ``` 3. 对于测距操作，可以使用ol.sphere.getDistance函数计算两点之间的距离。 ``` var distance = ol.sphere.getDistance(geometry); console.log('距离为：' + distance + '米'); ``` 4. 对于测面操作，可以使用ol.sphere.getArea函数计算多边形的面积。 ``` var area = ol.sphere.getArea(geometry); console.log('面积为：' + area + '平方米'); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值