mapbox-gl.js与PGRestAPI矢量图块(pbf)

时间:2016-05-06 01:10:41

标签: postgis mapbox-gl mapbox-gl-js vector-tiles

我有自己的PGRestAPI矢量图块,如下所示 " http://192.168.1.4:3001/services/postgis/cleantech2/geom/vector-tiles/ {Z} / {X} / {Y} .pbf"

我尝试使用mapbox-gl.js渲染地图,但没有任何显示。

我做错了? THX

var style = {
  "version": 8,
  "sources": {
    "countries": {
      "type": "vector",
      "tiles": ["http://192.168.1.4:3001/services/postgis/cleantech2/geom/vector-tiles/{z}/{x}/{y}.pbf"],
      "maxzoom": 6
    }
  },
  "glyphs": location.origin+location.pathname+"font/{fontstack}/{range}.pbf",
  "layers": [{
    "id": "background",
    "type": "background",
    "paint": {
      "background-color": "#ddeeff"
    }
  },{
    "id": "country-glow-outer",
    "type": "line",
    "source": "countries",
    "source-layer": "country",
    "layout": {
      "line-join":"round"
    }
  }]
};

var init_lat = 1.3552799//42.299228067198634;
var init_lng = 103.6945413;//-83.69717033229782;
  mapboxgl.accessToken = 'mapbox-token';
  var map = new mapboxgl.Map({
      container: 'map',
      style: style,
      center: [init_lng,init_lat],
      zoom: 15
  });

编辑1:

调试mapbox-gl-js代码后,现在可以看到几个圆圈了。我修改了样式,pbf中的源层名称必须正确。

但不显示所有点,似乎已过滤?

sparse circles

var style = {
        "version": 8,
        "sources": {
            "cleantech": {
                "type": "vector",
                // "url": "mapbox://map-id"
                // "url": "http://tileserver.com/layer.json",
                "tiles": ["http://192.168.1.4:3001/services/postgis/cleantech2/geom/vector-tiles/{z}/{x}/{y}.pbf"],
                "maxzoom": 6
            }
        },
        "glyphs": location.origin+location.pathname+"font/{fontstack}/{range}.pbf",
        "layers": [{
            "id": "cleantech2_geom_id",
            "type": "circle",
            'source': 'cleantech',
            'layout': {
                'visibility': 'visible'
            },
            'paint': {
                'circle-radius': 8,
                'circle-color': 'rgba(55,148,179,1)'
            },
            'source-layer': 'cleantech2_geom'
        }]
    };

编辑2:    将maxzoom更改为22,显示所有数据。我们喝吧!

0 个答案:

没有答案