使用mbview发布mbtiles数据服务并用mapbox API 进行加载

最新推荐文章于 2024-05-17 17:02:30 发布

STANDBYF

最新推荐文章于 2024-05-17 17:02:30 发布

阅读量873

点赞数 6

分类专栏： WebGis 文章标签： webgl

本文链接：https://blog.csdn.net/STANDBYF/article/details/135067698

版权

WebGis 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

mbview主要功能：将mbtiles数据发布成瓦片服务，安装mbview前需要提前安装好nodejs等相关依赖。
mbview程序地址：https://github.com/mapbox/mbview
mbview安装：
npm install -g @mapbox/mbview 全局安装mbview
安装完成之后输入mbview查看是否安装成功：

通过mbview将mbtiles发布为服务
进入文件存放目录，使用命令行输入：
1.设置访问token，用你的 mapbox 公共访问令牌替换值
export MAPBOX_ACCESS_TOKEN= pk.0000.1111
2.使用mbview发布mbtiles服务，这里用测试数据baja-highways.mbtiles演示
在这里插入图片描述
mbview --port 9000 --host 192.168.1.172 baja-highways.mbtiles
注：
–port 9000 设置端口号，默认3000
–host 192.168.1.172 设置访问ip，默认localhost
发布成功后，可以在浏览器中访问http://192.168.1.172:9000查看发布的地图服务,如下图所示：
在这里插入图片描述
使用mapbox API 加载发布的服务
1.创建地图：

var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/dark-v9',
      center: [-117.037354,32.537551],
      zoom: 12,
      hash: true,
      maxZoom: 30
    });

2.添加sources为发布的服务

 map.addSource('baja-highways.mbtiles', {
        type: 'vector',
        tiles: [
          'http://192.168.1.172:9000/baja-highways.mbtiles/{z}/{x}/{y}.pbf'
        ],
        maxzoom: 14
      });

3.添加要展示的图层并设置样式

map.addLayer({
        'id': 'bajahighways-polygons',
        'type': 'fill',
        'source': 'baja-highways.mbtiles',
        'source-layer': 'bajahighways',
        'filter': ["==", "$type", "Polygon"],
        'layout': {},
        'paint': {
          'fill-opacity': 0.1,
          'fill-color': '#FFFF66'
        }
      });