服务器端专题图

SuperMap的REST地图服务支持直接通过发送REST请求制作专题图。iClient提供了SuperMap.REST.ThemeService来对接SuperMap的REST地图服务。本例将带您通过ThemeService接口，使用REST地图服务(map_China4003/rest)，对China_Province_R图层中的SMAREA字段，制作分三个值阈区间的分段专题图。

如果需要使用您自己的业务数据制作专题图，则可以先把数据发布成REST地图服务，然后采用本例的方式来制作。

Step1 初始化地图

var map, local, baseLayer, layersID, themeLayer,
    url = "http://www.supermapol.com/iserver/services/map_China4003/rest/maps/China";
var value="IbooSg6gIBmhIRaesVgjSED0";
var name = "ak";
SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, "ak");

function init(){
    map = new SuperMap.Map("map",{controls: [
        new SuperMap.Control.LayerSwitcher(),
        new SuperMap.Control.ScaleLine(),
        new SuperMap.Control.Zoom(),
        new SuperMap.Control.Navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        })]
                                                             });
    baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer("China400", url, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
    baseLayer.events.on({"layerInitialized":addLayer});
}

function addLayer() {
    map.addLayer(baseLayer);
    map.setCenter(new SuperMap.LonLat(12080677, 4591416), 4);
    map.allOverlays = true;
}

Step2 定义专题值的分段区间及其样式

制作分段专题图时，需要为每一段设置分段的起始值和终止值，并指定其显示样式，包括线宽、颜色，以及填充颜色等。

var style1 = new SuperMap.REST.ServerStyle({
                fillForeColor: new SuperMap.REST.ServerColor(137,203,187),
                lineColor: new SuperMap.REST.ServerColor(0,0,0),
                lineWidth: 0.1
            }),
    style2 = new SuperMap.REST.ServerStyle({
        fillForeColor: new SuperMap.REST.ServerColor(233,235,171),
        lineColor: new SuperMap.REST.ServerColor(0,0,0),
        lineWidth: 0.1
    }),
    style3 = new SuperMap.REST.ServerStyle({
        fillForeColor: new SuperMap.REST.ServerColor(135,157,157),
        lineColor: new SuperMap.REST.ServerColor(0,0,0),
        lineWidth: 0.1
    }),
    themeRangeIteme1 = new SuperMap.REST.ThemeRangeItem({
        start: 0,
        end: 500000000000,
        style: style1
    }),
    themeRangeIteme2 = new SuperMap.REST.ThemeRangeItem({
        start: 500000000000,
        end: 1000000000000,
        style: style2
    }),
    themeRangeIteme3 = new SuperMap.REST.ThemeRangeItem({
        start: 1000000000000,
        end:  3000000000000,
        style: style3
    }),
    themeRange = new SuperMap.REST.ThemeRange({
        rangeExpression: "SMAREA",
        rangeMode: SuperMap.REST.RangeMode.EQUALINTERVAL,
        items: [themeRangeIteme1,themeRangeIteme2,themeRangeIteme3]
    });

Step3 基于分段值对China_Province_R图层中的SMAREA字段制作专题图

根据定义的分段和样式，通过ThemeService接口，即可向服务器端发送请求制作分段专题图。获取返回的专题图层，然后设置透明度、缓存等，最后将图层叠加到地图上展示。

function addThemeRange() {
    removeTheme();
    var themeService = new SuperMap.REST.ThemeService(url, {eventListeners:{"processCompleted": themeCompleted, "processFailed": themeFailed}}),

        themeParameters = new SuperMap.REST.ThemeParameters({
          datasetNames: ["China_Province_R"],
          dataSourceNames: ["China400"],
          joinItems: null,
          themes: [themeRange]
    });
    themeService.processAsync(themeParameters);
}

function themeCompleted(themeEventArgs) {
    if(themeEventArgs.result.resourceInfo.id) {
        themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer("中国各省面积_分段专题图", url, {cacheEnabled:false,transparent: true,layersID: themeEventArgs.result.resourceInfo.id}, {"maxResolution":"auto"});
        themeLayer.events.on({"layerInitialized":addThemelayer});

    }
}
function addThemelayer() {
    map.addLayer(themeLayer);
}

在线演示与源码编辑

您可以在线访问完整代码、体验演示效果，也可以直接在线编辑源码并实时查看效果。

• 在线演示
• 源码编辑