Vector Tiles
pjcozzi opened this issue · 58 comments
2D maps like Google, Apple, MapBox GL, and OL3 are moving to actual vectors for rendering vector data, instead of baking vector data into a raster tile. This allows, for example, to make labels always face up even if south is up and to fade out labels so they never hit each other.
For now, this roadmap is a collection of resources on this topic.
- Google Maps + WebGL = MapsGL
- Vector tiles for fast custom maps (video)
- Videos from FOSS4G
- Mapbox Vector Tile Specification
- blog post
- tools: vector-tile-js and mapnik-vector-tile
- Client-side: pbf.js to decode tiles (protocol buffers).
- geojson-vt
- MMT-Vector-Tiles
Vector tiles for fast custom maps (video) , http://vimeo.com/10622814 Wrong video ? :)
Fixed. Thanks.
More discussion: https://groups.google.com/forum/#!topic/cesium-dev/QnOxsA0iwa0
Looks like ESRI is adopting Mapbox vector tiles: https://www.mapbox.com/blog/vector-tile-adoption/
Info from FOSS4G NA 2015.
From Mapzen: Look Upon Our Squares of Math in Three Dimensions
- State of the Map 2015 - Vector Rendering Panel - video, transcript
Demo of vector tiles at Esri UC is last video on page
From: Patrick Cozzi [mailto:notifications@github.com]
Sent: Monday, July 20, 2015 5:45 PM
To: AnalyticalGraphicsInc/cesium
Subject: Re: [cesium] Vector Tiles (#2132)
—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2132#issuecomment-123053536.
Is this still being considered by Cesium? It would be an impressive feature to tout.
Hello, I want to know when will it come out, I'm very looking forward to it~
Current work-in-progress for 3D Tiles vector tiles is in the vector-tiles branch. The final date is still TBA.
@davidyaha that added support for the draft vector tile payload in 3D Tiles, but I would still leave this issue open for other potential vector tile specs.
OSM has global vector data, it would be cool to support that in Cesium and eventually serve it from ion:
Requested again here: #7939
Also perhaps relevant, some thoughts on how TerriaJS loads these vector tiles? #6182 (comment)
Is there any related work or PR that we could follow up?
How can I extend MapboxImageryProvider to load PBF files instead PNG ? I think I can do something to put it to work using this : https://landtechnologies.github.io/Mapbox-vector-tiles-basic-js-renderer/.
As I can see, this renderer can get a PBF from {x},{y},{z} and render it in any canvas (the Cesium canvas??).
https://landtechnologies.github.io/Mapbox-vector-tiles-basic-js-renderer/debug/basic/google
it is just an idea to start. I know almost nothing about how Providers work. I need to know how to test a new Provider without need to compile all Cesium code. Any way to add it as a plugin? Some code to show me how?
What do you say?
@icemagno you might find the GridImageryProvider useful as a reference here. It's the simplest imagery provider I know of (procedural creates a grid as the tiles): https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/GridImageryProvider.js
It should be straightforward to set up the CesiumJS source code so you can add your custom class, see the build guide here: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Documentation/Contributors/BuildGuide/README.md#build-guide
Ok. I'll give a try.
BTW: I know you guys have a long expertise to write thousands of lines before build and test but I like to check every step I do in the code.
So... I dont like the "write-build-test" method because I'll spend hours in a lot of builds. Is there some "write-F5-test" way to do this? I mean... can I write my code and immediately check it just refreshing the browser without the need to rebuild every time?
BTW: I know you guys have a long expertise to write thousands of lines before build and test
I don't think that's a good idea no matter how much expertise anyone has 😄
When running CesiumJS from the source as described in the linked guide above, you can make changes directly to the source and see the changes immediately by refreshing the page or re-running the Sandcastle example. This is how most CesiumJS development is done.
If you have any follow up questions on best practices here, let's take this conversation to the forum so as not to derail this GitHub issue.
How can I extend
MapboxImageryProviderto load PBF files instead PNG ? I think I can do something to put it to work using this : https://landtechnologies.github.io/Mapbox-vector-tiles-basic-js-renderer/.As I can see, this renderer can get a PBF from
{x},{y},{z}and render it in any canvas (the Cesium canvas??).https://landtechnologies.github.io/Mapbox-vector-tiles-basic-js-renderer/debug/basic/google
it is just an idea to start. I know almost nothing about how Providers work. I need to know how to test a new Provider without need to compile all Cesium code. Any way to add it as a plugin? Some code to show me how?
What do you say?
@icemagno What if we suse something like this library
https://github.com/Leaflet/Leaflet.VectorGrid
@icemagno yeah I know, I am also looking for a way to make vector tiles work on cesium, but that plugin actually is doing the same thing as you said.it reads pbf files draws them on a canvas and leaflet plots that canvas. in our case we need draw pbf using cesium's canvas.
Terriajs has a MapboxVectorTileImageryProvider which draws (polygons only at this point in time) to canvas - see https://github.com/TerriaJS/terriajs/blob/master/lib/Map/MapboxVectorTileImageryProvider.js
@steve9164 created this a few years ago, he can give you more info about it
@nf-s I think the provided sample helps me alot. I have not looked at it in details yet, Does it use any internal files fron terriajs library as well?
It uses 2 small utility functions from the terria library which are essential, but everything else is imported from Cesium, @mapbox/vector-tile, pbf and urijs (except the i18next internationalisation stuff which can be stripped out)
Either of you make any progress on this with working code? I was going to try to hack together an implementation soon as well.
@davenquinn this code works well with polygons
https://github.com/TerriaJS/terriajs/blob/master/lib/Map/MapboxVectorTileImageryProvider.js
Hi, I am currently working an an implementation of a StyledVector Map tile provider for Cesium. I am doing this work for a commercial project that I am working on and am willing to contribute the code to the community project. I am making steady progress and will be continuing to develop a solution until it provides at least around 85% of the StyledVector map features. Would the community be interested in receiving this code and if so should I submit through a pull request on a branch associated with this ticket?
@robbo1975 I think it would be great thing having vectoretiles in cesium,
@robbo1975: excited to see this contribution! It is sorely needed.
There are different strategies taken by different providers for styling vector layers (e.g. Mapbox, Carto, Deck.gl, and probably OpenLayers although I haven't looked deeply). Does your layer take a separate strategy? Or does it adopt one of the existing solutions (e.g. CartoCSS)?
Either way, would it make sense to first package the project outside of core Cesium as a separate module? This might allow it to evolve quickly and independently — if it proves to be a widely useful solution, it could easily be integrated into Cesium itself at that point. I recently packed up a terrain provider that might be a good example of how to structure an external Cesium plugin.
@davenquinn I have adopted the mapbox standard in my approach because of a need to support ESRI Vector tile services. Your suggestion of developing as an external plugin module seems eminently sensible; however, JavaScript is not my first language so I'm still trying to find my feet with all of the language concepts and associated Frameworks and tools! I will take a look at your example module and see if I can replicate the core modular capability. Thanks for your feedback :)
@robbo1975 the Mapbox standard is the most widely used, so having a renderer targeted at that would be wonderful, and extremely useful for our work as well. If you were able to create a project, I'd be happy to help with code review etc. (as someone who is mostly an outsider to Cesium, but a fairly proficient javascript developer).
@davenquinn I have managed to get a bare-bones project started for a node module that can plug in to Cesium. It is still very much in the prototype stage, but you are welcome to provide feedback.
https://github.com/robbo1975/MapboxVectorTileImageryProvider
Hey @robbo1975, thanks for working on this and for sharing your code! I just wanted to mention real quick that CesiumJS can't accept GPL-licensed code because of CesiumJS's much more permissive Apache 2.0 license. I suspect most CesiumJS applications would also be unable to use it. Not sure if the license was a conscious choice there, but thought I should mention it.
@kring Thanks for the observation; it was an oversight on my part. I have updated the license to the more permissive MIT license
+1 for Mapbox vector tile support!
has there been any further development on this? There are several vector basemaps provided by esri that I would love to use as imagery providers
Hi, here (https://github.com/kikitte/MVTImageryProvider) is another implementation of MapboxVectorTileImageryProvider using Mapbox-vector-tiles-basic-js-renderer. I hope it will help somebody who want to render mapbox vector tile in cesium.
Hi — just an update on this thread: I tried several approaches to this rendering problem for my work on visualizing Mars in advance of the Perseverance landing this week. The approach brought over from TerriaJS works well but is relatively slow. @kikitte's renderer based on the Mapbox GL fork also works well and is much quicker (that's what I ended up using, ultimately). I think some sort of WebGL approach based on Mapbox GL (pre-license-change) or Deck.gl would be appropriate long term, with the significant benefit that we could reuse some of the work on styling/symbology that has gone into these renderers. There's no reason why we couldn't have multiple vector-tile backends, too.
Updates?
Actually, yeah there are some updates! I just finished the initial public rollout of the cesium-vector-provider module and created a demo website that shows it in action.
I think this will be pretty great implementation that maximizes compatibility with the Mapbox stack, especially once some of the outstanding design deficiencies are addressed. I'm working to ensure that the project can be based directly on the rendering stack within Maplibre GL (see maplibre/maplibre-gl-js#166). It'd be nice if we could eventually drop in a Mapbox stylesheet to Cesium and get a functional basemap.
Contributions to the project are welcome!
@davenquinn Thanks for the updates and work on the vector provider module! We started taking a look at your repo and were wondering if you had any ideas about how the code could be included in CesiumJS. The main concern is that maplibre-gl is ~14 MB unpacked, which could be a bit heavy for combined Cesium builds.
Just to throw a couple ideas out there, we could:
- Add a flag to the
makeZipFilecommand that optionally includesmaplibre-gland the vector provider files (false by default) - Let users manually import
maplibre-glfrom a path similarly to howTaskProcessorpoints to .wasm paths
Hi @ebogo1, and thanks for looking at this. I agree that the size of Maplibre GL is a bit of a problem here. Right now the cesium-vector-provider module references a full/compiled version of Maplibre, but that is because I haven't figured out the right strategy for referring to things directly from their source code (a large part of the problem here is replicating their wasm compilation pipeline). This is probably simple but the module just hasn't evolved to that point.
Thinking ahead, I suspect that having this component as a standalone module makes sense. Ideally, it would just be a custom layer that can be imported with all dependencies from an external node module (this is the role that cesium-vector-provider seeks to fill). This would allow glue code between Maplibre and Cesium to have a lifecycle independent of Cesium's internals, and would allow (the large majority of) people with no need for Mapbox-compatible vector rendering to omit this heavy dependency.
I don't know if keeping things outside of the Cesium core library is a preferred approach of the team or how it fits with your development workflow, but it's how I'd try to proceed, at least initially.
@davenquinn Given the heavy dependency on maplibre-gl, I agree that it may be better to keep this as a separate module to start. I took a look at the cesium-vector-provider repo and the associated fork of maplibre-gl, and it seems like the heavy lifting is done in the BasicRenderer in maplibre-gl, with cesium-vector-provider mostly being an API to call through to query for images and features. I have a few questions so far:
- In the README, it says "It'd be nice to align the approaches used here with Cesium's first-party 3D Tiles stack". Is this referring to the caching system? I know that there is a caching system implemented on the renderer side, is there a need for one on the provider side?
- I noticed that in some areas there is reference to a light source in the shading, would it be possible to account for the position of the sun in Cesium?
- Regarding performance, is the rendering done in workers on an offscreen canvas?
- What is the state of metadata support right now? Is there any limitation to users being able to pick features?
Hi @sanjeetsuhag thanks for the questions.
The current structure of the code (the fork of maplibre-gl with the BasicRenderer sidecar) is mostly due to my having not figured out how to compile and reference the shaders that Mapbox GL uses independently of their build pipeline. Much of the BasicRenderer code may more properly belong in cesium-vector-provider but I think once the approach is solidified, it might be possible to build a small number of necessary hooks into Maplibre and contribute them to the core project. maplibre/maplibre-gl-js#166 demonstrates that the team there is amenable to making some APIs public to serve deep integrations, which would be the ideal long-term approach.
- By "aligning with 3D Tiles" I was thinking mostly about taking cues from where in the Cesium rendering stack 3D tiles are handled. I'm not really that familiar with Cesium's internal APIs and right now everything is done in single tiles.
- I believe rendering is right now being done in worker threads, because offscreen canvas is not supported everywhere
- Metadata support and basic filtering have been carried over from @kikitte's work, but not validated. Making this work is on the roadmap, but basic rendering + labels are I think a somewhat higher priority. The goal would be to have it work somewhat similarly to how Maplibre filtering works within their stack.
Additional points:
- One big item that might have some influence on the "right" way to hook into Cesium is labeling. Labels clearly must be viewport-aligned and span tile boundaries. Figuring how to integrate these layers with Cesium's renderer might be difficult and is something I just haven't tackled yet.
- I'm happy to discuss moving or changing the ownership of davenquinn/cesium-vector-provider if this is something that would help centralize specific work on this in the right space.
I will also note that one of the potential improvements to rendering will be if we can directly render into Cesium-managed canvas contexts rather than creating our own, serializing as images, and exposing in a tile provider.
This feels like a lot of hoops to jump through and is purely a function of my and previous folks’ unfamiliarity with Cesium’s internals.
A light-weight alternative to mapbox-gl/maplibre-gl is https://github.com/protomaps/protomaps.js - it supports MVT and a subset of mapbox style spec.
We have been using it in TerriaJS for nearly a year - and it works quite well.
https://github.com/TerriaJS/terriajs/blob/main/lib/Map/ImageryProvider/ProtomapsImageryProvider.ts
For information, MapLibre is building their roadmap and calling for popular vote.
There is a proposition for a minimal build which may align with your needs @davenquinn.
See maplibre/maplibre#159 / https://maplibre.org/news/2023-03-13-second-call-for-bounties/
@davenquinn Any updated progress on the module?
We really look forward to vector tile (PBF) support for cesium. The newer ESRI services use this format, and currently cannot be used in cesiumjs. This is a much needed enhancement.