Summary of experience in setting maptalks point, line and area graphic style

Personally, I prefer to use mapbox, but I can't stand the crowd, so I use maptalks. However, the document is very touching and makes people cry for thousands of miles...

maptalks graphic style settings, through symbol settings

To set the symbol, you can set it directly in the graphics (Marker LineString Polygon), Geometry, and VectorLayer

To style a single graphic:

maptalks vector graphics geoJSON formats include marker(point)/LineString/Polygon, Geometry

Set via option.symbol when creating a new

If you create a new marker, set the option.symbol parameter

var marker = new Marker([100, 0], {
    'id' : 'marker0',
    'symbol' : {
        'markerFile'  : 'foo.png',
        'markerWidth' : 20,
        'markerHeight': 20,
    },
    'properties' : {
        'foo' : 'value'
    }
});

Set by setSymbol updateSymbol method

marker.setSymbol(symbol)

symbol attribute list

Symbol is in the official documentation, but I can't find the relevant parameters at once, which is a scam. It took me a long time to find the specific attributes of symbol from GitHub.

Symbol Reference · maptalks/maptalks.js Wiki · GitHub

Marker	Text	Polygons and Lines
markerOpacity markerWidth markerHeight markerDx markerDy markerHorizontalAlignment markerVerticalAlignment markerPlacement markerRotation markerFile markerType markerFill markerFillPatternFile markerFillOpacity markerLineColor markerLineWidth markerLineOpacity markerLineDasharray markerLinePatternFile markerPath markerPathWidth markerPathHeight	textPlacement textFaceName textFont textWeight textStyle textSize textFill textOpacity textHaloFill textHaloRadius textHaloOpacity textWrapWidth textWrapCharacter textLineSpacing textHorizontalAlignment textVerticalAlignment textAlign textRotation textDx textDy	lineColor lineWidth lineDasharray lineOpacity lineJoin lineCap linePatternFile lineDx lineDy polygonFill polygonOpacity polygonPatternFile

These rules can be applied to:

Categories	Can be applied to
Marker	Markers, Polygons, Lines
Text	Markers, Polygons, Lines
Line	Polygons, Lines
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],
    'symbol': {'markerFile': 'foo2.png'}
  }
])

I use this mode the most

Reprint the article " Experience summary of maptalks point, line and surface graphics style setting - symbol attributes and methods ",
please indicate the source: maptalks point, line and surface graphics style setting experience summary - symbol attributes and methods - maptalks pit filling notes - Zhou Junjun personal website