I managed to create a VectorTileLayer and add it to my map (code at the end of this question).
My question is: How I can change the styling of data in a vector tile layer without it having to reload all data in the viewport? My dataset is quite big (about 1MB at zoom level 13+) and I want to avoid too much traffic.
I searched GeoNET and found a few threads about styling and changing styling, for example:
The ArcGIS Javascript 4.9 API documentation on Vector Tiles says (emphasis mine):
Styles may contain multiple options for rendering the same type of feature. In a street layer, for example, major highways might have three symbology options. The symbology can be changed on the client without having to make a request for a new tile from the server.
However I am unable to find any working examples where styles are changed live and without additional requests. The ArcGIS Vector Style Editor has this issue as well.
What I tried:
- Overwriting my layer's "style" property, no visible change
- Overwriting my layer's "currentStyleInfo" property, no visible change
- Poke around in some other internal properties... no visible change
- Use layer.loadStyle(JSONObject) - applies the new styling, but reloads all data
- Provide a few styles in the initial styles "layers" property - only the last style provided is applied, how do I change between those?
Example code:
- creates a VectorTileLayer
- styling is circles that have a color ramp fill-color based on an attribute
var vtLayer = new VectorTileLayer({
minScale: 140000,
style: {
"version": 8,
"sprite": "https://example.com/VectorTileServer/resources/sprites/sprite",
"glyphs": "https://example.com/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf",
"sources": {
"esri": {
"type": "vector",
"url": "https://example.com/VectorTileServer"
}
},
"layers": [
{
"id": "my_attrib/min",
"type": "circle",
"source": "esri",
"source-layer": "my_attrib",
"filter": [
"==",
"_symbol",
2
],
"layout": {
"icon-image": "my_attrib/min",
"icon-allow-overlap": true
},
"paint": {
"circle-radius": 5,
"circle-stroke-width": 1,
"circle-stroke-color": "#FFFFFF",
"circle-color": {
"property": "my_attribute",
"default": "#000000",
"stops": [
[-10, "#FF0000"],
[-5, "#FFFF00"],
[0, "#00FF00"],
[5, "#00FFFF"],
[10, "#0000FF"]
]
}
}
}
]
}
});
