mapbox gl开箱即用的地图引擎库

2024-08-01 10:43:40

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

你总是需要地图，因为它过于直观。

Ned 是一个前端开发，就职于一家 To C 业务的公司，这天产品经理提出了一个需求：

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

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

瓦片地图服务商有：天地图、百度地图、高德地图等...

而地图引擎又有 openlayers，cesium 等...

如果要在地图上加载三维模型，可能他还得了解 three.js 等技术...

那么，有没有什么方案不仅开箱即用，而且拥有可观的 拓展性 呢？

当然有，比如： mapbox-gl。

二、什么是 mapbox-gl？

谈到这个问题之前，得先弄清楚什么是 mapbox

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

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

mapbox-gl npmjs: www.npmjs.com/package/map…

mapbox-gl github：github.com/mapbox/mapb…

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

同时，它也是 mapbox GL 生态的重要一环。

三、如何安装

yarn add mapbox-gl

四、基础使用：渲染地图

此处以 mapbox 本身的瓦片源为例

首先，在 mapbox 官网注册账号，获得 accessToken。（为避嫌，此处不细赘述）

如果你在 vue3 项目中，可以通过如下代码渲染： index.vue

<template>
  <div id="map"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import mapboxgl from 'mapbox-gl';

onMounted(() => {
  mapboxgl.accessToken = `你的accessToken`
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [0, 0],
    zoom: 0.6,
    projection: 'naturalEarth' // starting projection
  });
})
</script>

一个简单的世界地图就这样简单而清晰的世界地图便展现出来：

五、在地图上渲染区域

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

现在，我通过各种人工手段获取了一个湖泊的多边形图案，要将它在地图上绘制出来，应该怎么做呢？

很简单：增加以下代码：

  map.on('load', function () {
    rotateCamera(0);
    map.addLayer({
      'id': 'maine',
      'type': 'fill',
      'source': {
        'type': 'geojson',
        'data': lakeGeoJson // 湖面的geojson
      },
      'layout': {},
      'paint': {
        'fill-color': '#17b1ee',
        'fill-opacity': 0.8,
      }
  });

(当然，别忘了把地图圆心也选为 geojson 中的某个点)

效果如下：

途中蔚蓝色的多边形，便是通过 geojson 画出的湖泊。

六、倾斜视角

90 度垂直俯瞰的视角太过死板，但提供多角度的渲染，正是 mapbox-gl 的拿手好戏。

只需要一行代码：

const map = new mapboxgl.Map({
    // ... 其他配置不变
    pitch: 60, // 增加此行
  });

整个画面顿时有了质的提升！

七、旋转、跳跃、以及 Rap

沉寂的画面是单调的，以及没有逼格的——甲方也这么认为。

因此，甲方经常会提出 “让地图动起来” 的合理需求。

这在 mapbox-gl 中非常容易。

增加以下代码：

function rotateCamera(timestamp) {
  map.rotateTo((timestamp / 360) % 360, { duration: 0 });
  requestAnimationFrame(rotateCamera);
}

map.on('load', function () {
  rotateCamera(0);
})

画面轻松动了起来！

以上就是mapbox gl开箱即用的地图引擎库的详细内容，更多关于mapbox gl地图引擎库的资料请关注我们其它相关文章！

mapboxgl区划标签避让不遮盖实现的代码详解

Mapbox GL JS是一个JavaScript库,使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图.WebGL渲染意味着高性能,MapboxGL能够渲染大量的地图要素,拥有流畅的交互以及动画效果.可以显示立体地图并且支持移动端,是一款十分优秀的WEB GIS开发框架. 常见的 mapbox.js和mapbox-gl.js的异同点? 相同点: 1.都是由Mapbox公司推出的免费开源的JavaScript库 2.都可以作为前端渲染矢量瓦片交互地图的工具 3.它们的样式设置都支持Map
mapboxgl实现带箭头轨迹线的代码

最近在使用mapboxgl实现轨迹展示时,想实现类似高德地图导航轨迹效果,然而并未在网上找到类似示例.经一番研究与尝试,最终解决,效果如下. 添加箭头核心代码如下,只需在配置layout中添加symbol-placement和symbol-spacing属性即可: // 添加箭头图层 function addArrowlayer() { map.addLayer({ 'id': 'arrowLayer', 'type': 'symbol', 'source': { 'type': 'geojso
点击地图div上的按钮实现对地图数据的入库操作

在地图div上添加一个按钮,单击按钮后弹出一个弹出层,在弹出层的输入框内输入数据后点击提交按钮将数据提交至数据库. mytest_map.jsp的代码如下: 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html lang='
通过数据库和ajax方法写出地图的实例代码

ajax教程 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 客户端部分:html.js.css代码部分: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www
mapbox gl开箱即用的地图引擎库

目录一.地图.地图.还是地图二.什么是 mapbox-gl? 三.如何安装四.基础使用:渲染地图五.在地图上渲染区域六.倾斜视角七.旋转.跳跃.以及 Rap 一.地图.地图.还是地图你总是需要地图,因为它过于直观. Ned 是一个前端开发,就职于一家 To C 业务的公司,这天产品经理提出了一个需求: “来一张地图吧,把我们所有的客户放在上面,让我们一眼就能看出来是谁在用我们的APP!” 从未做过地图的 Ned 茫然点了点头,开始进行技术筛选,然后他才发现,小小一张地图,居然有这么
Python+Kepler.gl实现时间轮播地图过程解析

前言 1 简介 Kepler.gl作为一款强大的开源地理信息数据可视化工具,可以帮助我们轻松制作针对大规模矢量数据的可视化作品,从而辅助数据分析工作. Kepler.gl制作常规地图非常简单方便,稍微摸索一下仪表盘界面就可以get到用法,但有些特殊的地图则需要额外对数据进行处理或使用Kepler.gl中的一些隐藏功能,比如之前写过的Python+Kepler.gl轻松制作酷炫路径动画中介绍过的动态路径地图.本文将要介绍的「时间轮播地图」也是一种比较特殊的地图,下面我们就将结合实际例子进行介绍.
Python 里最强的地图绘制神器

今天给大家介绍一个非常 NB 的Python 库,专门用来绘制地图的,它叫 Folium . 1. Folium简介 Folium是一个基于leaflet.js的Python地图库,其中,Leaflet是一个非常轻的前端地图可视化库.即可以使用Python语言调用Leaflet的地图可视化能力.它不单单可以在地图上展示数据的分布图,还可以使用Vincent/Vega在地图上加以标记.Folium可以让你用Python强大生态系统来处理数据,然后用Leaflet地图来展示. Folium中有许多来
iOS百度地图简单使用详解

百度地图 iOS SDK是一套基于iOS 5.0及以上版本设备的应用程序接口,不仅提供展示地图的基本接口,还提供POI检索.路径规划.地图标注.离线地图.定位.周边雷达等丰富的LBS能力 . 今天主要介绍以下接口基础地图 POI检索定位首先配置环境 1.自动配置.framework形式开发包(使用CocoaPods)<推荐> 2.手动配置.framework形式开发包特别注意: (API里有很多注意点,大家可以具体去看.但是我说的后两点少其中一个都会失败,第一点是有需求的话,必须加上)
Android下如何使用百度地图sdk

可以使用该套 SDK开发适用于Android系统移动设备的地图应用,通过调用地图SDK接口,您可以轻松访问百度地图服务和数据,构建功能丰富.交互性强的LBS(地图类)应用程序. 百度地图Android SDK提供的所有服务是免费的,接口使用无次数限制.您需申请密钥(key)后,才可使用百度地图Android SDK.任何非营利性产品请直接使用.这弦外之音就是盈利的产品必须帮百度给钱. 一.百度地图api平台. 百度地图API网址:http://developer.baidu.com/map/sd
vue 地图可视化 maptalks 篇实例代码详解

Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发: - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/THREE 等 - 很认真的优化了绘制性能 - 很重视测试, 有接近 1.5K 个单元测试用例, 所以稳定性还不错, 已经应用在很多大大小小的系统上了上面是一段 maptalks 官方介绍,下面来创建工程.首先利用 vue-cli3 搭建一
微信小程序JS加载esmap地图的实例详解

一.在微信小程序里显示室内三维地图需要满足的两个条件调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小程序是企业主体,微信 web-view 组件不对个人类型的小程序开放. 2. 您需要有一个自己的域名,在嵌入网页的时候需要在微信后台验证域名(只有自己域名下的网页才能被正确地显示哦,不能随便找一个公开链接). 二.具体实现步骤 1.域名验证: 由于微信平台的规定,web-view 指向的地址,必须是
Python利用folium实现地图可视化

folium的简介用Python处理数据,然后用Folium将它在Leaflet地图上进行可视化.Folium能够将通过Python处理后的数据轻松地在交互式的Leaflet地图上进行可视化展示.它不单单可以在地图上展示数据的分布图,还可以使用Vincent/Vega在地图上加以标记. 这个开源库中有许多来自OpenStreetMap.MapQuest Open.MapQuestOpen Aerial.Mapbox和Stamen的内建地图元件,而且支持使用Mapbox或Cloudmade的AP
Python实现地图可视化folium完整过程

目录 Folium简介 1.安装folium模块 2.安装jupyter 3.查看世界地图 4.查看中国地图 5.武汉市地图 6.添加标记 7.查找武汉科技大学 8.未解决 9.参考文章 Folium简介 Folium是一个基于leaflet.js的Python地图库,其中,Leaflet是一个非常轻的前端地图可视化库.即可以使用Python语言调用Leaflet的地图可视化能力.它不单单可以在地图上展示数据的分布图,还可以使用Vincent/Vega在地图上加以标记.Folium可以让你用Py
Python实现地图可视化案例详解

目录前言一.pyecharts Map Geo Bmap 二.folium 结语前言 Python的地图可视化库很多,Matplotlib库虽然作图很强大,但只能做静态地图.而我今天要讲的是交互式地图库,分别为pyecharts.folium,掌握这两个库,基本可以解决你的地图可视化需求. 一.pyecharts 首先,必须说说强大的pyecharts库,简单易用又酷炫,几乎可以制作任何图表.pyecharts有v0.5和v1两个版本,两者不兼容,最新的v1版本开始支持链式调用,采用