[Qt] Add a more compelling runtime style example
This commit is contained in:
Thiago Marcos P. Santos
@@ -1,5 +1,7 @@
|
||||
<RCC>
|
||||
<qresource prefix="/">
|
||||
<file>source.geojson</file>
|
||||
<file>label-arrow.svg</file>
|
||||
<file>label-background.svg</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
97
platform/qt/app/label-arrow.svg
Normal file
97
platform/qt/app/label-arrow.svg
Normal file
@@ -0,0 +1,97 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="40"
|
||||
height="40"
|
||||
id="svg3840"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="New document 3">
|
||||
<defs
|
||||
id="defs3842" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="3.8146973"
|
||||
inkscape:cx="26.909082"
|
||||
inkscape:cy="41.484288"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false" />
|
||||
<metadata
|
||||
id="metadata3845">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-1012.3622)">
|
||||
<g
|
||||
id="g3811"
|
||||
transform="translate(0,1012.3622)">
|
||||
<g
|
||||
id="g3802">
|
||||
<g
|
||||
id="g3794">
|
||||
<g
|
||||
transform="translate(0,-1012.3622)"
|
||||
id="layer1-7">
|
||||
<g
|
||||
style="stroke-width:0;stroke-miterlimit:4"
|
||||
stroke-miterlimit="4"
|
||||
id="g3763">
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
id="path2987"
|
||||
transform="translate(0,1012.3622)"
|
||||
d="M 5,0 18.03125,30.40625 A 5,5 0 0 0 15,35 5,5 0 0 0 25,35 5,5 0 0 0 21.96875,30.40625 L 35,0 5,0 z"
|
||||
style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;enable-background:accumulate" />
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
transform="matrix(0.39999698,0,0,0.39999698,12.00006,1033.3623)"
|
||||
d="m 25,35 a 5,5 0 1 1 -10,0 5,5 0 1 1 10,0 z"
|
||||
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;enable-background:accumulate"
|
||||
id="path3759" />
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="40"
|
||||
height="40"
|
||||
transform="translate(0,1012.3622)"
|
||||
style="color:#000000;fill-opacity:0;enable-background:accumulate"
|
||||
id="rect3761" />
|
||||
</g>
|
||||
</g>
|
||||
<rect
|
||||
y="0"
|
||||
x="0"
|
||||
height="40"
|
||||
width="40"
|
||||
id="rect3792"
|
||||
style="color:#000000;fill:#000000;fill-opacity:0;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
25
platform/qt/app/label-background.svg
Normal file
25
platform/qt/app/label-background.svg
Normal file
@@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<svg id="svg3926" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="40" width="120" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<defs id="defs3928">
|
||||
<linearGradient id="linearGradient3793" y2="5" gradientUnits="userSpaceOnUse" x2="40" y1="30" x1="40">
|
||||
<stop id="stop3789" stop-color="#000" offset="0"/>
|
||||
<stop id="stop3791" stop-color="#000" stop-opacity="0.50196081" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<metadata id="metadata3931">
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
<dc:title/>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g id="layer1" transform="translate(0,-1012.3622)">
|
||||
<g id="g3788" transform="translate(-40,1012.3622)">
|
||||
<rect id="rect2991" style="enable-background:accumulate;color:#000000;" fill-rule="nonzero" ry="3" height="30" width="120" y="5" x="40" fill="url(#linearGradient3793)"/>
|
||||
<rect id="rect3018" style="enable-background:accumulate;color:#000000;" fill-opacity="0" height="40" width="120" y="0" x="40"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -71,6 +71,8 @@ void MapWindow::changeStyle()
|
||||
if (++currentStyleIndex == styles.size()) {
|
||||
currentStyleIndex = 0;
|
||||
}
|
||||
|
||||
m_sourceAdded = false;
|
||||
}
|
||||
|
||||
void MapWindow::keyPressEvent(QKeyEvent *ev)
|
||||
@@ -82,30 +84,115 @@ void MapWindow::keyPressEvent(QKeyEvent *ev)
|
||||
changeStyle();
|
||||
break;
|
||||
case Qt::Key_L: {
|
||||
m_map.setPaintProperty("water", "fill-color", QColor(255, 0, 0));
|
||||
m_map.setPaintProperty("building", "fill-color", "red");
|
||||
m_map.setPaintProperty("road-secondary-tertiary", "line-color", "red");
|
||||
if (m_sourceAdded) {
|
||||
return;
|
||||
}
|
||||
|
||||
m_map.setLayoutProperty("road-label-small", "symbol-placement", "point");
|
||||
m_map.setLayoutProperty("road-label-medium", "symbol-placement", "point");
|
||||
m_map.setLayoutProperty("road-label-large", "symbol-placement", "point");
|
||||
m_sourceAdded = true;
|
||||
|
||||
QFile geojson(":source.geojson");
|
||||
geojson.open(QIODevice::ReadOnly);
|
||||
|
||||
QVariantMap testSource;
|
||||
testSource["type"] = "geojson";
|
||||
testSource["data"] = geojson.readAll();
|
||||
// The data source for the route line and markers
|
||||
QVariantMap routeSource;
|
||||
routeSource["type"] = "geojson";
|
||||
routeSource["data"] = geojson.readAll();
|
||||
m_map.addSource("routeSource", routeSource);
|
||||
|
||||
m_map.addSource("testSource", testSource);
|
||||
// The route case, painted before the route
|
||||
QVariantMap routeCase;
|
||||
routeCase["id"] = "routeCase";
|
||||
routeCase["type"] = "line";
|
||||
routeCase["source"] = "routeSource";
|
||||
m_map.addLayer(routeCase);
|
||||
|
||||
QVariantMap testLayer;
|
||||
testLayer["id"] = "testLayer";
|
||||
testLayer["type"] = "fill";
|
||||
testLayer["source"] = "testSource";
|
||||
m_map.setPaintProperty("routeCase", "line-color", QColor("white"));
|
||||
m_map.setPaintProperty("routeCase", "line-width", 20.0);
|
||||
m_map.setLayoutProperty("routeCase", "line-join", "round");
|
||||
m_map.setLayoutProperty("routeCase", "line-cap", "round");
|
||||
|
||||
m_map.addLayer(testLayer);
|
||||
m_map.setPaintProperty("testLayer", "fill-color", QColor("blue"));
|
||||
// The route, painted on top of the route case
|
||||
QVariantMap route;
|
||||
route["id"] = "route";
|
||||
route["type"] = "line";
|
||||
route["source"] = "routeSource";
|
||||
m_map.addLayer(route);
|
||||
|
||||
m_map.setPaintProperty("route", "line-color", QColor("blue"));
|
||||
m_map.setPaintProperty("route", "line-width", 8.0);
|
||||
m_map.setLayoutProperty("route", "line-join", "round");
|
||||
m_map.setLayoutProperty("route", "line-cap", "round");
|
||||
|
||||
// Markers at the beginning and end of the route
|
||||
m_map.addImage("label-arrow", QImage(":label-arrow.svg"));
|
||||
m_map.addImage("label-background", QImage(":label-background.svg"));
|
||||
|
||||
QVariantMap makerArrow;
|
||||
makerArrow["id"] = "makerArrow";
|
||||
makerArrow["type"] = "symbol";
|
||||
makerArrow["source"] = "routeSource";
|
||||
m_map.addLayer(makerArrow);
|
||||
|
||||
m_map.setLayoutProperty("makerArrow", "icon-image", "label-arrow");
|
||||
m_map.setLayoutProperty("makerArrow", "icon-size", 0.5);
|
||||
m_map.setLayoutProperty("makerArrow", "icon-ignore-placement", true);
|
||||
|
||||
QVariantList arrowOffset;
|
||||
arrowOffset.append(0.0);
|
||||
arrowOffset.append(-15.0);
|
||||
m_map.setLayoutProperty("makerArrow", "icon-offset", arrowOffset);
|
||||
|
||||
QVariantMap makerBackground;
|
||||
makerBackground["id"] = "makerBackground";
|
||||
makerBackground["type"] = "symbol";
|
||||
makerBackground["source"] = "routeSource";
|
||||
m_map.addLayer(makerBackground);
|
||||
|
||||
m_map.setLayoutProperty("makerBackground", "icon-image", "label-background");
|
||||
m_map.setLayoutProperty("makerBackground", "text-field", "{name}");
|
||||
m_map.setLayoutProperty("makerBackground", "icon-text-fit", "both");
|
||||
m_map.setLayoutProperty("makerBackground", "icon-ignore-placement", true);
|
||||
m_map.setLayoutProperty("makerBackground", "text-ignore-placement", true);
|
||||
m_map.setLayoutProperty("makerBackground", "text-anchor", "left");
|
||||
m_map.setLayoutProperty("makerBackground", "text-size", 16.0);
|
||||
m_map.setLayoutProperty("makerBackground", "text-padding", 0.0);
|
||||
m_map.setLayoutProperty("makerBackground", "text-line-height", 1.0);
|
||||
m_map.setLayoutProperty("makerBackground", "text-max-width", 8.0);
|
||||
|
||||
QVariantList iconTextFitPadding;
|
||||
iconTextFitPadding.append(15.0);
|
||||
iconTextFitPadding.append(10.0);
|
||||
iconTextFitPadding.append(15.0);
|
||||
iconTextFitPadding.append(10.0);
|
||||
m_map.setLayoutProperty("makerBackground", "icon-text-fit-padding", iconTextFitPadding);
|
||||
|
||||
QVariantList backgroundOffset;
|
||||
backgroundOffset.append(-0.5);
|
||||
backgroundOffset.append(-1.5);
|
||||
m_map.setLayoutProperty("makerBackground", "text-offset", backgroundOffset);
|
||||
|
||||
m_map.setPaintProperty("makerBackground", "text-color", QColor("white"));
|
||||
|
||||
QVariantList filterExpression;
|
||||
filterExpression.append("==");
|
||||
filterExpression.append("$type");
|
||||
filterExpression.append("Point");
|
||||
|
||||
QVariantList filter;
|
||||
filter.append(filterExpression);
|
||||
|
||||
m_map.setFilter("makerArrow", filter);
|
||||
m_map.setFilter("makerBackground", filter);
|
||||
|
||||
// Tilt the labels when tilting the map and make them larger
|
||||
m_map.setLayoutProperty("road-label-large", "text-size", 30.0);
|
||||
m_map.setLayoutProperty("road-label-large", "text-pitch-alignment", "viewport");
|
||||
|
||||
m_map.setLayoutProperty("road-label-medium", "text-size", 30.0);
|
||||
m_map.setLayoutProperty("road-label-medium", "text-pitch-alignment", "viewport");
|
||||
|
||||
m_map.setLayoutProperty("road-label-small", "text-pitch-alignment", "viewport");
|
||||
m_map.setLayoutProperty("road-label-small", "text-size", 30.0);
|
||||
}
|
||||
break;
|
||||
case Qt::Key_Tab:
|
||||
|
||||
@@ -44,6 +44,8 @@ private:
|
||||
|
||||
unsigned m_animationTicks = 0;
|
||||
unsigned m_frameDraws = 0;
|
||||
|
||||
bool m_sourceAdded = false;
|
||||
};
|
||||
|
||||
#endif
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -57,10 +57,10 @@ include_directories(
|
||||
|
||||
# C++ app
|
||||
add_executable(mbgl-qt
|
||||
platform/qt/app/app.qrc
|
||||
platform/qt/app/main.cpp
|
||||
platform/qt/app/mapwindow.cpp
|
||||
platform/qt/app/mapwindow.hpp
|
||||
platform/qt/app/source.qrc
|
||||
)
|
||||
|
||||
if(WITH_QT_4)
|
||||
|
||||
Reference in New Issue
Block a user