maptalks点线面图形样式设置经验总结

个人偏好使用mapbox，但是架不住人多，被使用maptalks，然而的文档非常感人，让人泪崩三千里……

maptalks图形样式设置，通过symbol设置

设置symbol的，可以直接在 图形(Marker LineString Polygon )，Geometry、VectorLayer 设置

单个图形设置样式：

maptalks矢量图形 geoJSON形式有marker(point)/LineString/Polygon，Geometry

在新建时通过option.symbol设置

如果新建标志marker，设置option.symbol参数

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

通过setSymbol updateSymbol方法设置

 

marker.setSymbol(symbol)

symbol属性列表

symbol在官方文档，一下子都找不到相关参数，坑货。搞了大半天才从GitHub上面找symbol具体属性

https://github.com/maptalks/maptalks.js/wiki/Symbol-Reference#all

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

这些规则可应用于：

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

https://maptalks.org/maptalks.js/api/0.x/MultiGeometry.html

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

通过VectorLayer设置

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

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

这种模式我用的最多

转载本站文章《maptalks点线面图形样式设置经验总结——symbol属性与方法》,
请注明出处：https://www.zhoulujun.cn/html/GIS/maptalks/2019_1118_8216.html