All of the above works now out of the box, without custom application code.
ol.source.TileVector has been replaced by ol.source.VectorTile, which
is used with an ol.layer.VectorTile. Mapbox vector tiles are also
supported through ol.format.MVT, and tile loading is done exactly the
same way as for image tiles, so you can define your own tile grid for
ol.source.VectorTile.
Andreas.
On Thu, Sep 29, 2016 at 3:49 AM, Yuval Perelman via OL3 Dev
<ol3-dev+apn2wqe37zgxmz7wohbc414kmsmyat3achw5d4mzt-7vmwjoq0eo3...@googlegroups.com>
wrote:
> Hi there.
> Just want to ask if you manage to make it work.
>
> Thanks
> Yuval
>
> On Wednesday, September 9, 2015 at 1:17:47 PM UTC+3, Poul Sørensen wrote:
>>
>> I forgot to mention that to get the feature loading i added both vector
>> layers:
>> map.addLayer(new ol.layer.Vector({
>> style: new ol.style.Style({
>> fill: null,
>> stroke: null,
>> image: null,
>> }),
>> source: vt
>> }));
>> map.addLayer(new ol.layer.Vector({
>> style: new ol.style.Style({
>> stroke: new ol.style.Stroke({
>> color: '#ffcc33',
>> width: 2
>> })
>> }),
>> source: this.tracksVectorSource
>> }));
>>
>>
>> using a null style for the loader.
>>
>> On Wednesday, 9 September 2015 12:16:43 UTC+2, Poul Sørensen wrote:
>>>
>>> I just wanted to share my solution of what I needed up doing.
>>>
>>> Background is that I generated some geojson vector tiles using geojson-vt
>>> explained here https://www.mapbox.com/blog/introducing-geojson-vt/ Those are
>>> alittle special from geojson.
>>> Example:
>>>
>>> {
>>> "geometry": [
>>> [
>>> [
>>> 2190,
>>> 1281,
>>> 10
>>> ],
>>> [
>>> 2189,
>>> 1276,
>>> 2662
>>> ]
>>> ]
>>> ],
>>> "type": 2,
>>> "tags": {
>>> "id": "ascend-garmin-001-AA98F6D4FC513B276E90C72154635978",
>>> "start": "2015-08-13T17:04:24+02:00",
>>> "stop": "2015-08-13T17:48:46+02:00"
>>> }
>>> },
>>>
>>>
>>> each tile uses local coordinates relative to the tile, and the tiles are
>>> defined using a tiling scheme in the projection EPSG:3857. The base map i
>>> wanted to draw this ontop in OL3 was of a different projection.
>>>
>>> So i did the following using a TileVector that is queried in the local
>>> coordinate system, then reprojects and fetches tiles from EPSG:3857 scheme
>>> and combiles vectors into a normal ol.source.vector.
>>>
>>> //VectorTiles Loader
>>> var vt = new ol.source.TileVector({
>>> projection: epsg25832, //This is not used for
>>> TileVector
>>> tileGrid: tg,
>>> tileUrlFunction: (tileCoord: number[], ratio,
>>> proj) => {
>>> return tileCoord.join(",");
>>> },
>>> tileLoadFunction: (urlParamsStr: string, loaded)
>>> => {
>>> //Consider if a mapbox rendere is better,
>>> currently we fetch tiles, convert coordinates and then visualize in canvas.
>>> //Data is optimized to be rended on a per
>>> tile case.
>>> var tileCoord =
>>> urlParamsStr.split(",").map((s) => parseInt(s));
>>> var extent = getTileCoordExtent(tg,
>>> tileCoord, epsg25832, "EPSG:3857");
>>> var resolution =
>>> tg.getResolution(tileCoord[0]);
>>> var newZ =
>>> linearFindNearest(tilegrid.getResolutions(), resolution, 1);
>>> var newTileRange =
>>> getTileRangeForExtentAndResolution(tilegrid, extent,
>>> tilegrid.getResolution(newZ));
>>> var defers = 0;
>>> var features = [];
>>> var localCache = {};
>>>
>>>
>>> for (var ix = newTileRange[0]; ix <=
>>> newTileRange[1]; ++ix) {
>>> for (var iy = newTileRange[2]; iy <=
>>> newTileRange[3]; ++iy) {
>>> defers++;
>>>
>>>
>>> ((tz, tx, ty) => {
>>> setTimeout(() => {
>>> var key = "" + tz + tx + ty;
>>>
>>>
>>> if (!tileCache[key]) {
>>> tileCache[key] = [];
>>> localCache[key] = true;
>>>
>>> client.getData(this.options.document.workSet, this.options.document.name +
>>> "/vt/" + newZ + "/" + tx + "/" + ty + ".geojson")
>>> .done(result => {
>>> //If data is
>>> returned as string make sure its json.
>>> var data: any[] =
>>> typeof (result) === "string" ? JSON.parse(result) : result;
>>>
>>>
>>> for (var i = 0; i
>>> < data.length; i++) {
>>> var obj =
>>> data[i].tags;
>>> obj.geometry
>>> = new ol.geom.LineString(data[i].geometry[0].map((coord: number[]) => {
>>> //Convert
>>> from vector tiles local tile coordinates (mercator)
>>> var xpx =
>>> (coord[0] / 4096 + (tx)) / (1 << (tz));
>>> var ypx =
>>> (coord[1] / 4096 + (ty)) / (1 << (tz));
>>> var p =
>>> [((xpx - 0.5) * 2) *
>>> ...
>
> --
> You received this message because you are subscribed to the Google Groups
> "OL3 Dev" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at https://groups.google.com/group/ol3-dev.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/ol3-dev/66ff97e3-d140-4e39-9488-f65cabd10c20%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
--
Andreas Hocevar
Geospatial Solutions Engineer | Boundless
[email protected]
@boundlessgeo
--
You received this message because you are subscribed to the Google Groups "OL3
Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/ol3-dev.
To view this discussion on the web visit
https://groups.google.com/d/msgid/ol3-dev/CAOiJ94iut0%2BMYjpOrSBxKhpTCSkefVJJryugEjUS55GYQZiGaw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
