一、什么是MapBox,相对国内地图厂商的优势

MapBox是一家美国的地图厂商,2010 年成立于美国华盛顿,2017 年获得软银 1.64 亿美元 C 轮融资,完全开源的开发工具,帮助您在现有产品中实现灵活、轻量、稳定的地图、搜索、导航等位置功能的无缝添加。
因为完全开源所以你可以使用它做自己的地图,而不是像国内厂商一样只能使用厂商配置好的地图。比方说一些产业园区在百度或高德地图中没有显示内部道路,如果这时候有这个显示需求就得借助瓦片或者使用mapbox自己绘制地图了。

二、自定义地图需要做些什么

这里所说的自定义地图不是说自定义地图样式即颜色搭配而是自己绘制道路建筑物等内容

1.准备经纬度数据集合

这里我自己准备了一些经纬度点集合,然后对这些数据进行加工处理,需要符合mapbox对经纬度点集合的要求格式,即xx.geojson的格式
如:

{"type": "Feature","geometry": {"type": "Point","coordinates": [125.6, 10.1]},"properties": {"name": "Dinagat Islands"}
}

其中type字段可以不用理会,geometry定义了点集合的特征类型,properties字段定义了这部分点集合的名称,可以理解为道路的名称什么的,geometry字段中的type定义了coordinates点集合表示什么,type的可选字段有Point、LineString、Polygon、MultiPoint、MultiLineString和MultiPolygon(分别是点,线,多边形等)关于geojson的更多格式说明可以参阅https://www.oschina.net/translate/geojson-spec

2.导入已经处理的经纬度xxx.geojson格式数据

进入MapBox的Studio页面点击右上角的Datasets选项然后点击New dataset导入处理好的数据,建立数据底图。


这简单创建的地图底图。

3.创建地图样式并添加底图

在Mapbox的Studio首页点击New style创建地图样式,然后进入工作页面在左侧的控制面板中选中Layer点击“+”添加图层数据选择你之前创建的底图数据即可
然后底图就覆盖在地图上

这样就可以看到之前创建的线条在地图上,这些线条就是道路,这里还没有设置线条的宽度和样式。
在导入数据时可以选择type,第一次选择type为Line即为道路,第二次导入数据选择type为Symbol即为字符就是道路的名称,然后设置Line的样式和Symbol的样式,就完成了道路的简单绘制

这就是完成的效果,在缩放的时候和正常的地图一样,道路名称也会发生缩放,也可以自己设置缩放等级什么的。
好,现在就完成了简单的自定义地图绘制。

使用MapBox自定义地图相关推荐

  1. mapbox自定义地图

    基于mapbox根据自己的气象数据定制地图 更多地图效果访问 www.mapbox.cn/mapbox-gl-js/examples/ 效果图-风场图 具体项目代码: https://gitee.co ...

  2. power bi自定义地图_如何使用自定义形状图在Power BI中创建地理图

    power bi自定义地图 介绍 (Introduction) This is the third article of a series dedicated to discovering geogr ...

  3. mapbox中文地图_使用 Mapbox 地图

    如果您可以访问 Mapbox 地图,则可以将其添加至您的工作簿,或者使用它们在 Tableau Desktop 中创建地图视图.有关特定于国家/地区的可用数据的列表,请参见支持的地图数据. 将使用 M ...

  4. 基于Mapbox实现地图的样式配置

    一.打开Mapbox官网,登录账号,进入初始页面. 二.点击设计自定义地图样式,在工作室中创建地图,点击新建样式,选择空白模板. 三.在图层layers中添加新图层,可点击自带的Mapbox v8,选 ...

  5. FineReport中如何用JavaScript自定义地图标签

    2019独角兽企业重金招聘Python工程师标准>>> 在日常使用地图过程中,通常会遇到地图标签,提示点等显示不满足我们的需求,需要进行JavaScript代码编写. 例如:在使用地 ...

  6. android高德地图显示多点标记,高德地图多点标记自定义地图

    直接代码吧: 自定义地图 html,body,#container{height:100%;100%;font-size:14px;font-family:"Chinese Quote&qu ...

  7. 10、Power Map—自定义地图背景

    此功能仅运用于Excel2016版本,之前的低版本无此功能. 本例讲解一个利用自定义的地图背景像素坐标进行定位的例子(本例纯属虚构,没有实际意义). 首先我们需要准备一个地图素材,可以从百度地图上进行 ...

  8. ROS自定义地图(CAD、手绘等)

    0x00 概述 在前面的文章中,我们介绍如何自动导航时,都是基于使用gmapping或者hector_mapping创建的地图.当然使用其他的建图方法创建的地图也可以,但是目前为止,无论使用哪种建图方 ...

  9. 开源方案搭建可离线的精美矢量切片地图服务-3.Mapbox个性化地图定制入门

    系列文章目录 开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址) 开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片 开源方案搭建可离线的精美矢 ...

最新文章

  1. Outlook 2003命令行参数开关详解
  2. 提升效率的Vue组件开发和实战技巧
  3. C++知识点(六)数组、指针与字符串导学
  4. ftp改为sftp_浅谈 FTP、FTPS 与 SFTP
  5. 互联网产品一网易网站设计(思想)
  6. stm32端口复用和重映射
  7. 蓝桥杯 ADV-166算法提高 聪明的美食家
  8. 大部分Java程序员都会忽略的几个问题,你中招没?
  9. SQL笔记三:MySQL常用函数
  10. ClockworkMod Tether Alpha:避开运营商,将手机变为热点
  11. Java 程序员必须掌握的 4 大开源框架!
  12. Delphi 导出Excel功能
  13. 渗透测试流程(一)(千峰学习笔记)
  14. 起底硅谷最神秘、估值最高的大数据公司:Palantir
  15. VMware SDS之11: VMware SPBM之DELL SC(也即Compellent)篇
  16. 【wmi】C++获取windows激活状态
  17. 答读者问:Kafka顺序消费吞吐量下降该如何优化?
  18. jmeter分布式压测,远程机器来运行脚本,察看结果树中的响应数据项为空白问题
  19. 浙江农林大学第二十届程序设计竞赛暨团体程序设计天梯赛选拔赛(同步赛) K.来自良心出题人wzc的简单题
  20. 现在分词和不定式都是可以做状语的,但二者有区别

热门文章

  1. 给你5分钟白漂:这些都是我的常用在线工具网站
  2. Symbol mc1000开发体验
  3. 傅里叶变换的科学应用
  4. 【逗老师的无线电】MMDVM添加4G网卡之后变身4G路由器
  5. Centos7单机安装torque6.1.2
  6. [译] 保护我们的 Git Repos,立刻停止“狐步舞”
  7. 安卓学习日志 Day11 — JSON 解析
  8. php fpm高并发,php服务器高并发优化思路
  9. React造轮子(reacthook实现一套自己的组件库)轮子公开课——第五课【Radio、RadioButton、RadioGroup】组件
  10. word 章节、图片(带章节)、公式自动编号