mapbox的基本原理和核心差异

mapbox的基本原理和核心差异,第1张

首先来科普一下什么是webgl

webgl 全拼 Web Graphics Library 是一种3D绘图协议,可以为HTML5 Canvas 提供硬件3D加速渲染,web开发人员可以借助系统显卡在浏览器里更流畅地展示3D场景和模型,还能创建复杂的导航和数据视觉化

核心差异

1.渲染差异

Mapbox GL JS (mapbox graphics library javascript

的 核心特点 是 客户端渲染

在Mapbox GL JS中创建web应用时,通过Javascript和WebGL把地图作为 vector tiles(矢量瓦片)进行渲染

相比将服务器的一系列切片图片组合起来再显示,Mapbox GL JS 渲染可以快速改变样式,使得地图的呈现更加多样化

2. 图层(layers)

传统的 JavaScript 地图库有两种完全不同的 " 图层 ":

基础图层(baselayers) :构成地图基础的 图像切片 。通常包含大量数据——街道地图包括标注、建筑、图标等细节,在浏览器上渲染的话效果不会太好。可参考 Mapbox.js 中的 L.mapbox.tileLayer 和 Leaflet 中的 L.TileLayer。

叠加图层(overlays):通常包括 GeoJSON 之类的矢量数据,参考 Mapbox.js 中的L.mapbox.featureLayer 和 Leaflet 中的 L.geoJson。和基础图层相比,叠加图层包含的信息更少,但交互性更强:可在 JavaScript 中进行修改,并且点击的时候会触发d窗。

Mapbox GL JS 中的图层是对矢量数据或者  raster data 的风格化呈现。每个图层都将规定特定数据在浏览器中该如何绘制,渲染器(renderer)会通过这些图层把地图渲染到屏幕上。

如下图所示,随着缩放级别的改变,地图细节也会变化。地形、建筑、公共交通站台和位置信息都作为其相应的图层来渲染。

由于通过Mapbox GL JS,浏览器中的所有地图内容均以矢量数据的形式加载,Mapbox GL JS 对基础图层和叠加图层不作区分。因此标签、图标等地图要素节都可以通过 JavaScript 进行修改,与以前的地图库中的叠加图层类似。当然,这也意味着更改图层样式的函数和方法会更细化一点

  MapBox是移动和Web应用程序的地理信息数据平台。提供了丰富精美的在线地图及地图风格设计器;提供了位置搜索服务、导航服务及其API;提供了各种端的SDK。SDK开源免费。

什么是

  MapBox GL是MapBox提供的JavaScript SDK,可用于各种前端地理信息数据可视化的开发。MapBox GL渲染性能拔群,特别是能渲染大量的数据,这使它能够在众多同类开发框架中脱颖而出;可在支持WebGL的移动端浏览器上运行;地图浏览平滑流畅,可视化效果丰富;使用方便,良好的可扩展性、拥有众多的插件使之可以满足开发者的各种需求。

MapBox GL

MapBox GL的GL指的是WebGL,这是它最大的特点。WebGL是一种3D绘图协议,允许把JavaScript和OpenGL ES 2.0结合在一起,为HTML5的Canvas元素提供硬件3D加速渲染。大多数PC和移动端浏览器支持WebGL。

 MapBox GL使用WebGL渲染地图和图层,所以可以知道这对前端GIS开发者来说意味着什么:超越以往浏览器局限的硬件级渲染图形能力。

 令无数前端GIS开发者头疼的大数据量GIS数据渲染、交互问题,若使用MapBox GL,只要不超过当前硬件的渲染能力就都能实现。同时,MapBox GL也顺理成章地支持一些3D效果:可以倾斜、旋转地图;可在地图上添加3D要素、呈现立体地图等。

MapBox GL还拥有良好的可扩展性和众多的插件。

 比如,百度ECharts提供了MapBox GL插件,并且在ECharts官网上有众多相关示例(如上图),开发者可以直接使用ECharts提供的各种显示效果,做出各种美观的地图和流畅的动画效果。

 除此之外,还支持与非常流行的React、Angular等框架的集成;可与用于空间分析的JavaScript库Turf.js结合使用等。

MapBox GL支持的服务规范及数据格式有:zxy地图瓦片服务(OpenStreetMap规范)、MapBox (mvt)矢量瓦片地图服务、GeoJSON等。MapBox提供的在线地图服务均为矢量瓦片地图服务。与传统地图瓦片服务相比,矢量瓦片是在客户端行渲染呈现的,地图风格的设置更加方便。

SuperMap iClient 9D for MapboxGL

SuperMap iClient 9D for MapboxGL整合了MapBox GL、ECharts和MapV,并且对接了SuperMap iServer / iExpress / iPortal / iManager / Online的地图、服务和资源,为用户提供了完整专业的GIS能力的同时也提供了优秀的可视化功能。

使用iClient for MapboxGL可以加载各种超图云GIS提供的瓦片地图和矢量地图,下图为对接iServer发布的矢量瓦片地图服务:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8326392.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存