客户端专题图
客户端专题图是根据数据的形状和属性数据，在客户端进行相应计算，通过要素图层或任意图层赋予不同的绘制风格并在客户端进行专题图的展示。
SuperMap iClient for Leaflet 支持的专题图包含：
- 单值专题图
- 分段专题图
- 符号等级专题图
- 标签专题图
- 图表专题图
单值专题图
单值专题图是将专题值相同的要素归为一类，为每一类设定一种渲染风格，如颜色或符号等，专题值相同的要素采用相同的渲染风格，从而用来区分不同的类别。
SuperMap iClient for Leaflet 实现单值专题图，代码如下：
//创建 Unique 单值专题图层
var themeLayer = L.supermap.uniqueThemeLayer("ThemeLayer", {
// 开启 hover 高亮效果
isHoverAble: true,
opacity: 0.8,
alwaysMapCRS: true
}).addTo(map);
// 图层基础样式
themeLayer.style = new SuperMap.ThemeStyle({
shadowBlur: 3,
shadowColor: "#000000",
shadowOffsetX: 1,
shadowOffsetY: 1,
fillColor: "#FFFFFF"
});
// hover 高亮样式
themeLayer.highlightStyle = new SuperMap.ThemeStyle({
stroke: true,
strokeWidth: 2,
strokeColor: 'blue',
fillColor: "#00F5FF",
fillOpacity: 0.2
});
// 用于单值专题图的属性字段名称
themeLayer.themeField = "LANDTYPE";
单值专题图类型以及颜色的配置,代码如下：
// 单值专题类型样式组
styleGroups: [
{
value: "草地",
style: {
fillColor: "#C1FFC1"
}
},
{
value: "城市",
style: {
fillColor: "#CD7054"
}
},
{
value: "灌丛",
style: {
fillColor: "#7CCD7C"
}
}
];
查看完整示例代码
分段专题图
分段专题图是指按照某种分段方式被分成多个范围段，要素根据各自的专题值被分配到其中一个范围段中，在同一个范围段中的要素使用相同的颜色，填充，符号等风格进行显示。 分段专题图所基于的专题变量必须为数值型，分段专题图一般用来反映连续分布现象的数量或程度特征，如降水量的分布，土壤侵蚀强度的分布等。
SuperMap iClient for Leaflet 实现分段专题图，主要代码如下：
//定义 rangeThemeLayer 分段专题图层
var themeLayer = L.supermap.rangeThemeLayer("ThemeLayer", {
// 开启 hover 高亮效果
isHoverAble: true,
opacity: 0.8,
alwaysMapCRS: true
}).addTo(map);
themeLayer.style = new SuperMap.ThemeStyle({
shadowBlur: 16,
shadowColor: "#000000",
fillColor: "#FFFFFF"
});
// hover 高亮样式
themeLayer.highlightStyle = new SuperMap.ThemeStyle({
stroke: true,
strokeWidth: 4,
strokeColor: 'blue',
fillColor: "#00EEEE",
fillOpacity: 0.8
});
// 用于单值专题图的属性字段名称
themeLayer.themeField = "POP_DENSITY99";
// 风格数组，设定值对应的样式
themeLayer.styleGroups = [{
start: 0,
end: 0.02,
style: {
color: '#FDE2CA'
}
}, {
start: 0.02,
end: 0.04,
style: {
color: '#FACE9C'
}
}
}];
符号等级专题图
符号等级专题图根据各要素的某个数量特征，按照一定的分类方法用一组等级符号表示在地图上，以呈现要素间该数量特征的相对关系。
SuperMap iClient for Leaflet 实现符号等级专题图为例，主要代码如下：
//创建一个符号等级专题图层
var themeLayer = L.supermap.rankSymbolThemeLayer("themeLayer", SuperMap.ChartType.CIRCLE);
// 指定用于专题图制作的属性字段 详看下面 addThemeLayer（）中的feature.attrs.CON2009
themeLayer.themeField = "CON2009";
// 配置图表参数
themeLayer.symbolSetting = {
//允许图形展示的值域范围，此范围外的数据将不制作图图形,必设参数
codomain: [0, 40000],
//圆最大半径 默认100
maxR: 100,
//圆最小半径 默认0
minR: 0,
//圆形样式
circleStyle: {fillOpacity: 0.8},
//符号专题图填充颜色
fillColor: "#FFA500",
//专题图hover 样式
circleHoverStyle: {fillOpacity: 1}
};
themeLayer.addTo(map);
标签专题图
地图上的必要的标注是必不可少的，不仅帮助用户更好的区分地物要素，同时也显示了要素的某些重要属性，如行政区划、河流、机关、旅游景点的名称、等高线的高程等。在SuperMap 中，通过制作标签专题图，用户可以轻松的实现地图标注。
SuperMap iClient for Leaflet 实现标签专题图，主要代码如下：
//创建一个标签专题图层
var themeLayer = L.supermap.labelThemeLayer("ThemeLayer").addTo(map);
themeLayer.style = new SuperMap.ThemeStyle({
labelRect: true,
fontColor: "#000000",
fontWeight: "bolder",
fontSize: "18px",
fill: true,
fillColor: "#FFFFFF",
fillOpacity: 1,
stroke: false,
strokeColor: "#8B7B8B"
});
//用于专题图的属性字段名称
themeLayer.themeField = "aqi";
//风格数组，设定值对应的样式
themeLayer.styleGroups = [
{
start: 0,
end: 51,
style: {
fillColor: "#6ACD06",
fontSize: "17px"
}
}, {
start: 51,
end: 101,
style: {
fillColor: "#FBD12A",
fontSize: "19px"
}
}
];
图表专题图
图表专题图是通过为每个要素或记录绘制统计图来反映其对应的专题值的大小。图表专题图可以基于多个变量，反映多种属性，即可以将多个专题值绘制在一个统计图上。通过统计专题图可以在区域本身与各区域之间形成横向和纵向的对比。多用于具有相关数量特征的地图上，比如表示不同地区多年的粮食产量、GDP、人口等，不同时段客运量、地铁流量等。
在图表专题图中，每个区域都会有一幅表示该区域各专题值的统计图，专题图有多种表现形式，目前提供的类型有：柱状图，折线图，三维柱状图，折线图，点状图，饼图，环装图，三维饼图，玫瑰图，三维玫瑰图，环状图。
SuperMap iClient for Leaflet 实现图表专题图，主要代码如下：
//柱状图和三维柱状图的图表配置
var chartsSettingForBarAddBar3DCommon = {
width: 260,
height: 120,
codomain: [0, 40000], // 允许图表展示的值域范围，此范围外的数据将不制作图表
xShapeBlank: [15, 15, 15],
axisYTick: 4,
axisYLabels: ["4万", "3万", "2万", "1万", "0"], // y 轴标签内容
axisXLabels: ["09年", "10年", "11年", "12年", "13年"], // 轴标签内容
backgroundRadius: [5, 5, 5, 5],
backgroundStyle: { // 背景框圆角参数
fillColor: "#d1eeee",
shadowBlur: 12,
shadowColor: "#d1eeee"
}
};
//点和线的图表配置
var chartsSettingForPointOrLine = {
width: 220,
height: 100,
codomain: [0, 40000],
xShapeBlank: [10, 10],
axisYTick: 4,
axisYLabels: ["4万", "3万", "2万", "1万", "0"],
axisXLabels: ["09年", "10年", "11年", "12年", "13年"],
backgroundStyle: {fillColor: "#d1eeee"},
backgroundRadius: [5, 5, 5, 5],
useXReferenceLine: true,
pointStyle: {
pointRadius: 5,
shadowBlur: 12,
shadowColor: "#D8361B",
fillOpacity: 0.8
},
pointHoverStyle: {
stroke: true,
strokeColor: "#D8361B",
strokeWidth: 2,
fillColor: "#ffffff",
pointRadius: 4
},
};
//饼状图和环状图的图表配置
var chartsSettingForPieOrRing = {
width: 240,
height: 100,
codomain: [0, 40000], // 允许图表展示的值域范围，此范围外的数据将不制作图表
sectorStyle: {fillOpacity: 0.8}, // 柱状图中柱条的（表示字段值的图形）样式
sectorStyleByFields: [
{fillColor: "#FFB980"},
{fillColor: "#5AB1EF"},
{fillColor: "#B6A2DE"},
{fillColor: "#2EC7C9"},
{fillColor: "#D87A80"}],
sectorHoverStyle: {fillOpacity: 1},
xShapeBlank: [10, 10, 10], // 水平方向上的空白间距参数
axisYLabels: ["4万", "3万", "2万", "1万", "0"], // y 轴标签内容
axisXLabels: ["09年", "10年", "11年", "12年", "13年"], // x 轴标签内容
backgroundStyle: {fillColor: "#CCE8CF"}, // 背景样式
backgroundRadius: [5, 5, 5, 5], // 背景框圆角参数
};
//设置graphThemeLayer option参数
var themeLayerOptions = {
map: map,
attributions: " ",
themeFields: ["CON2009", "CON2010", "CON2011", "CON2012", "CON2013"],
opacity: 0.9,
chartsSetting: {},
};
//创建一个图表专题图层
var themeLayer = L.supermap.graphThemeLayer("BarLayer", "Bar", themeLayerOptions);
map.addLayer(themeLayer);