Composant Delphi / Google Maps / OpenStreetMap / Leaflet  / Mappilary / Native Maps 100% Delphi 0% WebBrowser 0% Javascript

Tuiles vectorielles

Vous êtes ici :TECNativeMap

Support des tuiles vectorielles geoJSON

MapZen fournit gratuitement des tuiles vectorielles à partir des données d'OpenStreetMap

Vous devez obtenir une clef gratuite puis renseigner la propriété VectorMapZenKey de votre carte.

32

// get data road between Tarbes and Paris
map.Routing.Request('Tarbes','Paris');
// get data road between Tarbes and Lourdes via Aureilhan
map.Routing.Request('Tarbes','Aureilhan|Lourdes');
// you can also pass a array of coordinate pairs
map.Routing.Request([43.232858,0.0781021,43.2426749,0.0965226]);


TECNativeMap va donc ajouter un nouveau serveur tsVectorMapZen, les tuiles seront au format geoJSON

Dans ce format les tuiles peuvent rapidement être très lourdes, 300Ko voir +500ko, surtout dans les zoom <16

Pour limiter le poids on sélectionne les layers en fonction du zoom

Zoom 14 : 'water,roads'
Zoom 15 : 'places,water,roads'
Zoom 16,17 : 'places,water,roads,buildings,pois'
Zoom 18+ : 'landuse,places,water,roads,buildings,pois'

Bien entendu cela n'est pas encore définitif, et vous pourrez toujours faire un autre choix

5

L'affichage et le téléchargement des tuiles n'est pas plus rapide que des tuiles bitmaps, au contraire, mais le grand avantage c'est que vous avez accès a beaucoup plus de données, certains tags OSM sont disponibles en plus des données géométriques, par exemple la population d'une ville, le numéro des maisons etc.

Vous pouvez aussi utiliser le layer XAPI pour afficher les données d'OpenStreetMap.

66

Propriétés

Pour pouvoir gérer ces nouvelles données Properties et PropertyValue sont ajoutés aux TECShape

Properties est remplis avec le champ "properties" des tuiles, au format "nom:valeur", chaque couple est séparé par un retour chariot.

PropertyValue[Name] vous permet d'accéder à la valeur de la propriété Name

Vous pouvez les utiliser librement pour stocker vos propres données.

14

Feuille de styles

Pour pouvoir afficher correctement toutes ses données vectorielles il devient obligatoire de pouvoir utiliser des styles.

TECNativeMap dispose donc de la propriété Styles

// get data road between Tarbes and Paris
map.Routing.Request('Tarbes','Paris');
// get data road between Tarbes and Lourdes via Aureilhan
map.Routing.Request('Tarbes','Aureilhan|Lourdes');
// you can also pass a array of coordinate pairs
map.Routing.Request([43.232858,0.0781021,43.2426749,0.0965226]);


Une régle peut se décomposer en un Sélecteur et une liste de propriétés placée entre { }

Selecteur {prop1:value1;prop2:value2}

Sélecteur de style

Le sélecteur peut être le nom d'un groupe, un type d'élément (marker, poi, line ou polygone), la propriété name de l'élément, un ensemble Property:value

Vous pouvez aussi aggréger ces différentes possibilés (groupe+type+property:value)

#Group_Name {} // for all element in the group
.Marker {} // for all TECShapeMarker
#Name_Of_Shape {} // only for this name
.property_name:property_value {} // for all items with this value
#Group_Name.Polygone {} // only for TECShapePolygone in this group
.Line.property_name:property_value {} // only for TECShapeLine with this value

Pour les TECShapePOI vous pouvez aussi sélectionner en fontion du type

.Poi.Ellipse {}
.Poi.Star {}
.Poi.Rect {}
.Poi.Triangle {}
.Poi.Diamond {}
.Poi.Hexagon {}
.Poi.Text {}

Vous pouvez appliquer les mêmes propriétés à plusieurs sélecteur, pour cela séparez-les par des virgules

67

Select1 , Select2, Select3 {...}

Propriété de style

Les propriétés disponibles sont :

bcolor (BorderColor)
bsize
BrushStyle (vcl Clear|Cross|DiagCross|BDiagonal|Horizontal|FDiagonal|Vertical|Solid) ( fmx Graphic )
Color
FontItalic (true|false)
FontBold (true|false)
Fontsize
FontFamily
fcolor (fill color)
fopacity (0-100)
graphic (url|base64,data_png_in_base64|data_svg)
hbcolor (hover border color)
hcolor (hover color)
height
level
opacity (0-100)
penStyle (solid|dash|dot|dashdot)
unit (pixel|meter)
visible (true|false|[text])
weight
width
zindex
StyleIcon (3D,Flat,FlatNoBorder,Svg,OwnerDraw) (TECShapeMarker)
Scale (double) (TECShapeMarker & TECShapePoi);


Pour les couleurs vous pouvez utiliser la syntaxe #RRGGBB ou $int_value ou directement un nom (red, black, green etc.)

15

Vous pouvez aussi créer définir une couleur en indiquant deux couleurs et un pourcentage de mélange

16
// create a color by mixing
map.styles.addRule('.line {color:gradient(Red,Yellow,0.6)');

En utilisant [text] on affiche l'élément que si PropertyValue['name']<>'' ou PropertyValue['addr_housenumber']<>''

17

Extrait d'une feuille de styles

.Polygone {weight:0;zindex:-1;}
.marker {zindex:11}
.marker:hover {scale:1.5}
.marker.kind:embassy{visible:true;graphic:base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAARCAYAAADtyJ2fAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAB+SURBVDhPYxgY4Ln8yn8oEwNM23vuP0heac4NMA3iQ6WAYNItMAcmsfvcETBtt+Tqf7AcOoYDGAddAS4MBzAOugJcGA5gHHQFuDAcwDjoCnBhOIBx0BXgwnAA46ArAGJQyCKHNGrUgRQBAUwCe5xhA1CNpIOhoxE1pGgKGBgAbpXuX0CxebIAAAAASUVORK5CYII='}
.kind:rail {bcolor:#0C0D0D;color:white;weight:1;bsize:3;penStyle:dash;}
.kind:river {color:#54b4eA;weight:4;}

Fig. 74 show vector tiles

Propriété conditionnelle

la propriété if permet d'appliquer la régle en fonction d'une PropertyValue

Avec les régles suivante les villages dont la population est inférieur à 5000 habitants s'afficheront en vert, ceux dont la population est > à 6000 en bleu.

.kind:village {if:population<5000;fontsize:12;color:green;}
.kind:village {if:population>6000;fontsize:12;color:blue}

Vous pouvez utiliser comme comparateur = , !=, >, >=, < et <=

Fig. 75 green < 5000 - blue > 6000

Vous pouvez tester des propriétés "spéciales"

RTL ( vcl ou fmx)


.Polygone {if:rtl=fmx;hcolor:green}

OS ( windows, mac ,android ou ios)


.marker:hover {if:os=windows;color:red}

HOLE (true ou false) permet de détecter si un polygone est un trou dans un autre polygone, TECNativeMap ne prend pas en charge les polygones à trous, ce test permet au minimum d'attribuer une couleur pour les trous.


.polygone.kind:building {if:hole=true;fcolor:silver;fopacity:100;zindex:0;}

Régle en fonction du Zoom

Vous pouvez définir le ou les zooms pour lesquels la règle s'applique, il suffit d'ajouter en fin de sélecteur [zoom valeur] ou [zoom valeur1,valeur2] , [zoom *] indique que la régle s'applique pour tous les zooms

.Poi.Text [zoom *]{if:kind=building;visible:false;}
.Poi.Text [zoom 18,19,20,21,22]{if:kind=building;visible:[text];}
.Poi.Text [zoom *]{if:kind=chapel;visible:false;}
.Poi.Text [zoom 19,20,21,22]{if:kind=chapel;visible:[text];}

Multiples valeurs en fonction du zoom

Pour les propriétés StyleIcon, FontSize, Scale et Weight vous pouvez définir plusieurs valeurs qui dépendent du niveau de zoom

La syntaxe est du type zoom_mini-zoom_max=value,zoom2=value

// fontsize = 6pt in zoom 17 , 8pt in zoom 18 , 10pt in zoom 19 & 20
#.poi {fontsize:17=6,18=8,19-20=10;}
// flat marker for zoom 0 to 17, siDirection for zoom 18 to 20
.marker {styleicon:0-17=flat,18-20=direction}

Définir un nom pour une valeur

Vous pouver nommer vos valeurs et utiliser le nom à la place de la valeur.

@dark {#404040}
@scale-suburb-village {0-11=0,12=1.2,13=1.5,14=1.6,15-16=1.9,17-20=2.5}

.poi {if:place=suburb;fontsize:12; scale:@scale-suburb-village;color:@dark;width:0;yanchor:0;}

Vous pouvez utiliser les styles sans utiliser les tuiles vectorielles, ils s'appliquent à tous vos éléments

6

L'unité uecOSMStyles_standard déclare la constante UEC_OSM_STYLESHEET, ce sont les styles utilisés dans la demo OSMViewer

// see uecOSMStyles_standard
map.styles.Rules := UEC_OSM_STYLESHEET;

Fig. 76 Demo OSMViewer

Éléments clickables

Chaque élément des tuiles est clickable, vous pouvez intercepter le click avec les mêmes évènements que pour vos propres éléments (OnShapeClick, ShapeRightClick et OnShapeLongClick).

Ces évènements ne sont pas restreints au niveau des tuiles, ils sont répercutés à votre carte et vous avez un OnMapClick après un OnShapeClick !

68

Recherche

Vous pouvez utiliser les mêmes fonctions de recherche que pour vos propres éléments.

// get data road between Tarbes and Paris
map.Routing.Request('Tarbes','Paris');
// get data road between Tarbes and Lourdes via Aureilhan
map.Routing.Request('Tarbes','Aureilhan|Lourdes');
// you can also pass a array of coordinate pairs
map.Routing.Request([43.232858,0.0781021,43.2426749,0.0965226]);

Cacher les tuiles vectorielles

Vous pouvez ne pas afficher les tuiles vectorielles mais continuer d'utiliser les données (click et recherche)

// get data road between Tarbes and Paris
map.Routing.Request('Tarbes','Paris');
// get data road between Tarbes and Lourdes via Aureilhan
map.Routing.Request('Tarbes','Aureilhan|Lourdes');
// you can also pass a array of coordinate pairs
map.Routing.Request([43.232858,0.0781021,43.2426749,0.0965226]);

Demos

Pour vous faire une idée du résultat vous pouvez télécharger une demo pour Windows et une pour Android (dézippez et installez l'apk)

Fig. 77 Vectors tiles

Tous les éléments ne sont pas stylés, c'est juste le minimum pour que cela soit lisible (je n'ai pas dit beau !)

7
Aller à la page
Composant Delphi / Google Maps / OpenStreetMap / Leaflet  / Mappilary© 2016 ESCOT-SEP Christophe - Réalisé avec Help&Web - RSS - RSS - Google+