Mapbox.GL 常用的 GIS 工具函数

最新推荐文章于 2025-03-19 23:12:04 发布

ObDjango

最新推荐文章于 2025-03-19 23:12:04 发布

阅读量333

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript GIS

本文链接：https://blog.youkuaiyun.com/ObDjango/article/details/133228364

GIS 专栏收录该内容

57 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了Mapbox.GL的一些常用工具函数，包括经纬度到屏幕像素的转换、屏幕像素到经纬度的转换、计算经纬度间距离、判断坐标是否在边界框内以及地理坐标到屏幕坐标的转换，帮助开发者更高效地处理GIS数据。

Mapbox.GL 是一个强大的地图渲染库，提供了丰富的功能和工具函数来处理地理信息系统（GIS）数据。在本文中，我们将探讨一些常用的 Mapbox.GL 工具函数，以及它们的用法和示例代码。

将经纬度坐标转换为屏幕像素坐标

有时候我们需要将经纬度坐标转换为屏幕像素坐标，以便在地图上绘制元素或执行其他操作。Mapbox.GL 提供了一个函数project来完成这个转换：

const lngLat = [-122.4194, 37.7749]; // 经纬度坐标
const pixel = mapboxgl

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ObDjango

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

057：mapboxGL中layout，paint等属性的函数表达说明

大剑师兰特的GIS世界

10-20

1004

函数 Function 可以作为其 layout布局类属性和 paint 绘制类属性的属性值。在使用 Function 作为属性值时，实际上是一个对象。

037：mapboxGL输入经纬度，地址坐标转换，弹出位置点地址信息

大剑师兰特的GIS世界

07-01

841

第037个本示例的目的是介绍演示如何在vue+mapbox中输入经纬度，地址坐标转换，弹出位置点地址信息.

参与评论您还未登录，请先登录后发表或查看评论

地图投影公式转换

runfeel

05-31

542

墨卡托投影坐标系（Mercator Projection）墨卡托投影（Mercator Projection），又称为“等角正轴圆柱投影”，是一种“等角正切圆柱投影”，荷兰地图学家墨卡托（Mercator）在1569年拟定，假设地球被围在一个中空的圆柱里，其赤道与圆柱相接触，然后再假想地球中心有一盏灯，把球面上的图形投影到圆柱体上，再把圆柱体展开，这就是一幅标准纬线为零度（即赤道）的“墨卡...

mapbox 笔记

qq_34870529的博客

02-16

3114

1：mapbox 更改图层属性 map.setPaintProperty(layer, 'fill-opacity', 1); 2：mapbox 更改图层数据源 map.getSource(source).setData(cityHeatDatas); 3：mapbox 获取当前地图已添加的图层layers及数据源sources const layers = map.getStyl...

mapbox gl 加载gltf模型

荣默默的博客

12-22

2546

首先得理解gltf文件就是一个json文件，GLTF代表Graphics Language Transmission Format（图形语言传输格式），描述的是三维场景数据的组成和构造。 1.引入mapbox gl的sdk，另外也得引入 <script src="js/three.min.js"></script><script src="js/GLTFLoader.js"></script>这两个js插件，废话不多说，直接上代码： <!DOCT.

mapbox的一些常用函数

qq_43840793的博客

07-17

392

1、获取地图中心点与缩放级别。

地理坐标、经纬度坐标与屏幕坐标的转换!

xhwolf的专栏

11-16

2190

地理坐标、经纬度坐标与屏幕坐标的转换

mapbox-gl 常用Expressions表达式

我哎GIS博客

08-30

1783

表达式（expressions)是Mapbox GL JS的一个高级功能，它为数据的添加和渲染展示提供了更多的灵活性。任何layout、paint或者filter的值都可以用一个expression表达式来细化，一个expression表达式定义了用如下计算器计算属性值的公式。

Mapboxgl实现点animate动画效果

03-24

在GIS领域，Mapbox GL JS 提供了丰富的API和工具，使得开发者可以轻松地实现各种地图上的动画效果，比如“点animate动画效果”。这个主题将深入探讨如何使用Mapbox GL JS来创建动态的点动画，提升地图的视觉表现力和...

mapbox-gl源码中解析style加载地图过程详解

最新发布

cuijiying的博客

03-19

1501

Mapbox GL JS 中style加载样式：通过_loadStyle获取样式 JSON。创建 Style 实例_setStyle初始化样式管理。解析样式Style类解析sources和layers。加载源数据Source类根据类型加载瓦片或 GeoJSON。创建图层StyleLayer定义渲染规则。渲染地图_render和update方法驱动 WebGL 渲染。如果你想深入研究，建议查看map.jsstyle.jssource.js和等源码文件，以及官方文档。

MapboxGL坐标体系

07-02

2078

透视矩阵 * flipY矩阵 * 相机到瓦片中心的距离矩阵 * pitch(rotateX)矩阵 * angle(rotateZ)矩阵 * 平移矩阵 * 维度垂直scale矩阵 * 位置平移矩阵 * scale/zoom矩阵。ecef球的y轴朝上，跟cesium的z轴朝上不一样。x轴朝向经度90°，z轴朝向经度0°。TileCoordinates：瓦片坐标，范围8192，左上角（0, 0）NDC：NDC坐标，上面的GL坐标除以w。，设置的是6371008.8。，大概是1303.797像素。

mapbox-gl中的web墨卡托转换

地理信息技术杂谈博客，欢迎技术交流

08-10

2114

mapbox-gl的api开放了web墨卡托和经纬度的转换，直接使用mapbox-gl的api能够进行web墨卡托的坐标操作。 api说明网址： https://docs.mapbox.com/mapbox-gl-js/api/geography/#mercatorcoordinate web墨卡托的坐标说明： http://epsg.io/3857 api使用说明将经纬度坐标转换成web墨卡托坐标，包含了高度的信息： let modelAsMercatorCoordinate = mapboxgl.Me

036：mapboxGL点击某位置，转换坐标为地址，弹出地理信息

大剑师兰特的GIS世界

06-30

648

第036个本示例的目的是介绍演示如何在vue+mapbox中点击某位置，转换坐标位地址，弹出地理信息.

GIS开发中关于常用坐标系转换的问题（以Unity和MapBox为例）

qq_44706002的博客

09-20

5891

国内外各个主流的开发包或者第三方地图插件所使用的坐标系并不统一再加上精确度等问题，使得数据坐标位置的匹配成为一个难点，这里对常用坐标系以及转换进行简单介绍，并以Mapbox和Unity为例，将经纬度与unity坐标的转换进行了代码实现。

地图坐标转换

weixin_53002680的博客

01-25

2732

mapbox地图坐标转换经纬度及经纬度转换地图坐标

mapbox地图反算

qq_47099087的博客

06-20

268

【代码】mapbox地图反算。

mapbox添加fbx的3d模型

z_12345z的博客

12-29

930

mapbox添加3D模型

mapbox 将坐标转换成米

老段的优快云的博客

08-31

869

1、基于当前坐标转换成米 //点击地图出现经纬度 map.on('click', function (e) { var coordinates = e.lngLat; // 将经纬度坐标转换成web墨卡托坐标 var point = mapboxgl.MercatorCoordinate.fromLngLat(coordinates, 0); c

Mapbox经纬度转屏幕xy，屏幕坐标和经纬度

free_plm的博客

07-11

2392

mapbox屏幕xy和经纬度的相互转换

deck.gl框架入门与操作指南

4. **交互性**：提供了丰富的交互功能，如缩放、拖动、选择等，可与第三方交互库如MapboxGL.js、React等无缝集成。 5. **支持3D视图**：可以创建令人印象深刻的3D场景，并且可以很容易地集成到现有的Web应用中。 ...