maptalks点线面图形样式设置经验总结——symbol属性与方法
Author：zhoulujun Date：
个人偏好使用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 |
|---|---|---|
|
|
|
这些规则可应用于：
| 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