Mapbox GL示例教程100+ 【目录】

喜欢ヅ旅行 2024-03-23 11:07 93阅读 0赞

![在这里插入图片描述][bf6d528f641048c2924d88e7dc1e25f4.png_pic_center]

目前已有示例：65个

vue+Mapbox GL示例教程100+旨在为开发者提供简单快捷的\*\*代码示例\*\*，\*\*复制即可用\*\*。在每一个示例中，解释相应的API知识点，做到\*\*简易实现，轻松学会\*\*。

#### 文章目录 ####

*   *  目录
     *   *  综合应用
         *  重要API学习
         *  基础设置
         *  加载地图
         *  加载文件
         *  上传、导出文件
         *  绘制、显示图形
         *  事件和控件
         *  常见问题

### 目录 ###

#### 综合应用 ####

1.  [vue+mapbox：实现地图地点搜索定位功能 ][vue_mapbox_]
2.  [vue+mapbox：输入经纬度，跳转到相应位置 ][vue_mapbox_ 1]
3.  [vue+mapbox：点击某位置，转换坐标为地址，弹出地理信息 ][vue_mapbox_ 2]
4.  [vue+mapbox：输入经纬度，地址坐标转换，弹出位置点地址信息 ][vue_mapbox_ 3]
5.  [vue+mapbox：实现地图导航功能，选择起始点、路线、通行方式 ][vue_mapbox_ 4]
6.  [vue+mapbox：实现卷帘功能，可开启、关闭 ][vue_mapbox_ 5]

#### 重要API学习 ####

1.  [vue+mapbox：layer中layout，paint等属性的函数表达说明 ][vue_mapbox_layer_layout_paint_]
2.  [vue+mapbox：layer中layout，paint，filter的表达式说明 ][vue_mapbox_layer_layout_paint_filter_]
3.  [vue+mapbox：layers的9种渲染类型及其示例代码 ][vue_mapbox_layers_9_]
4.  [vue+mapbox：sources的6种类型及各类型的示例代码 ][vue_mapbox_sources_6_]

#### 基础设置 ####

1.  [vue+mapbox：从0 到1 搭建开发环境][vue_mapbox_0 _1]
2.  [vue+mapbox：更改大气、空间及星星状态 ][vue_mapbox_ 6]
3.  [vue+mapbox：设定不同的投影方式 ][vue_mapbox_ 7]
4.  [vue+mapbox：更换地图上的鼠标样式 ][vue_mapbox_ 8]
5.  [vue+mapbox：旋转地图（rotateTo） ][vue_mapbox_rotateTo_]
6.  [vue+mapbox：变换底图语言 ][vue_mapbox_ 9]
7.  [vue+mapbox：双屏地图联动 ][vue_mapbox_ 10]
8.  [vue+mapbox：改变bearing和pitch，变换查看视角 ][vue_mapbox_bearing_pitch_]

#### 加载地图 ####

1.  [vue+mapbox：加载基础的 mapbox GL地图 ][vue_mapbox_ mapbox GL_]
2.  [vue+mapbox：设定不同的style,更换底图形态 ][vue_mapbox_style_]
3.  [vue+mapbox：加载google地图（影像瓦片图） ][vue_mapbox_google_]
4.  [vue+mapbox：加载天地图（影像瓦片图） ][vue_mapbox_ 11]
5.  [vue+mapbox：加载卫星天地图+标记） ][vue_mapbox_ 12]
6.  [vue+mapbox：加载天地图路网图+标记（wmts方式） ][vue_mapbox_wmts_]
7.  [vue+mapbox：加载arcgis地图（影像瓦片图） ][vue_mapbox_arcgis_]
8.  [vue+mapbox：加载高德地图（影像瓦片图） ][vue_mapbox_ 13]

#### 加载文件 ####

1.  [vue+mapbox：加载geojson数据，显示line，自定义颜色、宽度等][vue_mapbox_geojson_line]
2.  [vue+mapbox：加载geojson数据，显示Polygon，自定义填充色、边框等][vue_mapbox_geojson_Polygon]
3.  [vue+mapbox：加载geojson数据，形成热力图，自定义样式][vue_mapbox_geojson]
4.  [vue+mapbox：加载circle样式图层，用data-driven风格绘制圆形][vue_mapbox_circle_data-driven]
5.  [vue+mapbox：加载矢量切片数据源][vue_mapbox]
6.  [vue+mapbox：加载栅格高程模型raster-dem文件][vue_mapbox_raster-dem]
7.  [vue+mapbox：加载image图像文件][vue_mapbox_image]
8.  [vue+mapbox：加载mp4视频文件][vue_mapbox_mp4]

#### 上传、导出文件 ####

#### 绘制、显示图形 ####

1.  [vue+mapbox：单个添加marker ][vue_mapbox_marker]
2.  [vue+mapbox：显示弹窗Popup示例 ][vue_mapbox_Popup_]
3.  [vue+mapbox：显示铁路黑白交替的线段 ][vue_mapbox_ 14]
4.  [vue+mapbox：显示设置渐变矢量矩形 ][vue_mapbox_ 15]
5.  [vue+mapbox：添加draw组件，手绘点、线、多边形、删除 ][vue_mapbox_draw_]
6.  [vue+mapbox：手绘修改多边形，实时更新面积 ][vue_mapbox_ 16]
7.  [vue+mapbox：手绘修改线段，实时更新长度值 ][vue_mapbox_ 17]

#### 事件和控件 ####

1.  [vue+mapbox：添加比例尺scale功能][vue_mapbox_scale]
2.  [vue+mapbox：两种方式隐藏logo和版权，个性化版权的声明 ][vue_mapbox_logo_]
3.  [vue+mapbox：添加全屏显示功能 ][vue_mapbox_ 18]
4.  [vue+mapbox：添加zoom和旋转控件 ][vue_mapbox_zoom_]
5.  [vue+mapbox：点击click某位置，显示坐标信息 ][vue_mapbox_click_]
6.  [vue+mapbox：移动鼠标mousemove，显示坐标信息 ][vue_mapbox_mousemove_]

#### 常见问题 ####

[bf6d528f641048c2924d88e7dc1e25f4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/db8e6768b1b54d38a2e146290fe0cfbb.png
[vue_mapbox_]: https://dajianshi.blog.csdn.net/article/details/130129777
[vue_mapbox_ 1]: https://dajianshi.blog.csdn.net/article/details/131430995
[vue_mapbox_ 2]: https://dajianshi.blog.csdn.net/article/details/1131481302
[vue_mapbox_ 3]: https://dajianshi.blog.csdn.net/article/details/131481359
[vue_mapbox_ 4]: https://dajianshi.blog.csdn.net/article/details/130982410
[vue_mapbox_ 5]: https://dajianshi.blog.csdn.net/article/details/131021709
[vue_mapbox_layer_layout_paint_]: https://dajianshi.blog.csdn.net/article/details/133900251
[vue_mapbox_layer_layout_paint_filter_]: https://dajianshi.blog.csdn.net/article/details/133900083
[vue_mapbox_layers_9_]: https://dajianshi.blog.csdn.net/article/details/133879853
[vue_mapbox_sources_6_]: https://dajianshi.blog.csdn.net/article/details/133878661
[vue_mapbox_0 _1]: https://dajianshi.blog.csdn.net/article/details/130108713
[vue_mapbox_ 6]: https://dajianshi.blog.csdn.net/article/details/130112355
[vue_mapbox_ 7]: https://dajianshi.blog.csdn.net/article/details/130125065
[vue_mapbox_ 8]: https://dajianshi.blog.csdn.net/article/details/133710982
[vue_mapbox_rotateTo_]: https://dajianshi.blog.csdn.net/article/details/133388122
[vue_mapbox_ 9]: https://dajianshi.blog.csdn.net/article/details/131023150
[vue_mapbox_ 10]: https://dajianshi.blog.csdn.net/article/details/131023620
[vue_mapbox_bearing_pitch_]: https://dajianshi.blog.csdn.net/article/details/133860367
[vue_mapbox_ mapbox GL_]: https://dajianshi.blog.csdn.net/article/details/130111375
[vue_mapbox_style_]: https://dajianshi.blog.csdn.net/article/details/130125708
[vue_mapbox_google_]: https://dajianshi.blog.csdn.net/article/details/130279914
[vue_mapbox_ 11]: https://dajianshi.blog.csdn.net/article/details/130282448
[vue_mapbox_ 12]: https://dajianshi.blog.csdn.net/article/details/133773736
[vue_mapbox_wmts_]: https://dajianshi.blog.csdn.net/article/details/133775987
[vue_mapbox_arcgis_]: https://dajianshi.blog.csdn.net/article/details/130286414
[vue_mapbox_ 13]: https://dajianshi.blog.csdn.net/article/details/130283228
[vue_mapbox_geojson_line]: https://dajianshi.blog.csdn.net/article/details/130268987
[vue_mapbox_geojson_Polygon]: https://dajianshi.blog.csdn.net/article/details/130270553
[vue_mapbox_geojson]: https://dajianshi.blog.csdn.net/article/details/130287305
[vue_mapbox_circle_data-driven]: https://dajianshi.blog.csdn.net/article/details/130321686
[vue_mapbox]: https://dajianshi.blog.csdn.net/article/details/130320383
[vue_mapbox_raster-dem]: https://dajianshi.blog.csdn.net/article/details/130317720
[vue_mapbox_image]: https://dajianshi.blog.csdn.net/article/details/130873074
[vue_mapbox_mp4]: https://dajianshi.blog.csdn.net/article/details/130316608
[vue_mapbox_marker]: https://dajianshi.blog.csdn.net/article/details/130147892
[vue_mapbox_Popup_]: https://dajianshi.blog.csdn.net/article/details/130147780
[vue_mapbox_ 14]: https://dajianshi.blog.csdn.net/article/details/130870652
[vue_mapbox_ 15]: https://dajianshi.blog.csdn.net/article/details/130872759
[vue_mapbox_draw_]: https://dajianshi.blog.csdn.net/article/details/130151855
[vue_mapbox_ 16]: https://dajianshi.blog.csdn.net/article/details/130263063
[vue_mapbox_ 17]: https://dajianshi.blog.csdn.net/article/details/130322722
[vue_mapbox_scale]: https://dajianshi.blog.csdn.net/article/details/130132817
[vue_mapbox_logo_]: https://dajianshi.blog.csdn.net/article/details/130145545
[vue_mapbox_ 18]: https://dajianshi.blog.csdn.net/article/details/130128458
[vue_mapbox_zoom_]: https://dajianshi.blog.csdn.net/article/details/130129651
[vue_mapbox_click_]: https://dajianshi.blog.csdn.net/article/details/130132888
[vue_mapbox_mousemove_]: https://dajianshi.blog.csdn.net/article/details/130132949