mapboxGL示例教程100+
分享
扫一扫
文章平均质量分 84
专业的航天领域高级前端开发工程师，美国某大学计算机科学研究生分享Vue+mapbox的开发知识。 不彰呈华丽的辞藻，只提供简介清晰的示例和源代码。
优惠券已抵扣
余额抵扣
还需支付
¥159.90
¥299.90
购买须知?
本专栏为图文内容，最终完结不会低于15篇文章。
订阅专栏，享有专栏所有文章阅读权限。
本专栏为虚拟商品，基于网络商品和虚拟商品的性质和特征，专栏一经购买无正当理由不予退款，不支持升级，敬请谅解。
还是大剑师兰特
曾是美国普渡大学计算机研究生，现为GIS领域高级前端开发工程师。深耕openlayers、leaflet、cesium、mapbox、echarts、threejs、webgl、canvas、svg等技术，目前正研究GIS大模型在低空经济领域的应用，拥有两项GIS方面的专利。
展开
-
Mapbox GL示例教程【目录】-- 已有80篇
vue+mapbox系列教程旨在为开发者提供简单快捷的。在每一个示例中，解释相应的API知识点，做到。原创 2023-04-12 15:33:32 · 3776 阅读 · 50 评论
-
082：mapboxGL 自带字体列表，自定义字体
在 Mapbox GL JS 中，默认支持的字体是由 Mapbox 提供的一组预定义字体。这些字体可以通过 `'text-font'` 属性直接使用，而无需额外上传或配置。原创 2025-03-28 07:30:00 · 517 阅读 · 25 评论 -
081：vue+mapbox 地图上使用多种不同的字体
本示例演示vue+mapbox 中 在地图上使用多种不同的字体。从上图可以看到Font A 和 Font B是两种不同的字体，一个是普通粗细，另一个是加粗的字体，具体的实现方式，请参考源代码。直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果。原创 2025-03-26 08:30:00 · 441 阅读 · 29 评论 -
WebGL入门（039）：EXT_shader_texture_lod 简介、使用方法、示例代码
`EXT_shader_texture_lod`扩展为WebGL引入了几种新的内置函数，这些函数允许开发者在片段着色器中控制纹理采样的细节级别。这些函数可以帮助开发者实现更精细的纹理采样控制，从而提高渲染质量。原创 2024-09-10 00:00:00 · 372 阅读 · 14 评论 -
080：vue+mapbox中interpolate 的详细解释
在Mapbox GL JS中，你可以使用样式表达式来实现数据驱动的样式，其中`interpolate`表达式是用于创建平滑过渡的一种方式。当你需要根据某个属性的值来动态地设置样式时，比如颜色、宽度或其他样式属性，`interpolate`表达式就非常有用。原创 2024-08-15 00:30:00 · 693 阅读 · 51 评论 -
079：vue+mapbox 实现卷帘效果
本示例演示如何在vue+mapbox 中实现卷帘效果。这里利用了mapbox-gl-compare这个插件，在使用的时候，特别要注意，将id赋值给container，将引用的compare插件赋值给mapboxgl.Compare，详细使用见源代码直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果。原创 2024-05-22 00:00:00 · 1240 阅读 · 44 评论 -
078：vue+mapbox 禁止启用dragRotate，影响右键拖拽旋转地图功能
第078个示例的目的是演示如何在vue+mapbox 中禁止启用dragRotate，影像右键拖拽旋转地图功能。Mapbox GL JS 中的 DragRotateHandler 是一个内置交互处理器，它允许用户通过鼠标或触摸手势拖拽旋转地图视角。这意味着用户 可以通过右键点击拖拽地图来更改地图的方向，这对于支持3D视角的地图特别有用。原创 2024-04-24 00:00:00 · 1613 阅读 · 30 评论 -
077：vue+mapbox 禁止启用dragPan，影响平移拖拽地图的功能
演示如何在vue+mapbox 中禁止启用dragPan拖拽地图的功能。Mapbox GL JS 提供了一组内置的交互 handler，其中 DragPanHandler 是其中之一，它允许用户通过鼠标或触摸手势拖动地图来改变视口的位置。当你想要启用或禁用地图的平移功能时，可以对这个 handler 进行操作。原创 2024-04-22 00:00:00 · 2116 阅读 · 52 评论 -
076：vue+mapbox 禁止滚轮放大缩小地图
演示如何在vue+mapbox中禁止滚轮放大缩小地图，通常使用这种功能的情况很少，但是特殊情况能用的到，这里的核心解决方案请参考源代码。原创 2024-04-16 06:45:00 · 1197 阅读 · 15 评论 -
075：vue+mapbox 利用高德地址逆转换，点击地图，弹出地址信息
本示例的目的是介绍演示如何在vue+mapbox中利用高德逆地理编码，点击地图，弹出某点坐标和地址信息。这里要仔细阅读高德地图的逆编码API，同时要注意的是，这种转换在中国很好用，到了欧美国家就不好使了。同时这个底图是天地图的图像和标记。原创 2024-02-01 00:00:00 · 919 阅读 · 44 评论 -
074：vue+mapbox 加载here地图（影像瓦片图 v2版）
本示例的目的是介绍演示如何在vue+mapbox中加载here地图的影像瓦片图 v2软件版本。原创 2024-01-23 01:00:00 · 754 阅读 · 47 评论 -
073：vue+mapbox 加载here地图（影像瓦片图 v3版）
本示例的目的是介绍演示如何在vue+mapbox中加载here地图的影像瓦片图。原创 2024-01-17 18:15:21 · 404 阅读 · 5 评论 -
072：mapboxGL 点击某图层feature，高亮这部分
本示例是介绍如何在vue+mapbox中点击某图层feature，高亮这部分。思路是通过点击，获取点击部分的feature信息，生成一个新的source和layer，如果这个图层不为空，则清除之，相当于点击了别的地方，原有的高亮会删除掉，在别的地方高亮。原创 2024-01-18 00:00:00 · 558 阅读 · 26 评论 -
071：mapboxGL上传含shp的zip文件，在map上解析显示图形
本示例是介绍演示如何在vue+mapbox中上传含有shp文件的zip，在地图上显示图形。这里先通过上传解压解析，转换生成geojson文件，然后在地图上渲染图形。原创 2023-10-29 00:30:00 · 427 阅读 · 29 评论 -
070：mapboxGL加载含有shp文件的zip，显示图形
本示例是介绍演示如何在vue+mapbox中加载含有shp文件的zip，在地图上显示图形。这里先通过转换生成geojson文件，然后在地图上渲染图形，同时使用fitBounds将数据放置到可视的范围内。原创 2023-10-29 00:15:00 · 552 阅读 · 3 评论 -
069：mapboxGL加载GPX，转换为geojson，显示图形
本示例是演示如何在vue+mapbox中加载GPX，转换为geojson，在地图上显示图形。这里面用到了大剑师的gpx2geojson插件，很方便的做了数据的转换。原创 2023-10-28 00:30:00 · 612 阅读 · 35 评论 -
068：mapboxGL绘制多边形，过滤获取选中的点的集合信息
本示例的目的是介绍演示如何在vue+mapbox中添加draw组件，绘制多边形，获取选中的点的集合信息。这里使用turf来判断点是否在多边形的范围内。通过filter方式，过滤掉未选中的点。原创 2023-10-27 00:45:00 · 592 阅读 · 5 评论 -
067：mapboxGL上传CSV文件，显示图形，导出为Geojson文件
本示例的目的是演示如何在vue+mapbox中上传CSV文件，显示图形，导出为Geojson文件。原创 2023-10-27 00:15:00 · 416 阅读 · 15 评论 -
066：mapboxGL的marker的drag，dragstart，dragend三种触发事件示例
本示例是演示如何在vue+mapbox中处理marker的三种触发事件drag，dragstart，dragend。 marker通过on('XXX', callback),的方式进行触发处理。原创 2023-10-26 00:30:00 · 649 阅读 · 37 评论 -
065：mapboxGL在一个图层中随机添加100个标记（marker）
本示例是演示如何在vue+mapbox中在一个图层上随机添加100个标记（marker）。要添加多个标记，或者向交互式 Web 或移动地图添加标记，通常必须提供 GeoJSON 格式或矢量切片集的点数据。 您可以在运行之前将数据添加到地图样式，方法是使用 Mapbox Studio 样式编辑器添加矢量切片集作为地图样式中图层的源。原创 2023-10-26 00:15:00 · 553 阅读 · 26 评论 -
064：mapboxGL获取并删除地图上的所有图层的方法
本示例的目的是演示如何在vue+mapbox中获取并删除地图上的所有图层，主要学习的是这种方法，在实际的开发中应用非常广泛。原创 2023-10-25 00:45:00 · 1055 阅读 · 28 评论 -
063：mapboxGL常见错误：Style is not done loading（原因及解决办法）
mapboxGL常见错误：Style is not done loading（原因及解决办法）原创 2023-10-23 00:30:00 · 1288 阅读 · 36 评论 -
062：mapboxGL通过jumpTo方式跳转到某位置
本示例的目的是介绍演示如何在vue+mapbox中通过jumpTo方式跳转到某位置。原创 2023-10-22 00:45:00 · 855 阅读 · 9 评论 -
061：mapboxGL利用fitBounds同时将多个点放在可视范围内
本示例的目的是介绍演示如何在vue+mapbox中加载geojson数据，利用fitBounds同时将多个点放在可视范围内。原创 2023-10-22 00:30:00 · 562 阅读 · 26 评论 -
060：mapboxGL点击某处，通过flyTo，以动画的形式聚焦到此点
本示例的目的是介绍演示如何在vue+mapbox中点击某处，通过flyto，以动画的形式聚焦到此点。这里用到了flyTo的方法，里面可以设置bearing，zoom，pitch等众多的属性内容。原创 2023-10-21 00:45:00 · 793 阅读 · 6 评论 -
059：mapboxGL监听键盘事件，通过eastTo控制左右旋转
本示例是介绍演示如何在vue+mapbox中监听键盘事件，通过eastTo控制左右旋转。 本例通过easeTo方法来加减一定数值的bearing角度，通过.addEventListener的方法来监听键盘的按键动作。这里一定要设置interactive: false， 否则展现不出来旋转效果。原创 2023-10-21 00:30:00 · 396 阅读 · 1 评论 -
058：mapboxGL监听键盘事件，通过panBy控制前后左右移动
本示例是介绍演示如何在vue+mapbox中监听键盘事件，控制前后左右移动。 本例通过panBy方法来移动一定距离的地图，通过.addEventListener的方法来监听键盘的按键动作。注意这里面style中一定要设置好pitch，不能为0，不然就撞墙，不能移动了。原创 2023-10-20 00:45:00 · 302 阅读 · 9 评论 -
057：mapboxGL中layout，paint等属性的函数表达说明
函数 Function 可以作为其 layout布局类属性和 paint 绘制类属性的属性值。在使用 Function 作为属性值时，实际上是一个对象。原创 2023-10-20 00:30:00 · 834 阅读 · 18 评论 -
056：mapboxGL中layer的layout，paint，filter的属性值表达式说明总结
mapbox中 Expressions 是什么 Expressions：表达式集合（并非 style 的属性，只是 layer 的任何 layout布局属性和 paint绘制属性，以及 filter 属性等，它们的值都可以指定成一个表达式 Expression）原创 2023-10-19 00:45:00 · 1073 阅读 · 6 评论 -
055：mapboxGL中加载geojson，导出为CSV格式文件
本示例介绍演示如何在vue+mapbox中加载geojson，导出为CSV格式文件。 通过一个插件，将geojson转化为csv，同时通过file-saver将文件下载下来。原创 2023-10-19 00:30:00 · 434 阅读 · 8 评论 -
054：mapboxGL中 layers的9种渲染类型及其示例代码
mapbox中 layers 是什么 layers是图层集合，在mapbox中为必填项，包含了一系列图层 layer，这些图层指定了如何渲染数据源提供的数据。原创 2023-10-18 00:30:00 · 887 阅读 · 24 评论 -
053：mapboxGL中sources的6种类型及各类型的示例代码
mapbox中 sources 是什么 sources：数据源集合（必填，用于包含一系列数据源 source，这些数据源提供了在地图上显示的数据）sources 是对象 {} 的形式，其属性名就是 数据源的名称（或者说 数据源的 id），这样可以根据 数据源的名称（或者说 数据源的 id）快速获取数据源的信息。原创 2023-10-17 10:40:11 · 774 阅读 · 17 评论 -
052：mapboxGL同一个图层，设置每个feature不同的颜色
本示例是介绍演示如何在vue+mapbox中同一个图层，设置每个feature不同的颜色。 这里的数据都是点，通过每个geojson数据的属性中color的值，来同通过get的方式将颜色值挂在到circle-color上。原创 2023-10-17 00:30:00 · 776 阅读 · 22 评论 -
051：mapboxGL改变bearing和pitch，变换查看视角
本示例是介绍演示如何在vue+mapbox中改变bearing和pitch，变换查看视角。bearing：地图的默认方位角（可选，表示 地图视口正上方中心点 在地图上 北偏东 的角度。默认值为 0）。pitch：地图的默认倾斜角度（可选，默认值为 0，范围为 0 ~ 85）。原创 2023-10-16 15:48:41 · 748 阅读 · 17 评论 -
050：mapboxGL加载geojson数据，同时包含点、多边形的处理示例
演示如何在vue+mapbox中加载geojson数据，既显示点又显示多边形。这个示例是显示了一种处理方式，通过过滤的方式将数据分离化，点和多边形通过两个不同的图层来加载表示。原创 2023-10-16 00:30:00 · 658 阅读 · 25 评论 -
049：mapboxGL本地上传WKT文件，在地图上显示图形
本示例演示如何在vue+mapbox中本地上传wkt文件，先将wkt转换为geojson格式，然后通过mapbox加载geojson数据的方法解析，在地图上显示图形。原创 2023-10-15 00:45:00 · 500 阅读 · 20 评论 -
048：mapboxGL本地上传geojson文件，在map上解析显示图形
本示例的目的是介绍演示如何在vue+mapbox中本地上传geojson文件，通过mapbox加载geojson数据的方法解析，在地图上显示图形。原创 2023-10-15 00:30:00 · 993 阅读 · 8 评论 -
047：mapboxGL本地上传shp文件，在map上解析显示图形
本示例的目的是介绍演示如何在vue+mapbox中本地上传shp文件，利用shapefile读取shp数据，并在地图上显示图形。原创 2023-10-14 00:45:00 · 789 阅读 · 3 评论 -
046：mapboxGL加载天地图路网图+标记（wmts方式）
本示例的目的是介绍演示如何在vue+mapbox中加载天地图路网图+标记（wmts方式）。瓦片中的url地址引用的是天地图的wmts的形式。原创 2023-10-14 00:30:00 · 1388 阅读 · 0 评论 -
045：mapboxGL 加载卫星天地图+标记
本示例的目的是介绍演示如何在vue+mapbox中加载卫星天地图+标记。天地图的图像和标记是分开来加载的，本例子利用数组的方式灵活地将两层组合到底图中。原创 2023-10-13 00:45:00 · 767 阅读 · 30 评论