Giter VIP home page Giter VIP logo

Comments (5)

ahocevar avatar ahocevar commented on September 26, 2024

Please see https://npmjs.com/package/ol-mapbox-style for the API documentation.

Instead of olms.stylefunction(vtLayer, stylelyrs, 'bl:B_PARC'), you'll probably want to do

import {applyStyle} from 'ol-mapbox-style';

applyStyle(vtLayer, stylelyrs, 'bl:B_PARC');

from ol-mapbox-style.

jordipiqueres avatar jordipiqueres commented on September 26, 2024

I have already read again the documentation and I tried what you suggested to me but still is not working.

Could you please give me an example of how I could style a Vector Tile Layer instead of a GeoJSON Layer format.

In the API documentation says:

import stylefunction from 'ol-mapbox-style/stylefunction';
// OpenLayers imports from https://npmjs.com/package/ol
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
 
var layer = new VectorLayer({
  source: new VectorSource({
    format: new GeoJSON(),
    url: 'data/states.geojson'
  })
});
 
fetch('data/states.json').then(function(response) {
  response.json().then(function(glStyle) {
    stylefunction(layer, glStyle, 'states');
  });
});

What I would like to get is:

const vtLayer = new ol.layer.VectorTileLayer({
 declutter: true,
 renderMode: 'image',
 renderBuffer: 2,
 source: new ol.source.VectorTileSource({
   format: new ol.format.MVT(),
   overlaps: false,
   url: 'http://10.0.2.93:8080/geoserver/gwc/service/tms/1.0.0/bl:B_PARC@EPSG:900913@pbf/{z}/{x}/{-y}.pbf?1537872297191'
 })
});

const stylelyrs = {
    'version': 8,
    'name': 'test',
    'sources': {
      'test': {
        'type': 'vector'
      }
    },
    'layers': [{
      'id': 'parc1',
      'type': 'fill',
      'source': 'parc1',
      'paint': {
        'fill-color': '#00ff00',
        'fill-opacity': 1
      }
    },
    {
      'id': 'parc2',
      'type': 'line',
      'source': 'parc2',
      'paint': {
        'line-color': '#ff0000',
        'line-width': 0.2
      }
    }
    ]
  };

  stylefunction(vtLayer, stylelyrs, 'parc2');
  map.addLayer(vtLayer);

If I change my Vector Tile Layer into a GeoJSON format, this is working (but it is not what I would like to get, VectorTile will give a better performance I think).

from ol-mapbox-style.

ahocevar avatar ahocevar commented on September 26, 2024

Please see the examples in the example/ folder.

from ol-mapbox-style.

jordipiqueres avatar jordipiqueres commented on September 26, 2024

I have done a fiddle with two layers example.

GeoJSON Layer is working but not the Vector Tile Layer.

Could you please have a look and try to guide me to know what I am doing wrong?

from ol-mapbox-style.

ahocevar avatar ahocevar commented on September 26, 2024

Your style document is quite incomplete. As a bare minimum, you need to set the source-layer property for the vectortile source, i.e. 'B_MANZ' in your case. See my updated fiddle: http://jsfiddle.net/8kyp19qz/5/.

from ol-mapbox-style.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.