1.5.3.2.10.2 客户端专题图

优质

小牛编辑

126浏览

2023-12-01

客户端专题图是根据数据的形状和属性数据，在客户端进行相应计算，通过要素图层或任意图层赋予不同的绘制风格并在客户端进行专题图的展示。本节将介绍客户端专题图的实现方法。

单值专题图

单值专题图是将专题值相同的要素归为一类，为每一类设定一种渲染风格，如颜色或符号等，专题值相同的要素采用相同的渲染风格，从而用来区分不同的类别。

SuperMap iClient for OpenLayers 实现单值专题图代码如下：

//单值专题图图层资源
var themeSource = new ol.source.Unique("ThemeLayer", {
    //专题图ID
    map: map,
    attributions: " ",
    //专题图样式
    style: {
        shadowBlur: 3,
        shadowColor: "#000000",
        shadowOffsetX: 1,
        shadowOffsetY: 1,
        fillColor: "#FFFFFF"
    },
    //是否开启hover事件
    isHoverAble: true,
    //开启hover事件后，触发的样式风格
    highlightStyle: {
        stroke: true,
        strokeWidth: 2,
        strokeColor: 'blue',
        fillColor: "#00F5FF",
        fillOpacity: 0.2
    },
    //指定创建专题图字段
    themeField: "LANDTYPE",
});
//创建单值专题图图层
var themeLayer = new ol.layer.Image({
    source: themeSource
});

配置单值专题图的类型和颜色：

//单值专题类型样式组
styleGroups: [
    {
        value: "草地",
        style: {
            fillColor: "#C1FFC1"
        }
    },
    {
        value: "城市",
        style: {
            fillColor: "#CD7054"
        }
    },
    {
        value: "灌丛",
        style: {
            fillColor: "#7CCD7C"
        }
    }
];

查看完整示例代码

分段专题图

分段专题图是指按照某种分段方式被分成多个范围段，要素根据各自的专题值被分配到其中一个范围段中，在同一个范围段中的要素使用相同的颜色，填充，符号等风格进行显示。分段专题图所基于的专题变量必须为数值型，分段专题图一般用来反映连续分布现象的数量或程度特征，如降水量的分布，土壤侵蚀强度的分布等。

Supermap iClient for OpenLayers 实现分段专题图，主要代码如下：

//分段专题图图层资源
var themeSource = new ol.source.Range("ThemeLayer",{
    map: map,
    //版权信息
    attributions: " ",
    //分段专题图样式
    style: {
        shadowBlur: 16,
        shadowColor: "#000000",
        fillColor: "#FFFFFF"
    },
    //是否开启hover事件
    isHoverAble: true,
    //开启hover事件后，触发的样式风格
    highlightStyle: {
        stroke: true,
        strokeWidth: 4,
        strokeColor: 'blue',
        fillColor: "#00EEEE",
        fillOpacity: 0.8
    },
     //指定创建专题图字段
    themeField: "POP_DENSITY99",
    //配置分段专题类型样式组
    styleGroups: [
        {
            start: 0,
            end: 0.02,
            style: {
                color: '#FDE2CA'
            }
        },
        {
            start: 0.02,
            end: 0.04,
            style: {
                color: '#FACE9C'
            }
        }
    ];
});
//创建一个分段专题图层
var themeLayer = new ol.layer.Image({
    source: themeSource
});

查看完整示例代码

符号等级专题图

符号等级专题图根据各要素的某个数量特征，按照一定的分类方法用一组等级符号表示在地图上，以呈现要素间该数量特征的相对关系。

SuperMap iClient for OpenLayers实现符号等级专题图为例，主要代码如下：

//等级专题图图层资源
var themeSource = new ol.source.RankSymbol("RankSymbolLayer", "Circle",
    {
        map: map,
        attributions: " ",
        themeField: "CON2009",
        //配置图表参数
        symbolSetting: {
            //必设参数
            codomain: [0, 40000], // 允许图形展示的值域范围，此范围外的数据将不制作图图形
            //圆最大半径 默认100
            maxR: 100,
            //圆最小半径 默认0
            minR: 0,
            // 圆形样式
            circleStyle: {fillOpacity: 0.8},
            // 符号专题图填充颜色
            fillColor: "#FFA500",
            // 专题图hover 样式
            circleHoverStyle: {fillOpacity: 1}
        }
});
//创建一个等级符号专题图层
var themeLayer = new ol.layer.Image({
    source: themeSource
});

查看完整示例代码

标签专题图

地图上的必要的标注是必不可少的，不仅帮助用户更好的区分地物要素，同时也显示了要素的某些重要属性，如行政区划、河流、机关、旅游景点的名称、等高线的高程等。在 SuperMap 中，通过制作标签专题图，用户可以轻松的实现地图标注。

SuperMap iClient for OpenLayers 实现标签专题图，主要代码如下：

//标签专题图图层资源
var themeSource = new ol.source.Label("labelThemeLayer", {
    map: map,
    attributions: " ",
    //标签专题要素的 Style
    style: new SuperMap.ThemeStyle({
        labelRect: true,
        fontColor: "#000000",
        fontWeight: "bolder",
        fontSize: "18px",
        fill: true,
        fillColor: "#FFFFFF",
        fillOpacity: 1,
        stroke: false,
        strokeColor: "#8B7B8B"
    }),
    //指定创建专题图字段
    themeField: "aqi",
    //标签专题图类型样式组
    styleGroups: [
        {
            start: 0,
            end: 51,
            style: {
                fillColor: "#6ACD06",
                fontSize: "17px"
            }
        }, {
            start: 51,
            end: 101,
            style: {
                fillColor: "#FBD12A",
                fontSize: "19px"
            }
        },
    ];
});
//创建一个标签专题图层
var themeLayer = new ol.layer.Image({
    source: themeSource
});

查看完整示例代码

图表专题图

图表专题图是通过为每个要素或记录绘制统计图来反映其对应的专题值的大小。图表专题图可以基于多个变量，反映多种属性，即可以将多个专题值绘制在一个统计图上。通过统计专题图可以在区域本身与各区域之间形成横向和纵向的对比。多用于具有相关数量特征的地图上，比如表示不同地区多年的粮食产量、GDP、人口等，不同时段客运量、地铁流量等。

在图表专题图中，每个区域都会有一幅表示该区域各专题值的统计图，专题图有多种表现形式，目前提供的类型有：柱状图，折线图，三维柱状图，折线图，点状图，饼图，环装图，三维饼图，玫瑰图，三维玫瑰图，环状图。

SuperMap iClient for OpenLayers 实现图表专题图，主要代码如下：

// 柱状图和三维柱状图的图表配置
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 themeSource = new ol.source.Graph("BarLayer", "Bar", themeLayerOptions);
// 创建一个图表专题图层
var themeLayer = new ol.layer.Image({
    source: themeSource
});查看源码 »

查看完整示例代码