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

• 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

这些规则可应用于：

支持的颜色格式

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