mapbox-gl,mapbox gl js

　　本文主要介绍一个mapboxgl开箱即用的地图引擎库，有需要的朋友可以参考一下。希望能有所帮助。祝大家进步很大，早日升职加薪。

一、地图、地图、还是地图

　　你总是需要一张地图，因为它太直观了。

　　Ned是一名前端开发人员，在一家有To C业务的公司工作。这一天，产品经理提出了一个需求：

　　“来一张地图，把我们所有的客户都放在上面，这样我们就能一眼看出谁在用我们的APP！”

　　从未做过地图的奈德茫然地点点头，开始进行技术筛选。然后他才发现，一张小小的地图竟然有这么多的门道！

　　瓦片服务商包括：天空地图、百度地图、高德地图等。

　　地图引擎包括openlayers、铯等。

　　如果要在地图上加载三维模型，可能他得懂一些three.js之类的技术.

　　那么，有没有既开箱即用，又有可观的拓展性的方案呢？

　　当然也有，比如：mapbox-gl。

二、什么是 mapbox-gl？

　　在说这个问题之前，我们首先要搞清楚什么是mapbox。

　　首先，这是一家企业，提供地图服务和解决方案。你几乎可以把它当成“百度地图”来提供。

　　同时提供了基于WebGL的开源地图引擎：mapbox-gl。

　　地图框-GL NPM js:www.npmjs.com/package/map…

　　地图盒子-GL github:github.com/mapbox/mapb…

　　使用mapbox-gl，可以像openlayers一样加载各种来源的地图，包括mapbox本身提供的瓦片来源，百度地图等瓦片来源。

　　同时也是mapbox GL生态的重要组成部分。

三、如何安装

　　纱线添加地图框-gl

四、基础使用：渲染地图

　　以mapbox本身的瓦片源为例。

　　首先在mapbox官网注册账号，获取一个accessToken。(为避嫌，此处不赘述)

　　如果您在vue3项目中，您可以使用以下代码来呈现它：index.vue

　　模板

　　div id=map/div

　　/模板

　　脚本设置

　　从“vue”导入{ onMounted，reactive，ref }；

　　从“mapbox-gl”导入mapboxgl

　　onMounted(()={

　　Mapboxgl.accessToken=`您的accessToken。

　　const map=新mapboxgl。地图({

　　容器：“地图”，

　　 style: map box://styles/map box/streets-v11 ，

　　中心：[0，0]，

　　缩放：0.6，

　　投影：“自然地球”//开始投影

　　});

　　})

　　/脚本

　　一张简单的世界地图是这样显示的：一张简单明了的世界地图：

五、在地图上渲染区域

　　众所周知，地图上用来描述区域的格式叫做geojson，其本质是通过多个点的集合来描述一个多边形。

　　现在，我通过各种人工手段获得了一个湖泊的多边形图案。要怎么做才能在地图上画出来？

　　很简单：添加以下代码：

　　map.on(load ，function () {

　　rotate camera(0)；

　　map.addLayer({

　　id :缅因州，

　　类型:填充，

　　来源:{

　　键入: geojson ，

　　数据:湖GeoJson //湖的GeoJson

　　布局“:{}，

　　油漆:{

　　填充颜色: #17b1ee ，

　　填充-不透明度:0.8，

　　}

　　});

　　(当然，别忘了在geojson中选择地图的中心作为点)

　　效果如下：

　　途中的蓝色多边形是geojson画的湖。

六、倾斜视角

　　90度垂直视角太死板，但提供多角度渲染是mapbox-gl的专长。

　　只需要一行代码：

　　const map=新mapboxgl。地图({

　　//.其他配置保持不变。

　　Pitch: 60，//加这行

　　});

　　整个画面突然有了质的提升！

七、旋转、跳跃、以及 Rap

　　无声画面单调，无强迫感的甲方也这么认为。

　　所以甲方经常提出“让地图动起来”的合理需求。

　　这在mapbox-gl中非常容易。

　　添加以下代码：

　　函数rotateCamera(时间戳){

　　map.rotateTo((时间戳/360) % 360，{ duration:0 })；

　　requestAnimationFrame(rotate camera)；

　　}