如何使用mapbox在openlayers的矢量图块上正确使用样式?

时间:2019-12-05 18:26:37

标签: javascript mapbox openlayers

我尝试从ol-mapbox-style导入具有样式功能的样式。但这是行不通的。 -没有样式部分,地图就像矢量线一样完美呈现 -包括样式部分,浏览器不会显示地图 请参见下面的代码:

var stylefunction       = olms.stylefunction;
var {applyStyle}        = olms;
var {apply}             = olms;

var key = 'my-key';   

const map = new Map({
    target: 'map',
    view: new View({
      center: fromLonLat([5.058510183635008, 52.30659202560312]),
      zoom: 14
    })
  });

  const layer = new VectorTileLayer({
    source: new VectorTileSource({
        attributions: '',
        format: new GeoJSON(),
        maxZoom: 19,
        url: 'https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.json?api_key=' + key,
        tileLoadFunction: function(tile, url) {
          tile.setLoader(function(extent, resolution, projection) {
            fetch(url).then(function(response) {
              response.text().then(function(data) {
                const jsons = JSON.parse(data);
                const format = tile.getFormat();
                const layers = ['water', 'roads', 'buildings'];
                const features = [];
                layers.forEach(function(layer) {
                  const layerFeatures = format.readFeatures(jsons[layer], {
                    featureProjection: projection
                  });
                  layerFeatures.forEach(function(feature) {
                    feature.set('layer', layer);
                    features.push(feature);
                  });
                });
                tile.setFeatures(features);
              });
            });
          });
        }
      })
  });
  map.addLayer(layer);

fetch('./static/bright.json')
  .then(r => r.json())
  .then((glStyle) => {
    stylefunction(layer, glStyle, 'bright');
    if (map.getLayers().getArray().indexOf(layer) === -1) {
      map.addLayer(layer);
    }
  });

并在此处查看我试图用作测试文件的bright.json的第一行。

    {
  "glyphs": "https://maps.tilehosting.com/fonts/{fontstack}/{range}.pbf?key=",
  "name": "bright",
  "layers": [
    {
      "id": "background",
      "paint": {
        "background-color": "#f8f4f0"
      },
      "type": "background"
    },
    {
      "filter": [
        "==",
        "subclass",
        "glacier"
      ],
      "id": "landcover-glacier",
      "layout": {
        "visibility": "visible"
      },
      "metadata": {
        "mapbox:group": "1444849388993.3071"
      },
      "paint": {
        "fill-color": "#fff",
        "fill-opacity": {
          "base": 1,
          "stops": [
            [
              0,
              0.9
            ],
            [
              10,
              0.3
            ]
          ]
        }
      },
      "source": "openmaptiles",

0 个答案:

没有答案