阅读本文大概需要 8 分钟。
0. 引言
对于 ArGIS API for JavaScript,Symbol 算是比较重要的一个内容,尤其是二三维一体化的 4.X 版本,增加了很多三维符号。所以在前面一篇文章基础上,我打算再用两篇文章分别介绍二维符号(2D Symbol)和三维符号(3D Symol)。
这篇文章主要介绍各个类型的二维符号及其使用。
PS:虽然 2D Symbol 也能在三维地图视图中使用,但是不推荐这么做。在三维地图中,最佳的方式是使用 3D Symbol。
首先,插播两条相关知识:
由于 4.5 版本之后的 API 已经支持把 js object 转换为 API 对应的类,如符号、符号图层、渲染器类等都能自动转换,所以在 require() 中可以不加载相应模块,除非你想要使用模块中的一些静态方法。
API 中的颜色可以用很多中方式来表示:
CSS 定义的颜色字符串,如 。
十六进制(Hex)的颜色字符串,如 。
表示 rgb 或 rgba 值得数组,如 。
rgb 或 rgba 对象,如 。
颜色对象,如 。
1. MarkerSymbol
MarkerSymbol 是在二维地图视图中绘制于 FeatureLayer 或者 Graphic 上的一个点图形,主要被用于点、面几何要素的符号化,它有两个子类 SimpleMarkerSymbol 和 PictureMarkerSymbol。
1.1 SimpleMarkerSymbol
SimpleMarkerSymbol 通常被渲染为一个带简单图形的二维「点」,这个点可以被一个颜色实体填充,也可以带有边线。
矢量图层(FeatureLayer)中的点、面或者前端绘制的图形(Graphic)都可以使用 SimpleMarkerSymbol 来符号化。
主要的属性:
angle:符号的角度,默认值为0。
color:符号的颜色,默认值为 [255, 255, 255, 0.25] ,半透明的白色。
size: 符号的大小,默认值为12,可以是数字或者带单位的字符串,如 、。
outline:符号的边线,是一个 SimpleLineSymbol 对象。
style:符号的样式,默认值为 circle,可选的值有:circle(圆形)、cross(十字架)、diamond(菱形)、square(方形)、x(×形)。
type:类型标记,值总是为 。
path:SVG 图表的路径。
栗子:
1.2 PictureMarkerSymbol
PictureMarkerSymbol 被渲染为一个用图片表示的点图形,它通常被用于矢量图层中的点要素的符号化。
主要的属性有:
angle:符号的角度,默认值为0。
height:表示图片的点的高度,默认值为 12,可以是数字或者带单位的字符串,如 、。
width:表示图片的点的宽度,默认值为 12,可以是数字或者带单位的字符串,如 、。
type:类型标记,值总是为 。
url:图片的网络路径,必须指向一个有效的图片路径。
对于符号用到的图片,可能存在跨域请求资源,因此会带来 CORS 方面的问题,所以可以使用下面三种方式中的一种来处理:
使用同域下的图片资源。
使用代理(proxy)。
如果图片位于不同域的服务器,需要存储图片的服务器允许 CORS ,并将相应的域名增加到 js API 的 config 中,如:
2. TextSymbol
文本符号通常作为 FeatureLayer、CSVLayer、Sublayer 等图层的文字标签显示,也可以作为前端绘制的图形的符号。
TextSymbol 可以用来标注点、线、面几何要素。
主要的属性有:
angle:文本的角度,默认值为0。
color:文本的颜色。
font:字体。
haloSize:文字阴影大小。
haloColor:文字阴影颜色。haloSize 和 haloColor 同时设置才有效。
backgroundColor:文本的背景。
borderLineColor:背景边框颜色。
borderLineSize:背景边框粗细。
horizontalAlignment:多行文本的水平对齐方式,默认值为 center,可选的值为: left、right、center、justify。
kerning:是否自动调整字间距,默认为 。
rotated:是否自动调整旋转角度,默认为 。
type:符号的类型,值总是为 。
注意,angle、horizontalAlignment这几个属性在三维地图视图中不可用。
backgroundColor、borderLineColor、borderLineSize 这几个属性不能用于 MapImageLayer 图层。
栗子:
3. LineSymbol
LineSymbol 通常被用于矢量图层中线要素的符号化。
LineSymbol 只有一个子类,SimpleLineSymbol,它除了可以表示独立的线状要素,还可以作为 MarkerSymbol 和 FillSymbol 的边线。
SimpleLineSymbol 的属性主要有:
color:符号的颜色,默认值为黑色 。
width:线的宽度,默认值为 0.75,可以是数字或者带单位的字符串,如 、。
type:符号的类型,值总是为 。
style:线的样式,默认为实线 ,可选的值及例子如下图:
cap:线端点处的风格,可选的值为:butt、round、square,默认值为 round。
join:线节点处的风格,可选的值为:bevel、miter、round,默认值为 round。注意,这个属性在三维地图视图中不可用。
注意,style、join、cap 这几个属性在三维地图视图中不可用。
栗子:
4. FillSymbol
FillSymbol 通常是在 GraphicsLayer 或者 FeatureLayer 图层中绘制一个多边形。
FillSymbol 有两个子类 SimpleFillSymbol 和 PictureFillSymbol。
4.1 SimpleFillSymbol
SimpleFillSymbol 被渲染为一个使用颜色或者纹理、图案填充的多边形,它也可以有边线。
SimpleLineSymbol 通常用于矢量图层中的多边形要素或者前端绘制的多边形的符号化。
主要的属性有:
color:颜色,默认是 [0, 0, 0, 0.25] 半透明的黑色。
outline: 边线,一个 SimpleLineSymbol 对象。
type:符号的类型,值总是为 simple-fill。
style:样式,默认值为 solid。可选的值及效果如下:
注意,style 属性在三维地图视图中不可用。
栗子:
4.2 PictureFillSymbol
PictureFillSymbol 是使用一个图片来渲染多边形,这个图片会多次重复出现。
PictureFillSymbol 通常用于矢量图层中的多边形要素或者前端绘制的多边形的符号化。
主要的属性有:
height: 图片的高度,默认值为12,可以是数字或者带单位的字符串,如 、。
width:图片的宽度,默认值为12,可以是数字或者带单位的字符串,如 、。
outline: 边界线,一个 SimpleLineSymbol 对象。
type:符号的类型,值总是为 picture-fill。
url:图片的网络路径,必须指向一个有效的图片路径。
xscale:图片在 x 轴方向上的缩放因子,默认值为 1。
yscale:图片在 y 轴方向上的缩放因子,默认值为 1。
栗子:
原创文章,转载请注明原作者和出处。
↓↓↓
领取专属 10元无门槛券
私享最新 技术干货