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

Posted 2023-04-10 zhoulujun

maptalks图形样式设置，通过symbol设置。可以直接在 图形(Marker LineString Polygon )，Geometry、VectorLayer 设置。图层的话直接通过setStyle设置。symbol在官方文档一下子都找不到相关key列表，搞了半天才从GitHub上面找symbol具体属性说明

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

Cesium实战项目1.点线面实体绘制

参考技术A Cesium点线面绘制是很基本的功能，数据采集类型的系统必须具备此功能。但是Cesium并没有提供相关可以直接使用的绘制方法，只能自己进行封装，虽然实现起来不是很难，但是对Cesium不太熟的同学还是比较麻烦的。

在Cesium中，虽然没有提供鼠标交互绘制的相关类，但是我们可以通过监听鼠标点击事件，获取点击点坐标串，这样就能够实现鼠标交互绘制的功能。Cesium中的ScreenSpaceEventHandler类提供鼠标各种事件，如鼠标左键点击，鼠标右键点击等。我们只需构建此对象，监听鼠标左键点击事件、鼠标移动事件，鼠标右键事件，即可实现绘制功能。

获取方式  Cesium实战项目