分享
还是大剑师兰特
美国某知名大学研究生，专业的航天航海交通领域高级前端开发工程师，从事GIS、物联网行业多年，深耕vue+openlayers，vue+cesium等领域。
展开
-
Mapbox GL示例教程【目录】-- 已有80篇
vue+mapbox系列教程旨在为开发者提供简单快捷的。在每一个示例中，解释相应的API知识点，做到。原创 2023-04-12 15:33:32 · 1827 阅读 · 22 评论
-
079：vue+mapbox 实现卷帘效果
本示例演示如何在vue+mapbox 中实现卷帘效果。这里利用了mapbox-gl-compare这个插件，在使用的时候，特别要注意，将id赋值给container，将引用的compare插件赋值给mapboxgl.Compare，详细使用见源代码直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果。原创 2024-05-22 00:00:00 · 990 阅读 · 44 评论 -
078：vue+mapbox 禁止启用dragRotate，影响右键拖拽旋转地图功能
第078个示例的目的是演示如何在vue+mapbox 中禁止启用dragRotate，影像右键拖拽旋转地图功能。Mapbox GL JS 中的 DragRotateHandler 是一个内置交互处理器，它允许用户通过鼠标或触摸手势拖拽旋转地图视角。这意味着用户 可以通过右键点击拖拽地图来更改地图的方向，这对于支持3D视角的地图特别有用。原创 2024-04-24 00:00:00 · 1439 阅读 · 30 评论 -
077：vue+mapbox 禁止启用dragPan，影响平移拖拽地图的功能
演示如何在vue+mapbox 中禁止启用dragPan拖拽地图的功能。Mapbox GL JS 提供了一组内置的交互 handler，其中 DragPanHandler 是其中之一，它允许用户通过鼠标或触摸手势拖动地图来改变视口的位置。当你想要启用或禁用地图的平移功能时，可以对这个 handler 进行操作。原创 2024-04-22 00:00:00 · 1915 阅读 · 52 评论 -
076：vue+mapbox 禁止滚轮放大缩小地图
演示如何在vue+mapbox中禁止滚轮放大缩小地图，通常使用这种功能的情况很少，但是特殊情况能用的到，这里的核心解决方案请参考源代码。原创 2024-04-16 06:45:00 · 994 阅读 · 15 评论 -
075：vue+mapbox 利用高德地址逆转换，点击地图，弹出地址信息
本示例的目的是介绍演示如何在vue+mapbox中利用高德逆地理编码，点击地图，弹出某点坐标和地址信息。这里要仔细阅读高德地图的逆编码API，同时要注意的是，这种转换在中国很好用，到了欧美国家就不好使了。同时这个底图是天地图的图像和标记。原创 2024-02-01 00:00:00 · 765 阅读 · 44 评论 -
074：vue+mapbox 加载here地图（影像瓦片图 v2版）
本示例的目的是介绍演示如何在vue+mapbox中加载here地图的影像瓦片图 v2软件版本。原创 2024-01-23 01:00:00 · 602 阅读 · 47 评论 -
073：vue+mapbox 加载here地图（影像瓦片图 v3版）
本示例的目的是介绍演示如何在vue+mapbox中加载here地图的影像瓦片图。原创 2024-01-17 18:15:21 · 327 阅读 · 5 评论 -
072：mapboxGL 点击某图层feature，高亮这部分
本示例是介绍如何在vue+mapbox中点击某图层feature，高亮这部分。思路是通过点击，获取点击部分的feature信息，生成一个新的source和layer，如果这个图层不为空，则清除之，相当于点击了别的地方，原有的高亮会删除掉，在别的地方高亮。原创 2024-01-18 00:00:00 · 300 阅读 · 26 评论 -
071：mapboxGL上传含shp的zip文件，在map上解析显示图形
本示例是介绍演示如何在vue+mapbox中上传含有shp文件的zip，在地图上显示图形。这里先通过上传解压解析，转换生成geojson文件，然后在地图上渲染图形。原创 2023-10-29 00:30:00 · 294 阅读 · 29 评论 -
070：mapboxGL加载含有shp文件的zip，显示图形
本示例是介绍演示如何在vue+mapbox中加载含有shp文件的zip，在地图上显示图形。这里先通过转换生成geojson文件，然后在地图上渲染图形，同时使用fitBounds将数据放置到可视的范围内。原创 2023-10-29 00:15:00 · 276 阅读 · 3 评论 -
069：mapboxGL加载GPX，转换为geojson，显示图形
本示例是演示如何在vue+mapbox中加载GPX，转换为geojson，在地图上显示图形。这里面用到了大剑师的gpx2geojson插件，很方便的做了数据的转换。原创 2023-10-28 00:30:00 · 479 阅读 · 35 评论 -
068：mapboxGL绘制多边形，过滤获取选中的点的集合信息
本示例的目的是介绍演示如何在vue+mapbox中添加draw组件，绘制多边形，获取选中的点的集合信息。这里使用turf来判断点是否在多边形的范围内。通过filter方式，过滤掉未选中的点。原创 2023-10-27 00:45:00 · 311 阅读 · 5 评论 -
067：mapboxGL上传CSV文件，显示图形，导出为Geojson文件
本示例的目的是演示如何在vue+mapbox中上传CSV文件，显示图形，导出为Geojson文件。原创 2023-10-27 00:15:00 · 213 阅读 · 2 评论 -
066：mapboxGL的marker的drag，dragstart，dragend三种触发事件示例
本示例是演示如何在vue+mapbox中处理marker的三种触发事件drag，dragstart，dragend。 marker通过on('XXX', callback),的方式进行触发处理。原创 2023-10-26 00:30:00 · 378 阅读 · 37 评论 -
065：mapboxGL在一个图层中随机添加100个标记（marker）
本示例是演示如何在vue+mapbox中在一个图层上随机添加100个标记（marker）。要添加多个标记，或者向交互式 Web 或移动地图添加标记，通常必须提供 GeoJSON 格式或矢量切片集的点数据。 您可以在运行之前将数据添加到地图样式，方法是使用 Mapbox Studio 样式编辑器添加矢量切片集作为地图样式中图层的源。原创 2023-10-26 00:15:00 · 348 阅读 · 26 评论 -
064：mapboxGL获取并删除地图上的所有图层的方法
本示例的目的是演示如何在vue+mapbox中获取并删除地图上的所有图层，主要学习的是这种方法，在实际的开发中应用非常广泛。原创 2023-10-25 00:45:00 · 628 阅读 · 28 评论 -
063：mapboxGL常见错误：Style is not done loading（原因及解决办法）
mapboxGL常见错误：Style is not done loading（原因及解决办法）原创 2023-10-23 00:30:00 · 696 阅读 · 36 评论 -
062：mapboxGL通过jumpTo方式跳转到某位置
本示例的目的是介绍演示如何在vue+mapbox中通过jumpTo方式跳转到某位置。原创 2023-10-22 00:45:00 · 717 阅读 · 9 评论 -
061：mapboxGL利用fitBounds同时将多个点放在可视范围内
本示例的目的是介绍演示如何在vue+mapbox中加载geojson数据，利用fitBounds同时将多个点放在可视范围内。原创 2023-10-22 00:30:00 · 301 阅读 · 26 评论 -
060：mapboxGL点击某处，通过flyTo，以动画的形式聚焦到此点
本示例的目的是介绍演示如何在vue+mapbox中点击某处，通过flyto，以动画的形式聚焦到此点。这里用到了flyTo的方法，里面可以设置bearing，zoom，pitch等众多的属性内容。原创 2023-10-21 00:45:00 · 483 阅读 · 6 评论 -
059：mapboxGL监听键盘事件，通过eastTo控制左右旋转
本示例是介绍演示如何在vue+mapbox中监听键盘事件，通过eastTo控制左右旋转。 本例通过easeTo方法来加减一定数值的bearing角度，通过.addEventListener的方法来监听键盘的按键动作。这里一定要设置interactive: false， 否则展现不出来旋转效果。原创 2023-10-21 00:30:00 · 263 阅读 · 1 评论 -
058：mapboxGL监听键盘事件，通过panBy控制前后左右移动
本示例是介绍演示如何在vue+mapbox中监听键盘事件，控制前后左右移动。 本例通过panBy方法来移动一定距离的地图，通过.addEventListener的方法来监听键盘的按键动作。注意这里面style中一定要设置好pitch，不能为0，不然就撞墙，不能移动了。原创 2023-10-20 00:45:00 · 207 阅读 · 9 评论 -
057：mapboxGL中layout，paint等属性的函数表达说明
函数 Function 可以作为其 layout布局类属性和 paint 绘制类属性的属性值。在使用 Function 作为属性值时，实际上是一个对象。原创 2023-10-20 00:30:00 · 507 阅读 · 18 评论 -
056：mapboxGL中layer的layout，paint，filter的属性值表达式说明总结
mapbox中 Expressions 是什么 Expressions：表达式集合（并非 style 的属性，只是 layer 的任何 layout布局属性和 paint绘制属性，以及 filter 属性等，它们的值都可以指定成一个表达式 Expression）原创 2023-10-19 00:45:00 · 669 阅读 · 6 评论 -
055：mapboxGL中加载geojson，导出为CSV格式文件
本示例介绍演示如何在vue+mapbox中加载geojson，导出为CSV格式文件。 通过一个插件，将geojson转化为csv，同时通过file-saver将文件下载下来。原创 2023-10-19 00:30:00 · 305 阅读 · 8 评论 -
054：mapboxGL中 layers的9种渲染类型及其示例代码
mapbox中 layers 是什么 layers是图层集合，在mapbox中为必填项，包含了一系列图层 layer，这些图层指定了如何渲染数据源提供的数据。原创 2023-10-18 00:30:00 · 527 阅读 · 24 评论 -
053：mapboxGL中sources的6种类型及各类型的示例代码
mapbox中 sources 是什么 sources：数据源集合（必填，用于包含一系列数据源 source，这些数据源提供了在地图上显示的数据）sources 是对象 {} 的形式，其属性名就是 数据源的名称（或者说 数据源的 id），这样可以根据 数据源的名称（或者说 数据源的 id）快速获取数据源的信息。原创 2023-10-17 10:40:11 · 444 阅读 · 17 评论 -
052：mapboxGL同一个图层，设置每个feature不同的颜色
本示例是介绍演示如何在vue+mapbox中同一个图层，设置每个feature不同的颜色。 这里的数据都是点，通过每个geojson数据的属性中color的值，来同通过get的方式将颜色值挂在到circle-color上。原创 2023-10-17 00:30:00 · 490 阅读 · 22 评论 -
051：mapboxGL改变bearing和pitch，变换查看视角
本示例是介绍演示如何在vue+mapbox中改变bearing和pitch，变换查看视角。bearing：地图的默认方位角（可选，表示 地图视口正上方中心点 在地图上 北偏东 的角度。默认值为 0）。pitch：地图的默认倾斜角度（可选，默认值为 0，范围为 0 ~ 85）。原创 2023-10-16 15:48:41 · 502 阅读 · 17 评论 -
050：mapboxGL加载geojson数据，同时包含点、多边形的处理示例
演示如何在vue+mapbox中加载geojson数据，既显示点又显示多边形。这个示例是显示了一种处理方式，通过过滤的方式将数据分离化，点和多边形通过两个不同的图层来加载表示。原创 2023-10-16 00:30:00 · 466 阅读 · 25 评论 -
049：mapboxGL本地上传WKT文件，在地图上显示图形
本示例演示如何在vue+mapbox中本地上传wkt文件，先将wkt转换为geojson格式，然后通过mapbox加载geojson数据的方法解析，在地图上显示图形。原创 2023-10-15 00:45:00 · 314 阅读 · 20 评论 -
048：mapboxGL本地上传geojson文件，在map上解析显示图形
本示例的目的是介绍演示如何在vue+mapbox中本地上传geojson文件，通过mapbox加载geojson数据的方法解析，在地图上显示图形。原创 2023-10-15 00:30:00 · 864 阅读 · 8 评论 -
047：mapboxGL本地上传shp文件，在map上解析显示图形
本示例的目的是介绍演示如何在vue+mapbox中本地上传shp文件，利用shapefile读取shp数据，并在地图上显示图形。原创 2023-10-14 00:45:00 · 511 阅读 · 3 评论 -
046：mapboxGL加载天地图路网图+标记（wmts方式）
本示例的目的是介绍演示如何在vue+mapbox中加载天地图路网图+标记（wmts方式）。瓦片中的url地址引用的是天地图的wmts的形式。原创 2023-10-14 00:30:00 · 762 阅读 · 0 评论 -
045：mapboxGL 加载卫星天地图+标记
本示例的目的是介绍演示如何在vue+mapbox中加载卫星天地图+标记。天地图的图像和标记是分开来加载的，本例子利用数组的方式灵活地将两层组合到底图中。原创 2023-10-13 00:45:00 · 379 阅读 · 30 评论 -
044：mapboxGL利用fill-extrusion自定义挤出状建筑体
演示如何在vue+mapbox中利用fill-extrusion自定义挤出状建筑体。填充挤压样式图层在地图上渲染一个或多个填充（以及可选的描边）挤压（3D）多边形。 您可以使用填充拉伸图层来配置多边形或多多边形要素的拉伸和视觉外观。原创 2023-10-13 00:30:00 · 338 阅读 · 25 评论 -
043：mapboxGL鼠标点击提示source属性信息
本示例的目的是介绍演示如何在vue+mapbox中通过鼠标点击提示source属性信息。这里用到了popup弹窗，用到了click事件，用到了鼠标样式的变化等功能。原创 2023-10-12 00:45:00 · 257 阅读 · 18 评论 -
042：mapboxGL点击某feature点，使其为中心点
本示例的目的是介绍演示如何在vue+mapbox中通过鼠标点击某feature点，让其成为中心点。这里用到了click事件和flyTo的方法。原创 2023-10-12 00:30:00 · 325 阅读 · 17 评论 -
041：mapboxGL移动到到某Layer上，更换鼠标形状
本示例的目的是介绍演示如何在vue+mapbox中通过鼠标hover的方式来更换鼠标形状。 通过mouseenter和mouseleave的方法，经过某个图层上的时候，更换鼠标的形状，从default到pointer。 离开后从pointer到default。原创 2023-10-11 11:24:00 · 309 阅读 · 27 评论