Thematic Maps by Server


SuperMap REST map service supports directly sending REST request to make thematic maps. iClient provides interface(SuperMap.REST.ThemeService) to receive SuperMap REST map service. This sample shows you, with the REST map service (map_China4003/rest) and the ThemeService interface, how to use the SMAREA field of the China_Province_R layer to make Ranges Thematic Map.

If you needs your own business data to make thematic map, you can publish the data to the REST map service first, and then follow this sample.

Step 1 Initialize the map

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

Step 2 Customize the ranges and styles

As for making ranges thematic map, you should set the start value and the end value for each range, and specify the style for each range, including the style of width, color, fill color, etc.

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

Step 3 In accordance with the range values, make ranges thematic map with the SMAREA field of the China_Province_R layer

In accordance with the defined range and style and the ThemeService interface, you can send the request to the server to make ranges thematic map. After getting the returned thematic map layer, you can set its opacity, caches, and overlay the layer to your map.

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

Online Demo and Code Editing

You can view the complete code online and experience the demonstration effect, and you can also edit the online code to check the result immediately.