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文件来进行的,其内容如下:

  1.  
    {
  2.  
        "version": 8,
  3.  
        "name": "Mapbox Streets",
  4.  
        "sprite": "mapbox://sprites/mapbox/streets-v8",
  5.  
        "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  6.  
        "sources": {...},
  7.  
        "layers": [...]
  8.  
    }

从以上可以看出,除了一些基本的属性定义之外,就是sources和layers。

基本属性的可以参见官网https://www.mapbox.com/mapbox-gl-js/api

mapbox通过这样一个style的配置文件来描述整个地图,这是目前其他map都没有使用的方式。在讨论如何设计实现这个目的之前, 我们想一下这样做有什么好处?最大的好处莫过于为自定义地图提供了方便之门。使用者压根可以不写任何代码,用mapbox就能做出一个自己想要的地图。这一点很符合mapbox目前提供的服务。style如此之重要,以至于官网专门对style进行详细了说明, 涉及到各个参数及作用。

3.Map的组成:

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

4.Source:

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

除了这个属性之外,source其实都有一个id,被layer引用,从而让数据源和数据呈现关联在一起。 这个地方需要注意的是,source和layer之间的关系,可以是1->n

5.Layer:

            虽然也是分为几类的,但并不是直接根据source来分类的。目前分为:background,fill, line, symbol, raster, circle。除了background类型的layer不需要绑定source之外。其他的都需要有source。fill类型的layer只负责填充;line类型的layer只负责线条;symbol类型的layer会处理sprite,文字等;raster类型的layer就只负责图片, circle类型的layer是更高一层的业务处理需要。
           不管是什么界面,都是由点线面组成的。 layer其实代表的就是界面,只是大家通常会认为一个layer上会放置各种点,线,面。 mapbox把这种layer再细分层了更小的单元, 只包含点的layer,只负责呈现线的layer,只负责面的layer。如果把多个layer组合在一起,就和现在的通用想法的layer是一样的,source和layer的1->n关系在这个地方发挥作用了。

这样设计不仅简单化,关键还可以提高效率,能批量化的渲染。

Filter:

           mapbox也充分考虑了个别特殊元素的定制化显示需求,如果要对一批元素中的某些个别元素进行定制化呈现,可以在layer里面设置filter,满足条件的元素才会被呈现出来,并用layer设定的样式渲染。filter是一个很强大的功能,有效融合在设计中,可以解决很多问题。
6.

     style文件才是核心,API只是围绕着这个核心服务的
     想看API, 可以参见 https://www.mapbox.com/mapbox-gl-js/api 。

Mapbox浅析(快速入门Mapbox)的更多相关文章

  1. 【笔记目录2】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总

    当前标签: ASP.NET Core快速入门 共2页: 上一页 1 2  任务27:Middleware管道介绍 GASA 2019-02-12 20:07 阅读:15 评论:0 任务26:dotne ...

  2. Web Api 入门实战 (快速入门+工具使用+不依赖IIS)

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

  3. SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)

     SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...

  4. 前端开发小白必学技能—非关系数据库又像关系数据库的MongoDB快速入门命令(2)

    今天给大家道个歉,没有及时更新MongoDB快速入门的下篇,最近有点小忙,在此向博友们致歉.下面我将简单地说一下mongdb的一些基本命令以及我们日常开发过程中的一些问题.mongodb可以为我们提供 ...

  5. 【第三篇】ASP.NET MVC快速入门之安全策略(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  6. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  7. Mybatis框架 的快速入门

    MyBatis 简介 什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除 了几乎所有的 JDBC 代码和参数的手工设置以及结果 ...

  8. grunt快速入门

    快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本 ...

  9. 【第一篇】ASP.NET MVC快速入门之数据库操作(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

随机推荐

  1. 分布式、服务化的ERP系统架构设计

    ERP之痛 曾几何时,我混迹于电商.珠宝行业4年多,为这两个行业开发过两套大型业务系统(ERP).作为一个ERP系统,系统主要功能模块无非是订单管理.商品管理.生产采购.仓库管理.物流管理.财务管理等 ...

  2. RabbitMQ进程结构分析与性能调优

    RabbitMQ是一个流行的开源消息队列系统,是AMQP(高级消息队列协议)标准的实现,由以高性能.健壮.可伸缩性出名的Erlang语言开发,并继承了这些优点.业界有较多项目使用RabbitMQ,包括 ...

  3. Java面试题中常考的容易混淆的知识点区别

    以下是我收集的Java编程里各种区别,供Java学习爱好者参考,这些区别都是每次Java面试中常考的,大家好好掌握,如有失误请留言指出.想要获取Java详细全套学习资料请到上海尚学堂官网获取. 1.H ...

  4. Shiro在SSM框架中的应用

    上一篇Shiro基础的连接 如果想使用Relam的操作,那么必须要保证有一个具体的认证类实现了Relam接口 web.xml增加shiro的配置 <!-- 进行shiro的过滤器的配置 --&g ...

  5. [Swift]LeetCode173. 二叉搜索树迭代器 | Binary Search Tree Iterator

    Implement an iterator over a binary search tree (BST). Your iterator will be initialized with the ro ...

  6. [Swift]LeetCode757. 设置交集大小至少为2 | Set Intersection Size At Least Two

    An integer interval [a, b] (for integers a < b) is a set of all consecutive integers from ato b, ...

  7. [Swift]LeetCode895. 最大频率栈 | Maximum Frequency Stack

    Implement FreqStack, a class which simulates the operation of a stack-like data structure. FreqStack ...

  8. Docker for windows : 安装Redis

    一.拉取Redis镜像 docker pull hub.c..com/library/redis: 二.创建并运行Redis docker run -d -it --name redis d4f259 ...

  9. Mysql数据库和表的增删改查以及数据备份&恢复

    数据库 查看所有数据库 show databases; 使用数据库 use 数据库名; 查看当前使用的数据库 select database(); 创建数据库 create database 数据库名 ...

  10. Java9发布回顾Java 8的十大新特性

    java9已经在北京时间9月22日正式发布,开发者可以在oracle jdk官网上下载到最新的jdk9. 今天,我们先来一起复习一下2014年发布的Java 8的十大新特性.先来喝杯java~~~ 按 ...