最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

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

来源：博客园

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

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


(资料图片)

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

单个图形设置样式：

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

在新建时通过option.symbol设置

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

varmarker=newMarker([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
MarkerMarkers, Polygons, Lines
TextMarkers, Polygons, Lines
LinePolygons, Lines
PolygonPolygons

支持的颜色格式

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

关键词：