MapBoxGL 入门

近期公司准备用mapboxgl弄在线制图系统..由于对矢量图层的大量渲染及加载等选型mapboxgl。

Mapbox GL JS是一个JavaScript库，使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL渲染意味着高性能，MapboxGL能够渲染大量的地图要素，拥有流畅的交互以及动画效果、可以显示立体地图并且支持移动端，是一款十分优秀的WEB GIS开发框架。

1.是什么？

Mapbox是一个可以免费创建并定制个性化地图的网站。

2.了解一些基本东西

常见的 mapbox.js和mapbox-gl.js的异同点？

相同点：

1.都是由Mapbox公司推出的免费开源的JavaScript库

2.都可以作为前端渲染矢量瓦片交互地图的工具

3.它们的样式设置都支持Mapbox Style

不同点：

1.mapbox.js是Leaflet的一个插件，使用方式是通过结合Leaflet使用

2.mapbox-gl.js是Leaflet的一个插件，使用方式是通过结合Leaflet使用

3.使用mapbox-gl.js的浏览器必须支持WebGL渲染，在旧的浏览器中是不支持mapbox-gl.js的，而mapbox.js则没有此限制

3.能表达整个Map的style文件

mapbox-gl.js目前是围绕style文件来进行的，其内容如下：

{"version": 8, "name": "Mapbox Streets","sprite": "mapbox://sprites/mapbox/streets-v8", "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", "sources": {...},"layers": [...]
}

4.Map的组成：

任何GIS引擎必然要处理两个部分，一个是数据来源，一个是这些数据在界面呈现的样子，在style里面的source和layer对应于这两个部分。

5.Source：

目前source支持vector，raster， geojson， image，video。geojson的支持比较巧妙，有了这个就可以处理各种矢量类型，包括集合。而vector主要解决的是矢量瓦片，raster解决的是目前常用的栅格化的瓦片。video的加入使得功能更加的现代化。 mapbox在style里面，为source定义了一个type属性，来说明这些类型。

官网API地址：https://docs.mapbox.com/mapbox-gl-js/api/

也可以在GitHub找到MapboxGL ： https://github.com/mapbox/mapbox-gl-js/releases

大致了解API及示例程序之后，为了尽快熟悉想实现哪些效果，建议在Mapbox Studio里面自己自行配置想要的效果，然后在项目分享下导出json文件查看其属性再进行本地代码运行加载。

Mapbox Studio 新建地址：https://studio.mapbox.com/

mapboxGL在线运行地址：例子代码：https://docs.mapbox.com/mapbox-gl-js/example/simple-map/

离线部署教程：https://blog.csdn.net/qq_29808089/article/details/109737002

MapBoxGL 入门相关推荐

mapboxGL入门详解
MapBox GL 入门详解 1.基础知识介绍 mapbox GL Js JavaScript地图库: 使用webGL渲染,支持大数据量: 支持矢量切片渲染地图: 与mapbox其他工具兼容.生态系统 ...
快速入门MapboxGL
作者:MR. Mapbox GL JS是一个JavaScript库,使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图.WebGL渲染意味着高性能,MapboxGL能够渲染大量的地图要素,拥有流畅的交 ...
开源方案搭建可离线的精美矢量切片地图服务-3.Mapbox个性化地图定制入门
系列文章目录开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址) 开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片开源方案搭建可离线的精美矢 ...
WebGIS开发入门
目录一 WebGIS: 二 GIS背景三如何入门webgis开发 1 gis数据处理 2 gis数据服务发布 3 gis数据服务调用 4 gis数据渲染四 WebGIS核心价值五 webgi ...
基于mapbox搭建可离线的矢量切片地图服务-3.Mapbox个性化地图定制入门
作者:ATtuing 出处:http://www.cnblogs.com/ATtuing 最近在做关于mapbox的项目,看到这篇文章感觉特别好,特此转载记录一下. 先不说废话直接上地址:(所有东西都 ...
用Construct 2制作入门小游戏~
今天在软导课上了解到了Construct 2这个神器,本零基础菜鸟决定尝试做一个简单的小游戏(实际上是入门的教程啊= = 首先呢,肯定是到官网下载软件啊,点击我下载~ 等安装完毕后我便按照新手教程开始 ...
Docker入门六部曲——Swarm
原文链接:http://www.dubby.cn/detail.html?id=8738 准备工作安装Docker(版本最低1.13). 安装好Docker Compose,上一篇文章介绍过的. 安 ...
Docker入门六部曲——Stack
原文链接:http://www.dubby.cn/detail.html?id=8739 准备知识安装Docker(版本最低1.13). 阅读完Docker入门六部曲--Swarm,并且完成其中介绍 ...
Docker入门六部曲——服务
原文链接:http://www.dubby.cn/detail.html?id=8735 准备已经安装好Docker 1.13或者以上的版本. 安装好Docker Compose.如果你是用的是Do ...

MapBoxGL 入门

MapBoxGL 入门相关推荐

最新文章

热门文章