Résumé de l'expérience dans la définition du style graphique de points, de lignes et de zones de maptalks

Personnellement, je préfère utiliser mapbox, mais je ne supporte pas la foule, alors j'utilise maptalks. Cependant, le document est très touchant et fait pleurer à des milliers de kilomètres...

paramètres de style graphique maptalks, via les paramètres de symboles

Pour définir le symbole, vous pouvez le définir directement dans les graphiques (Marker LineString Polygon), Geometry et VectorLayer.

Pour styliser un seul graphique :

Les formats geoJSON de graphiques vectoriels maptalks incluent le marqueur (point)/LineString/Polygon, la géométrie

Défini via option.symbol lors de la création d'un nouveau

Si vous créez un nouveau marqueur, définissez le paramètre option.symbol

var marqueur = nouveau marqueur ([100, 0], { 
    'id' : 'marker0', 
    'symbol' : { 
        'markerFile' : 'foo.png', 
        'markerWidth' : 20, 
        'markerHeight' : 20, 
    }, 
    'propriétés' : { 
        'foo' : 'valeur' 
    ​​} 
});

Défini par la méthode setSymbol updateSymbol

marqueur.setSymbol(symbole)

liste d'attributs de symboles

Le symbole est dans la documentation officielle, mais je ne trouve pas les paramètres pertinents d'un coup, ce qui est une arnaque. Il m'a fallu beaucoup de temps pour trouver les attributs spécifiques du symbole sur GitHub.

Référence des symboles · maptalks/maptalks.js Wiki · GitHub

Marqueur	Texte	Polygones et lignes
marqueurOpacité largeur du marqueur marqueurHauteur marqueurDx marqueurDy marqueurHorizontalAlignement marqueurVerticalAlignment Placement du marqueur marqueurRotation FichierMarqueur Type de marqueur marqueurRemplir marqueurFillPatternFile MarkerFillOpacity marqueurLigneCouleur MarkerLineWidth MarkerLineOpacity marqueurLigneDasharray MarkerLinePatternFile marqueurChemin marqueurPathWidth marqueurPathHauteur	textePlacement texteNomVisage police de texte textePoids Style de texte taille du texte texteRemplir texteOpacité texteHaloFill texteHaloRadius texteHaloOpacité texteWrapWidth textWrapCharacter espacement des lignes de texte texteAlignementHorizontal texteVerticalAlignement texteAligner rotation du texte texteDx texteDy	couleur de la ligne largeur de ligne ligneDasharray opacité de ligne Rejoindre la ligne Capuchon de ligne fichier de motif de ligne ligneDx ligneDy polygoneRemplir polygonOpacité polygonPatternFichier

Ces règles peuvent s’appliquer à :

Catégories	Peut être appliqué à
Marqueur	Marqueurs, polygones, lignes
Texte	Marqueurs, polygones, lignes
Doubler	Polygones, lignes
Polygon	Polygons

支持的颜色格式

HTML-style hex values, rgb, rgba, hsl, and hsla. Predefined HTML colors names, like yellow and blue, are also permitted.

• lineColor: "#ff0",

• lineColor: "#ffff00",

• lineColor: "rgb(255, 255, 0)",

• lineColor: "rgba(255, 255, 0, 1)",

• lineColor: "hsl(100, 50%, 50%)",

• lineColor: "hsla(100, 50%, 50%, 1)",

• lineColor: "yellow"

渐变色设置和canvas设置一样

Gradient color, like it in Canvas, can be either linear gradient color or radial gradient color, the form of gradient color is a JSON object with type, places and color stops:

通过Geometry设置图形样式

批量设置样式

maptalks批量设置样式，一般把其归类，设置规律的集合属性即可

multi集合设置

MultiPoint、MultiLineString、MultiPolygon、MultiGeometry、GeometryCollection

Class: MultiGeometry

这是和单个设置其实一样的，不必赘述

通过VectorLayer设置

一般数据量多了，就通过分层 归集数据，这时候，设置VectorLayer 样式属性即可

layer.setStyle([ 
  { 
    'filter' : ['==', 'count', 100], 
    'symbol' : {'markerFile' : 'foo1.png'} 
  }, 
  { 
    'filter' : ['==' , 'count', 200], 
    'symbole' : {'markerFile' : 'foo2.png'} 
  } 
])

J'utilise le plus ce mode

Réimprimez l' article " Résumé de l'expérience sur la configuration des styles graphiques de points, de lignes et de surfaces maptalks - attributs et méthodes des symboles ",
veuillez indiquer la source : résumé de l'expérience sur la configuration des styles graphiques de points, de lignes et de surfaces maptalks - attributs et méthodes des symboles - notes de remplissage des fosses maptalks - Site personnel de Zhou Junjun