发布自己的mapbox矢量地图

地图 专栏收录该内容
9 篇文章 0 订阅

一、前言

mapbox 作为一款开源的地图开发平台,优势兼具百度、高德等互联网地图平台和Arcgis、Supermap 等企业级地图平台的特点,是很多企业作为地图项目开发的基础平台,这里根据实际的工作经验,来谈一谈如何发布自己的mapbox矢量地图。并通过mapbox.js调用进行下一步的开发。

二、整体流程

发布mapbox 需要很多第三方的软件平台依赖,下图是我整理的具体发布流程图,根据各个流程的主环节,分别对其中用到的软件进行介绍:
这里写图片描述

三、原始数据

原始数据的入口是Geojson格式的文件,关于这种格式文件的详细介绍,推荐这篇博客:
https://blog.csdn.net/yaoxiaochuang/article/details/53117379
大家可以用商业的Arcgis、Supermap 等软件对地理数据进行geojson格式文件的导出。

四、软件介绍

1.tippecanoe
github地址:https://github.com/mapbox/tippecanoe,负责将geojson数据转换成mbtiles文件。
安装说明:

git clone git@github.com:mapbox/tippecanoe.git
cd tippecanoe
make -j
make install

使用说明:
使用命令
tippecanoe -z 15 -Z 0 -ps -Bg -o out.mbtiles input.geojson
参数说明

参数作用
-z生成数据最大层级
-Z生成数据最小层级
-ps不要简化线条和多边形
-Bg自动抽稀,避免单个瓦片要素过多
-o输出文件路径

示例
tippecanoe -z 17 -Z 6 -o river.mbtiles river.geojson
2.tileserver-gl-light
负责mbtiles数据发布。tileserver-gl依赖较多的本地库文件,不容易编译安装,tileserver-gl-light是tileserver-gl的缩减版,去除了本地库依赖,可以通过npm直接安装。
安装说明:
安装命令: npm install -g tileserver-gl-light
Docker安装: docker run --rm -it -v $(pwd):/data -p 8080:80 klokantech/tileserver-gl
使用说明:

使用命令:tileserver-gl-light [mbtiles]文件 [option]
参数说明:

参数作用
-p指定端口号,默认8080
-c指定配置文件,配置文件是json格式文件

示例

tileserver-gl-light river.mbtiles -p 3000
tileserver-gl-light -c config.json -p 3000

启动完成后可到l浏览器打开ip:发布端口进行预览
这里写图片描述
这里写图片描述
3.maputnik
负责接入发布的mbtiles数据,并进行可视化风格配置。配置完成后,可以导出样式文件,由于这个软件的安装使用相对复杂,单独有一篇博客介绍。

五、使用地图

这里使用mapbox GL JS来调用我们发布自己风格和数据的地图

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'undefined';
var map = new mapboxgl.Map({
    container: 'map',
    style: '自己发布风格地图地址'
});
</script>

这里写图片描述

  • 7
    点赞
  • 8
    评论
  • 16
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值