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

发布时间 2023-04-09 22:36:35作者: zhoulujun

个人偏好使用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

MarkerTextPolygons 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

这些规则可应用于:

CategoriesCan 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