(8)ArcGIS API for JavaScript之2D Symbol

阅读本文大概需要 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。

栗子:

原创文章,转载请注明原作者和出处。

↓↓↓

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180724G09DTJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券