How to render .mbtiles vector file with MVT?

[smarttigerfly]

I want to render map tile by controling its style, so I choose to render .mbtiles vecotr file with MVTFeatureSorce class, but, the I cannot make it.

Firstly, I download a OSM data file, taiwan-latest.osm.pbf.

Then, I convert it to taiwan.mbtiles file, using tilemaker with the default .json and .lua file, config-openmaptiles.json, process-openmaptiles.lua.

tilemaker --input taiwan-latest.osm.pbf \
          --output taiwan.mbtiles \
          --config resources/config-openmaptiles.lua \
          --process resources/process-openmaptiles.lua

Then, I render the .mbtiles in osgearth application with .css and .js file.

The .css file is:

country {
    point-fill:#405c78;
    point-fill-opacity:0.5;
    point-size:100;
    point-smooth:true;
    altitude-clamping:terrain;
    altitude-technique:drape;
}

city {
  point-fill:#cf239097;
  point-fill-opacity:0.5;
  point-size:100;
  point-smooth:true;
  altitude-clamping:terrain;
  altitude-technique:drape;
}

trunk {
  stroke:#faf9f7;
  stroke-opacity:0.8;
  stroke-width:10px;
  stroke-linecap:flat;
  stroke-linejoin:mitre;
  stroke-rounding-ratio:0.2;
  stroke-tessellation-size:100;
  stroke-smooth:true;
}

motorway {
  stroke:#fff0c4;
  stroke-opacity:0.8;
  stroke-width:10px;
  stroke-linecap:flat;
  stroke-linejoin:mitre;
  stroke-rounding-ratio:0.2;
  stroke-tessellation-size:100;
  stroke-smooth:true;
}

The .js file is:

function getStyleClass()
{
    if(feature.properties.class=='country')
    {return "country";}
    else if(feature.properties.class=='city')
    {return "city";}
    else if(feature.properties.class=='trunk')
    {return "trunk";}
    else if(feature.properties.class=='motorway')
    {return "motorway";}
}

The main.cpp is:

#define OSGEARTH_HAVE_MVT 1
#define OSGEARTH_HAVE_SQLITE3 1

#include <osgViewer/Viewer>

#include <osgEarth/MapNode>
#include <osgEarth/ImageLayer>
#include <osgEarth/ModelLayer>
#include <osgEarth/GeoTransform>


#include <osgEarth/GDAL>
#include <osgEarth/MVT>
#include <osgEarth/StyleSheet>
#include <osgEarth/FeatureImageLayer>
#include <osgEarth/FeatureModelLayer>

#include <osgEarth/EarthManipulator>
#include <osgEarth/ExampleResources>
#include <osgEarth/AutoScaleCallback>

#include <osgEarth/OGRFeatureSource>

#include <osgEarth/GLUtils>

#include <iostream>


using namespace osgEarth;
using namespace osgEarth::Util;

std::string readFileIntoString(const std::string& path) {
    std::ifstream input_file(path);
    if (!input_file.is_open()) {
        std::cout << "Could not open the file - '"
            << path << "'" << std::endl;
        exit(EXIT_FAILURE);
    }
    return std::string((std::istreambuf_iterator<char>(input_file)), std::istreambuf_iterator<char>());
}


int main(int argc, char** argv)
{

    osgEarth::initialize();

    osg::ArgumentParser arguments(&argc, argv);

    // create the empty map.
    osg::ref_ptr<Map> map = new Map();

    GDALImageLayer* worlLayer = new GDALImageLayer();
    worlLayer->setURL("data/world.tif");
    map->addLayer(worlLayer);

    //MVT layer
    osg::ref_ptr<MVTFeatureSource> fs = new MVTFeatureSource();
    //osg::ref_ptr<OGRFeatureSource> fs = new OGRFeatureSource();
    //fs->setOGRDriver("mapnikvectortiles");
    std::string filename = osgDB::findDataFile("E:\\tilemaker-windows\\taiwan.mbtiles");
    if (filename.empty())
    {
        OE_WARN << "File [E:/tilemaker-windows/taiwan.mbtiles] not finded!" << std::endl;
        exit(0);
    }

    fs->setURL(filename);
    Status s = fs->open();
    if (s.isError())
    {
        OE_WARN << s.message() << std::endl;
        exit(0);
    }


    {
        //
        std::string styleString = readFileIntoString("E:/osgEarthData/style.css");
        //std::cout << "styleString: " << styleString << std::endl;
        StyleSheet* stringSheet = new StyleSheet();
        stringSheet->addStylesFromCSS(styleString);

        std::string scriptString = readFileIntoString("E:/osgEarthData/script.js");
        stringSheet->setScript(new StyleSheet::ScriptDef(scriptString));
        stringSheet->addSelector(StyleSelector("default", StringExpression("getStyleClass()")));

        FeatureDisplayLayout layout;
        layout.tileSize() = 500;

        FeatureImageLayer* mvtlayer = new FeatureImageLayer();
        //FeatureModelLayer* mvtlayer = new FeatureModelLayer();
        mvtlayer->setFeatureSource(fs);
        mvtlayer->setStyleSheet(stringSheet);
        //mvtlayer->setLayout(layout);
        //mvtlayer->setMaxVisibleRange(20000.0);
        map->addLayer(mvtlayer);
    }

    // make the map scene graph:
    MapNode* node = new MapNode(map);

    // initialize a viewer:
    osgViewer::Viewer viewer(arguments);
    EarthManipulator* manip = new EarthManipulator();
    viewer.setCameraManipulator(manip);
    viewer.getCamera()->setSmallFeatureCullingPixelSize(-1.0f);
    viewer.setSceneData(node);

    GLUtils::setGlobalDefaults(node->getOrCreateStateSet());
    viewer.realize();
    // zoom to a good startup position
    manip->setViewpoint(Viewpoint(
        "Home",
        123.2847, 25.668, 10.88,   // longitude, latitude, altitude
        -22.7465, -90, 7310.49), // heading, pitch, range
        5.0);                    // duration


    // add some stock OSG handlers:
    MapNodeHelper().configureView(&viewer);

    int r = viewer.run();

    return r;
}

The result is:

I don't how to edit the .css file to control the render style.

And then, I want to render the .mbtiles file according to the feature_mapnikvectortiles.earth file in the osgearth-2.10\tests directory.

In the feature_mapnikvectortiles.earth file:

osmium export -f geojsonseq --config=config.json honolulu_hawaii.osm.pbf | tippecanoe -f -pf -pk -ps -Z14 -z14 -d12 --no-tile-stats -b0 -l osm -n honolulu -o honolulu.mbtiles

config.json was:
{
    "attributes": {
        "type":      false,
        "id":        false,
        "version":   false,
        "changeset": false,
        "timestamp": false,
        "uid":       false,
        "user":      false,
        "way_nodes": false
    },
    "linear_tags":  ["highway", "barrier", "natural=coastline"],
    "area_tags":    ["aeroway", "amenity", "building", "landuse", "leisure", "man_made", "natural!=coastline"],
    "exclude_tags": ["created_by", "source", "source:*"],
    "include_tags": []
}

So, I download the osmium and tippecanoe, to convert the .pbf file to .mbtiles file.

tippecanoe -f -pf -pk -ps -Z14 -z14 -d12 --no-tile-stats -b0 -n taiwan -o taiwan.mbtiles taiwan.geojson

The .css file is:

hospital {
     icon: "E:/osgEarthData/data/hospital.png";
     icon-align:    center-center;
     icon-declutter: true;
     text-content:  getName();
     altitude-clamping:       terrain;
}

school {
     icon: "E:/osgEarthData/data/school.png";
     icon-align:    center-center;
     icon-declutter: true;
     text-content:  getName();
     altitude-clamping:       terrain;
}

bank {
     icon: "E:/osgEarthData/data/bank.png";
     icon-align:    center-center;
     icon-declutter: true;
     text-content:  getName();
     altitude-clamping:       terrain;
}

forest {
   model:               "E:/osgEarthData/data/tree.osg";
   model-placement:     random;
   model-density:       10000;
   model-scale:         2.5;
   model-random-seed:   1;
   altitude-clamping:       terrain;
}

grass {
   model:               "E:/osgEarthData/data/tree.osg";
   model-placement:     random;
   model-density:       10000;
   model-scale:         2.5;
   model-random-seed:   1;
   altitude-clamping:       terrain;
}

water {
   fill:               #6BA8FF;
   render-depth-test:  false;
   altitude-clamping:  terrain-drape;
}

buildings {
  extrusion-flatten:     true;
  altitude-clamping:     terrain;
}

boundary {
 fill:               #ff6bd3;
 stroke:             #ffd36b;
 stroke-width:         10px;
}

highway {
 stroke:#faf9f7;
 stroke-opacity:0.8;
 stroke-width:10px;
 stroke-linecap:flat;
 stroke-linejoin:mitre;
 stroke-rounding-ratio:0.2;
 stroke-tessellation-size:100;
 stroke-smooth:true;
}

The .js file is:

function selectStyle() {
    if ("building" in feature.properties) {
        return "buildings";
    }
    else if ("landuse" in feature.properties) {
        var landuse = feature.properties["landuse"];
        if ( landuse == "forest" ||
             landuse == "grass" ||
             landuse == "meadow"
            ) {
                return "forest";
            }
        else if (landuse == "reservoir") {
            return "water";
        }
    }
    else if ("natural" in feature.properties) {
        var natural = feature.properties["natural"];
        if (natural == "wood" || natural == "tree") {
            return "forest"
        }
        else if (natural == "water") {
            return "water";
        }
    }
    else if ("surface" in feature.properties) {
        var surface = feature.properties["surface"];
        if (surface == "grass") {
            return "grass";
        }
    }
    else if ("amenity" in feature.properties) {
        var amenity = feature.properties["amenity"];
        if (amenity == "hospital") {
            return "hospital";
        }
        else if (amenity == "school") {
            return "school";
        }
        else if (amenity == "bank") {
            return "bank";
        }
    } 
    else if ("boundary" in feature.properties){
        return "boundary";
    } 
    else if ("highway" in feature.properties){
        return "highway";
    }
    return null;
}

function getName() {
    if ("name" in feature.properties) {
        return feature.properties["name"];
    }
    return "";
}

And the result is:

But if I run it to render honolulu.mbtiles file, the result is:

And, the .css file is:

hospital {
     icon: "E:/osgEarthData/data/hospital.png";
     icon-align:    center-center;
     icon-declutter: true;
     text-content:  getName();
     altitude-clamping:       terrain;
}
school {
     icon: "E:/osgEarthData/data/school.png";
     icon-align:    center-center;
     icon-declutter: true;
     text-content:  getName();
     altitude-clamping:       terrain;
}
bank {
     icon: "E:/osgEarthData/data/bank.png";
     icon-align:    center-center;
     icon-declutter: true;
     text-content:  getName();
     altitude-clamping:       terrain;
}
forest {
   model:               "E:/osgEarthData/data/tree.osg";
   model-placement:     random;
   model-density:       10000;
   model-scale:         2.5;
   model-random-seed:   1;
   altitude-clamping:       terrain;
}
grass {
   model:               "E:/osgEarthData/data/tree.osg";
   model-placement:     random;
   model-density:       10000;
   model-scale:         2.5;
   model-random-seed:   1;
   altitude-clamping:       terrain;
}
water {
   fill:               #6BA8FF;
   render-depth-test:  false;
   altitude-clamping:  terrain-drape;
}
buildings {
  extrusion-height:      getBuildingHeight();
  extrusion-flatten:     true;
  extrusion-wall-style:  building-wall;
  extrusion-roof-style:  building-rooftop;
  altitude-clamping:     terrain;
}
building-wall {
  skin-library:     us_resources;
  skin-tags:        building;
  skin-random-seed: 1;
  fill:             #ffffff;
}
building-rooftop {
  skin-library:     us_resources;
  skin-tags:        rooftop;
  skin-tiled:       true;
  skin-random-seed: 1;
  fill:             #ffffff;
}
 

the .js file is:

function selectStyle() {
    if ("building" in feature.properties) {
        return "buildings";
    }
    else if ("landuse" in feature.properties) {
        var landuse = feature.properties["landuse"];
        if ( landuse == "forest" ||
             landuse == "grass" ||
             landuse == "meadow"
            ) {
                return "forest";
            }
        else if (landuse == "reservoir") {
            return "water";
        }
    }
    else if ("natural" in feature.properties) {
        var natural = feature.properties["natural"];
        if (natural == "wood" || natural == "tree") {
            return "forest"
        }
        else if (natural == "water") {
            return "water";
        }
    }
    else if ("surface" in feature.properties) {
        var surface = feature.properties["surface"];
        if (surface == "grass") {
            return "grass";
        }
    }
    else if ("amenity" in feature.properties) {
        var amenity = feature.properties["amenity"];
        if (amenity == "hospital") {
            return "hospital";
        }
        else if (amenity == "school") {
            return "school";
        }
        else if (amenity == "bank") {
            return "bank";
        }
    }
    return null;
}
function getName() {
    if ("name" in feature.properties) {
        return feature.properties["name"];
    }
    return "";
}
function getBuildingHeight() {
if ("height" in feature.properties) {
	var h = feature.properties["height"].replace('m','');
	return Math.max(h, 4.0);
} else if ("building:height" in feature.properties) {
	var h = feature.properties["building:height"].replace('m','');
	return Math.max(h, 4.0);
} else if ("building:levels" in feature.properties){
	var l = feature.properties["building:levels"];
	return Math.max(l * 4.0, 4.0);
}
return Math.floor((Math.random() * 5.0) + 4.0);
}