服务器端专题图


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);
}

在线演示与源码编辑

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