mapbox 绘制路线并展示路线长度

背景:上一篇写过mapbox如何绘制线路并导出为kml文件,后面又加了个需求,需要展示所绘制的路线长度,这里就需要用到turf了

1. 引入turf,可以在线引入,也可以下载到本地引入

import '@/components/webgisMap/turf.min.js';<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>

2. 使用turf.length计算

// 生成geojson格式的路线数据 (上一篇写的mapbox线路绘制可直接生成geojson数据,这里用turf.lineString转化一下)
var line = turf.lineString([[115, -32], [131, -22], [143, -25], [150, -34]]);
// 计算长度 units: 'miles' 单位,默认kilometers
var length = turf.length(line, {units: 'miles'});

更多turf功能请查看Turf.js | Advanced Geospatial Analysis

mapbox 绘制路线并展示路线长度相关推荐

Three.js指定路径漫游（站走切换、路径动画、展示路线、开始、暂停、继续、退出、镜头跟随）
(由点生成曲线,npc沿曲线移动,相机跟随方式1)参考大佬: https://blog.csdn.net/weixin_40856652/article/details/125302355 (相机跟随 ...
百度地图绘制多段驾车路线
百度地图绘制多段驾车路线直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...
黑马旅游网——旅游路线详情展示和旅游路线收藏功能（完结）
旅游路线详情展示效果: 将该旅游路线的价格.商家.风景图等等详细信息展示到详情页面上: 这个功能实现起来不难,但是比较墨迹,因为这一个页面中的信息要从三张表中查询:商家信息在seller表,图片在ro ...
爬虫路线Requests-Re-BeautifulSoup技术路线总结
爬虫路线Requests-Re-BeautifulSoup技术路线总结最近工作中需要用到爬虫,于是自己学习了一下,项目难度不算大,因此不需要用到框架,主要用到requests.bs4.re三个模块, ...
IT外企那点儿事(6)：管理路线和技术路线 (转载)
IT外企那点儿事(1):外企也就那么回事 IT外企那点儿事(2):多种多样的外企 IT外企那点儿事(3):奇怪的面试 IT外企那点儿事(4):激动人心的入职演讲 IT外企那点儿事(5):像系统一样升级 ...
【Python 实战基础】如何绘制中国地图展示省份GDP数据
目录一.实战场景二.主要知识点文件读写基础语法字符串处理文件生成数据构建循环遍历三.菜鸟实战 1.创建 python 文件 2.运行结果一.实战场景实战场景: 如何绘制中国地图展 ...
使用R语言自带的茑尾花(iris)数据集,绘制鸢尾花的萼片的长度和宽度的散点图并添加不同品种花萼长度与花萼宽度的回归直线。不同的品种用不同的颜色,x轴为花萼长度
1使用R语言自带的茑尾花(iris)数据集,绘制鸢尾花的萼片的长度和宽度的散点图并添加不同品种花萼长度与花萼宽度的回归直线.不同的品种用不同的颜色,x轴为花萼长度(单位:cm),y轴为花萼宽度(单位: ...
为Garmin Edge 520码表添加地图，创建路线，导入路线
引子 Garmin Edge 520支持路线显示功能,但是该码表并无内置地图,因此路线显示功能不能发挥最大作用,有必要为码表添加内置地图. 同时,在骑行不熟悉的路线时,路书是非常重要的.虽然Garmi ...
【MAPBOX基础功能】21、mapbox绘制自动旋转的图标
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...

mapbox 绘制路线并展示路线长度

mapbox 绘制路线并展示路线长度相关推荐

最新文章

热门文章