范围分段专题图。
范围分段专题图对数据(<SuperMap.Feature.Vector>)属性字段(attributes)的属性值进行分段,使用不同的颜色或符号(线型、填充)渲染不同范围段的属性值。此种专题图体现数据整体分布情况和区域差异。 在分段专题图中,专题值按用户的分段方式(styleGroups)被分成多个范围段,数据(<SuperMap.Feature.Vector>)根据各自的专题值被分配到其中一个范围段中,在同一个范围段中的要素使用相同的颜色,填充,符号等风格进行显示。 分段专题图所基于的专题变量必须为数值型,分段专题图一般用来反映连续分布现象的数量或程度特征,如降水量的分布,土壤侵蚀强度的分布等。
客服端范围分段专题图采用数据驱动的可视化策略,用户只需要为专题指定数据(数据类型:<SuperMap.Feature.Vector>)和具体数据对应的渲染风格(styleGroups)即可渲染单值专题图。
注意:客户端专题图使用 Cavans 渲染,要求浏览器支持 Cavans。
SuperMap. |
范围分段专题图。 |
Properties | |
features | {Array(SuperMap.Feature.Vector)} 用户数据,矢量要素。 |
highlightStyle | {Object} 高亮样式。 |
isBaseLayer | {Boolean} 该图层是否是基础图层,默认值为 false。可以在构造函数中是通过 options 设置。 |
isHoverAble | {Boolean} 图形是否在 hover 时高亮 ,默认值:false。 |
style | {Array(Object)} 图层中专题要素的样式,可设值如下: |
styleGroups | {Array} 风格分组数组,此数组用于将专题要素分组,每一组专题要素有一种显示风格。使用此属性需要设置 themeField 属性。 |
themeField | {String} 指定用于分段的属性字段名称。此属性字段是要用户数据(feature) attributes 中包含的字段,且字段对应的值的类型必须是数值型(Number)。 使用标签分组显示还需要设置 styleGroups 属性。 |
Constructor | |
SuperMap. |
构造函数。 |
Functions | |
addFeatures | 向专题图图层中添加数据 , 专题图仅接收 SuperMap.Feature.Vector 类型数据, feature 将储存于 features 属性中,其存储形式为数组。 |
clear | 清除图层内容。 清除的内容包括数据(features) 、专题要素、缓存。 |
destroy | 销毁图层,释放资源。 |
getFeatureBy | 在专题图的要素数组 features 里面遍历每一个 feature,当 feature[property] === value 时, 返回此 feature(并且只返回第一个)。 |
getFeatureById | 通过给定一个 id,返回对应的矢量要素。 |
getFeaturesByAttribute | 通过给定一个属性的 key 值和 value 值,返回所有匹配的要素数组。 |
on | 添加专题要素事件监听。 |
redraw | 重绘该图层,成功则返回true,否则返回false。 |
removeAllFeatures | 清除当前图层所有的矢量要素。 |
removeFeatures | 从专题图中删除 feature。这个函数删除所有传递进来的矢量要素。 参数中的 features 数组中的每一项,必须是已经添加到当前图层中的 feature, 如果无法确定 feature 数组,则可以调用 removeAllFeatures 来删除所有feature。 如果要删除的 feature 数组中的元素特别多,推荐使用 removeAllFeatures, 删除所有feature后再重新添加。这样效率会更高。 |
setOpacity | 设置图层的不透明度,取值[0-1]之间。 |
un | 移除专题要素事件监听。 |
{Array(SuperMap.Feature.Vector)} 用户数据,矢量要素。
{Array(Object)} 图层中专题要素的样式,可设值如下:
fill | {Boolean} 是否填充,不需要填充则设置为 false,默认值为 true。此属性与 stroke 不能同时为 false,如果 fill 与 stroke 同时为 false,将按 fill 与 stroke 的默认值渲染图层。 |
fillColor | {String} 十六进制填充颜色。默认值为 “#000000”。 |
fillOpacity | {Number} 填充不透明度。取值范围[0, 1],默认值 1。 |
stroke | {Boolean} 是否描边,不需要描边则设置为false,默认值为 false。此属性与 fill 不能同时为 false,如果 fill 与 stroke 同时为 false,将按 fill 与 stroke 的默认值渲染图层。 |
strokeColor | {String} 十六进制描边颜色。 |
strokeOpacity | {Number} 描边的不透明度。取值范围[0, 1],默认值 1。 |
strokeWidth | {Number} 线宽度/描边宽度,默认值 1。 |
strokeLinecap | {String} 线帽样式;strokeLinecap 有三种类型 “butt”, “round”, “square”; 默认为”butt”。 |
strokeLineJoin | {String} 线段连接样式;strokeLineJoin 有三种类型 “miter”, “round”, “bevel”; 默认为”miter”。 |
strokeDashstyle | {Sting} 虚线类型; strokeDashstyle 有八种类型 “dot”,“dash”,“dashdot”,“longdash”,“longdashdot”,“solid”, “dashed”, “dotted”; 默认值 “solid”。solid 表示实线。 |
pointRadius | {Number} 点半径,默认为 6 (像素)。 |
shadowBlur | {number} 阴影模糊度,(大于 0 有效; 默认值 0)。注:请将 shadowColor 属性与 shadowBlur 属性一起使用,来创建阴影。 |
shadowColor | {string} 阴影颜色; 默认值 ‘#000000’。 注:请将 shadowColor 属性与 shadowBlur 属性一起使用,来创建阴影。 |
shadowOffsetX | {number} 阴影 X 方向偏移值; 默认值 0。 |
shadowOffsetY | {number} 阴影 Y 方向偏移值; 默认值 0。 |
label | {String} 专题要素附加文本标签内容。 |
fontColor | {String} 附加文本字体颜色。 |
fontSize | {Number} 附加文本字体大小。默认值 12,单位是像素。 |
fontStyle | {String} 附加文本字体样式。可设值:”normal”, “italic”, “oblique”; 默认值:”normal” 。 |
fontVariant | {String} 附加文本字体变体。可设值:”normal”, “small-caps”; 默认值:”normal” 。 |
fontWeight | {String} 附加文本字体粗细。可设值:”normal”, “bold”, “bolder”, “lighter”; 默认值:”normal” 。 |
fontFamily | {String} 附加文本字体系列。fontFamily 值是字体族名称或/及类族名称的一个优先表,每个值逗号分割,浏览器会使用它可识别的第一个值。可以使用具体的字体名称(”times”、”courier”、”arial”)或字体系列名称(”serif”、”sans-serif”、”cursive”、”fantasy”、”monospace”)。默认值:”arial,sans-serif”. |
labelPosition | {string} 附加文本位置, 可以是 ‘inside’, ‘left’, ‘right’, ‘top’, ‘bottom’; 默认值 ‘top’。 |
labelAlign | {string} 附加文本水平对齐。可以是 ‘left’, ‘right’, ‘center’; 默认值 ‘center’。 |
labelBaseline | {string} 附加文本垂直对齐。 可以是 ‘top’, ‘bottom’, ‘middle’;默认值 ‘middle’。 |
labelXOffset | {Number} 附加文本在x轴方向的偏移量。 |
labelYOffset | {Number} 附加文本在y轴方向的偏移量。 |
{Array} 风格分组数组,此数组用于将专题要素分组,每一组专题要素有一种显示风格。使用此属性需要设置 themeField 属性。
专题要素分组有如下情况:
1.没有同时设置 themeField 和 styleGroups,则所有专题要素都使用本图层的 style 进行渲染;
2.同时设置 themeField 和 styleGroups,则按照 themeField 指定的字段名称获取用户数据(feature)attributes 中对应的属性值(必须是 Number 型);
a.如果属性值在 styleGroups 数组某个元素的 start 和 end 定义的范围里,则此专题要素取 styleGroups 数组中该元素定义的 style 进行渲染。
b.如果属性值不在 styleGroups 数组任何元素的 start 和 end 定义的范围里,则此专题要素按照本图层的 style 进行渲染。
此数组每个元素对象必须有三个属性:
start : 与字段 themeField 相对应的属性值下限(包含); end:与字段 themeField 相对应的属性值上限(不包含); style:专题要素 style。
styleGroups数组形如: [ { start:200000, end:500000, style:{ fontColor:"#00CD00", fontSize:"18px" } }, { start:500000, end:1000000, style:{ fontColor:"#00EE00", fontSize:"24px" } }, { start:1000000, end:2000000, style:{ fontColor:"#00FF7F", fontSize:"30px" } }, { start:2000000, end:100000000, style:{ fontColor:"#00FF00", fontSize:"36px" } } ]
构造函数。
var themeLayer = new SuperMap.Layer.Range("ThemeLayer");
name | {String} 此图层的图层名。 |
options | {Object} 此类与父类提供的属性。 |
{SuperMap.Layer.Range} 专题图。
addFeatures: function( features )
向专题图图层中添加数据 , 专题图仅接收 SuperMap.Feature.Vector 类型数据, feature 将储存于 features 属性中,其存储形式为数组。
var themeLayer = new SuperMap.Layer.Range("ThemeLayer"); themeLayer.addFeatures(features);
features | {Array(SuperMap.Feature.Vector)} 需要添加的数据(矢量要素)。 |
从专题图中删除 feature。这个函数删除所有传递进来的矢量要素。 参数中的 features 数组中的每一项,必须是已经添加到当前图层中的 feature, 如果无法确定 feature 数组,则可以调用 removeAllFeatures 来删除所有feature。 如果要删除的 feature 数组中的元素特别多,推荐使用 removeAllFeatures, 删除所有feature后再重新添加。这样效率会更高。
调用此函数会清空图层中缓存的专题图要素。
var themeLayer = new SuperMap.Layer.Range("ThemeLayer"); themeLayer.removeFeatures(features);
features | {Array(SuperMap.Feature.Vector)} 要删除feature的数组。 |
在专题图的要素数组 features 里面遍历每一个 feature,当 feature[property] === value 时, 返回此 feature(并且只返回第一个)。
var themeLayer = new SuperMap.Layer.Range("ThemeLayer"); themeLayer.getFeatureBy("property", "value");
property | {String} feature 的某个属性名称。 |
value | {String} property 所对应的值。 |
{SuperMap.Feature.Vector} 第一个匹配属性和值的矢量要素。
通过给定一个 id,返回对应的矢量要素。
var themeLayer = new SuperMap.Layer.Range("ThemeLayer"); themeLayer.getFeatureById("idValue");
featureId | {String} 矢量要素的属性 id。 |
{SuperMap.Feature.Vector} 对应id的 feature,如果不存在则返回 null。
通过给定一个属性的 key 值和 value 值,返回所有匹配的要素数组。
var themeLayer = new SuperMap.Layer.Range("ThemeLayer"); themeLayer.getFeaturesByAttribute("attrName", "attrValue");
attrName | {String} 属性的 key。 |
attrValue | {Mixed} 属性对应的 value 值。 |
Array(SuperMap.Feature.Vector) 一个匹配的 feature 数组。
添加专题要素事件监听。
支持的事件包括: click、mousedown、mousemove、mouseout、mouseover、mouseup。
var themeLayer = new SuperMap.Layer.Range("ThemeLayer"); themeLayer.on("mouseover", evn); function evn(e){ if(e.target && e.target.refDataID){ if(e.target.dataInfo){ alert(e.target.dataInfo); } } }
event | {String} 事件名称。 |
callback | {Function} 事件回调函数。 |
销毁图层,释放资源。
destroy: function()
向专题图图层中添加数据 , 专题图仅接收 SuperMap.Feature.Vector 类型数据, feature 将储存于 features 属性中,其存储形式为数组。
addFeatures: function( features )