0

我有来自 PGRESTAPI 的自己的矢量瓷砖，网址如下“ http://192.168.1.4:3001/services/postgis/cleantech2/geom/vector-tiles/{z}/{x}/{y}.pbf ”

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

我做错了吗？谢谢

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的源层名称必须是正确的。

但没有显示所有的点，似乎被过滤了？

稀疏的圆圈

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：将最大缩放更改为22，显示所有数据。让我们喝！

4

0 回答 0