首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Mapbox gl JS测量距离

Mapbox GL JS是一个基于WebGL的开源地图库,用于在网页上展示交互式、可定制的地图。它提供了丰富的地图功能和工具,包括测量距离。

测量距离是指在地图上测量两个点之间的直线距离。在Mapbox GL JS中,可以使用Turf.js库来实现距离测量功能。Turf.js是一个用于地理空间分析的JavaScript库,提供了许多地理空间计算的函数。

以下是使用Mapbox GL JS测量距离的步骤:

  1. 引入Mapbox GL JS和Turf.js的库文件:
代码语言:txt
复制
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" />
  1. 创建地图容器:
代码语言:txt
复制
<div id="map"></div>
  1. 初始化地图:
代码语言:txt
复制
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat], // 设置地图中心点的经纬度
  zoom: 12 // 设置地图缩放级别
});

请注意替换YOUR_MAPBOX_ACCESS_TOKEN为你自己的Mapbox访问令牌,并设置合适的地图样式、中心点和缩放级别。

  1. 添加测量距离的功能:
代码语言:txt
复制
var distanceContainer = document.getElementById('distance');

var geojson = {
  type: 'FeatureCollection',
  features: []
};

var lineString = {
  type: 'Feature',
  geometry: {
    type: 'LineString',
    coordinates: []
  }
};

map.on('click', function(e) {
  var coordinates = [e.lngLat.lng, e.lngLat.lat];
  geojson.features.push({
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: coordinates
    }
  });

  lineString.geometry.coordinates.push(coordinates);

  if (geojson.features.length > 1) {
    geojson.features.push(lineString);
    var distance = turf.length(lineString, { units: 'kilometers' });
    distanceContainer.innerHTML = '距离:' + distance.toFixed(2) + ' 公里';
  }

  map.getSource('points').setData(geojson);
});

map.on('load', function() {
  map.addSource('points', {
    type: 'geojson',
    data: geojson
  });

  map.addLayer({
    id: 'points',
    type: 'circle',
    source: 'points',
    paint: {
      'circle-radius': 6,
      'circle-color': '#3887be'
    },
    filter: ['in', '$type', 'Point']
  });

  map.addLayer({
    id: 'line',
    type: 'line',
    source: 'points',
    layout: {
      'line-join': 'round',
      'line-cap': 'round'
    },
    paint: {
      'line-color': '#3887be',
      'line-width': 3
    },
    filter: ['in', '$type', 'LineString']
  });
});

在上述代码中,我们创建了一个地图容器,并初始化了地图。然后,我们添加了一个点击事件监听器,当用户在地图上点击时,会在点击位置添加一个点,并计算并显示两个点之间的距离。

最后,我们添加了一个distanceContainer元素,用于显示距离结果。

请注意,上述代码中的YOUR_MAPBOX_ACCESS_TOKEN需要替换为你自己的Mapbox访问令牌。

这是一个基本的使用Mapbox GL JS测量距离的示例。你可以根据自己的需求进行定制和扩展。如果你想了解更多关于Mapbox GL JS的功能和用法,可以参考Mapbox GL JS官方文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Mapbox GL JS学习探索系列(2) - Source

本文链接:https://blog.csdn.net/j_bleach/article/details/102533553 简介 在mapbox中对于地图,图层的呈现都依托于相应的数据源去渲染。...mapbox 中的数据源一般分为vector, raster, raster-dem, geojson, image, video这六种类型,本文依次对这6中资源类型进行简单介绍。...通常在实际开发应用的,还会使用turf.js 这个空间坐标的类库,来提高开发效率,这个库提供了空间地理坐标常用的一些方法,非常好用。...geojson这里介绍一个cluster属性,这是一个聚合属性,在开启这个属性之后,图层会检测数据渲染之后是否该聚合(变相的碰撞检测),可以通过设置clusterRadius来控制图层数据间的显示隐藏的距离...以上就是mapbox的数据源的简单介绍,其中geojson是使用频率最高的,也是在对地图进行二次构造中,最为灵活易用的数据类型。

2.1K30

Mapbox GL JS学习探索系列(1) - Map

本文链接:https://blog.csdn.net/j_bleach/article/details/102211813 摘要 本文旨在分享自己在mapbox的学习过程中的使用经验,通过介绍mapbox...地图对象 通过JS去生成一个地图,必要的属性只有2个,一个就是地图在html中的容器,即装载地图div的ID,另一个就是地图的样式,地图样式一般包括渲染地图的资源以及缩放,中心点等地图配置信息。...fire:mapbox文档中没有写明这个方法,但是这个方法也非常好用,作用是主动触发订阅的方法,在mapbox-gl.js做扩展的时候,这个方法作用非常大,因为mapbox的方法订阅是标准的发布订阅模式...,就可以使用map.on 订阅一个自己的loaded方法,然后在相关资源加载完毕之后使用fire 触发自定义的方法。...data 表示的是地图资源放生改变时触发的方法,这个方法在图层渲染,资源更改时使用频率非常高,因为load只是首次触发的方法,在后续对地图(图层)资源进行修改的过程中,需要使用data方法来就行判定,在这个方法中返回的是一个

2.8K10

使用OpenCV测量图像中物体之间的距离

Python和OpenCV顺时针排序坐标 使用OpenCV测量图像中物体的大小 已经完成了测量物体大小的任务,今天进行最后一部分:计算图片中物体之间的距离。...上篇我们讨论了如何使用参考对象来测量图像中对象的大小。 这个参考对象应该有两个重要的特征,包括: 我们知道这个物体的尺寸(以英寸、毫米等表示)。 它很容易在我们的图像中被识别出来(根据位置或外观)。...给定这样一个参考对象,我们可以使用它来计算图像中对象的大小。 今天,我们将结合本系列前两篇来计算对象之间的距离。 计算物体之间的距离与计算图像中物体的大小算法思路非常相似——都是从参考对象开始的。...我们的目标是找到0.25美分,然后利用0.25美分的尺寸来测量0.25美分硬币与所有其他物体之间的距离。...距离测量结果 下面是一个GIF动画,演示了我们的程序运行效果: 在每种情况下,我们的脚本都匹配左上(红色)、右上(紫色)、右下(橙色)、左下(蓝绿色)和质心(粉色)坐标,然后计算参考对象和当前对象之间的距离

1.9K30

使用OpenCV测量图像中物体之间的距离

Python和OpenCV顺时针排序坐标 使用OpenCV测量图像中物体的大小 已经完成了测量物体大小的任务,今天进行最后一部分:计算图片中物体之间的距离。...上篇我们讨论了如何使用参考对象来测量图像中对象的大小。 这个参考对象应该有两个重要的特征,包括: 我们知道这个物体的尺寸(以英寸、毫米等表示)。 它很容易在我们的图像中被识别出来(根据位置或外观)。...给定这样一个参考对象,我们可以使用它来计算图像中对象的大小。 今天,我们将结合本系列前两篇来计算对象之间的距离。 计算物体之间的距离与计算图像中物体的大小算法思路非常相似——都是从参考对象开始的。...我们的目标是找到0.25美分,然后利用0.25美分的尺寸来测量0.25美分硬币与所有其他物体之间的距离。...距离测量结果 下面是一个GIF动画,演示了我们的程序运行效果: 在每种情况下,我们的脚本都匹配左上(红色)、右上(紫色)、右下(橙色)、左下(蓝绿色)和质心(粉色)坐标,然后计算参考对象和当前对象之间的距离

4.6K40

云服务商正在杀死开源商业模式

但是昨天看到了一个让我震惊的新闻:最新版本的Mapbox GL JS将不再是开源的!!!...我们先回到Mapbox的例子,在Mapbox GL JS使用的案例中,Mapbox最早的决定是,开源其基于浏览器的地图渲染器的最早的两个版本(像我们熟知的Snap-Maps、纽约时报和CNN都用过)。...而对于我自己来说,当我的团队开始构建一个标记卫星图像的项目时,我才亲身体验了Mapbox GL JS的功能是有多么强大。...使用Mapbox GL JS的功能,支持复杂几何图形的自由形式绘图,最终的成品是可以在地图上形成形状,也就是说是我的标记是被投影到地球上的一个真实位置,而不是简单的仅仅是悬浮在想象中的二维空间。...Image for post 而这周Mapbox决定公布一个Mapbox GL JS的新版本,这个新版本不再开源瞬间震撼到了我!

2.5K10

使用 Mapbox 在 Vue 中开发一个地理信息定位应用

我们将使用 Mapbox 和 Vue.js 2.6.11 构建一个应用这些概念来显示特定位置的应用程序。 什么是地理编码? 地理编码是将基于文本的位置转换为世界位置的地理坐标(通常为经度和纬度)。...这是我们将用于此项目的列表: Mapbox GL JS Mapbox-gl-geocoder Dotenv Axios 根据你首选的包管理器在 CLI 中安装包。...如果你使用 Yarn,请运行以下命令: cd geocoder && yarn add mapbox-gl @mapbox/mapbox-gl-geocoder axios or cd geocoder...Mapbox GL JS 根据页面上的这些参数初始化我们的地图,并返回一个 Map 对象给我们。 Map 对象引用我们页面上的地图,同时公开使我们能够与地图交互的方法和属性。... 使用

46610

Godot Engine:跨平台游戏开发的新境界 | 开源日报 No.92

mapbox/mapbox-gl-js[3] Stars: 10.1k License: NOASSERTION picture Mapbox GL JS 是一个在浏览器中使用矢量切片和 WebGL...该项目具有以下核心优势: 强大而灵活:Mapbox GL JS 提供了丰富的功能,可以创建出符合个性需求并能够与用户进行交互的地图。它支持自定义样式,并提供多种数据展示方式。...高效渲染:通过利用 WebGL 技术,Mapbox GL JS 能够快速加载和渲染大规模矢量切片数据,在保证流畅体验同时节省资源消耗。...具体来说,在 A100 和 H100 这些 GPU 上,使用 FlashAttention 可以达到数倍甚至十倍以上的加速。.../mapbox-gl-js: https://github.com/mapbox/mapbox-gl-js [4] Dao-AILab/flash-attention: https://github.com

35110

(数据科学学习手札156)地图可视化神器kepler.gl 3.0版本发布

1 简介   大家好我是费老师,地图可视化神器kepler.gl终于带来了其3.0大版本的更新,距离其上一个正式版本2.5.5的发布已经过去了两年多的时间,这次的版本更新也围绕巨量地理信息数据可视化的多个方面实现了显著的提升...:   譬如光线阴影特效,可以通过设置精确的时区、时间等参数,来为地图中的三维要素配置逼真的光影效果:   或是开启放大镜效果:   且多种特效可以相互叠加使用,功能非常的强大~ 2.2 新增GeoArrow...底层是基于React、Mapbox以及deck.gl等框架进行功能构建,但由于Mapbox从1.13版本开始修改了其开源协议,变成了闭源商业地图框架,因此为了避免被不再开源的Mapbox限制其发展,kepler.gl...从3.0版本开始正式将底层地图框架更换成相兼容的开源高性能地图框架Maplibre(这也是费老师我在日常GIS平台研发工作中使用的主力框架,强烈推荐)。   ...受此影响,我们作为用户唯一能感知到的变化就是默认自带的可选地图更换为非Mapbox提供的一系列开放底图:   以及地图右下角信息的变化:   经历了底层技术的大换血,在更多更新更活跃的开源GIS技术加持下

26510

使用Node.js理解和测量Http时序

理解和测量HTTP时序帮助我们去发现客户端与服务器、服务器与服务器之间通信的性能瓶颈。本文阐述了在一次HTTP请求中的时序,并展示了如何在Node.js中进行测量。...使用Node.js测量HTTP的请求时序 使用Node.js测量HTTP的时序,我们需要订阅一个特定的HTTP请求、响应和socket事件。这里有一个只关注时序的简短Node.js代码片段。...request 模块 流行的request模块具有内置的HTTP时序测量方法。您可以使用time属性启用它。...Jaeger使用opentracing-auto测量HTTP请求。 总结 使用Node.js测量HTTP的时序可以帮助发现性能瓶颈。...---- 往期精选文章 使用虚拟dom和JavaScript构建完全响应式的UI框架 扩展 Vue 组件 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全

1.1K20
领券