Example: Polygon Gradient


Step1 Prepare data and service

This sample uses the following data and service:

  • Base map: The map "map_China4003" published by SuperMap Online

  • The vector data of contours: animationPolygonData.js. The data has contour lines for 7 temperatures in 4 different time frames.

Step2 Define displaying styles for dynamic layer

Define displaying styles, e.g. fill color, for the gradual changes of polygons. Here we use 7 different colors.


    //Define the style for gradual changes
    var style1 = {
        fillColor: "#b6fb7e",
        fillOpacity: 0.2,
        strokeOpacity: 0
    };
    var style2 =
    {
        fillColor: "#ffff00",
        fillOpacity: 0.2,
        strokeOpacity: 0
    };

    var style3 =
    {
        fillColor: "#efad3b",
        fillOpacity: 0.2,
        strokeOpacity: 0
    };

    var style4 =
    {
        fillColor: "#ef8425",
        fillOpacity: 0.2,
        strokeOpacity: 0
    };

    var style5 =
    {
        fillColor: "#ef255e",
        fillOpacity: 0.2,
        strokeOpacity: 0
    };

    var style6 =
    {
        fillColor: "#f80f1a",
        fillOpacity: 0.2,
        strokeOpacity: 0
    };

    var style7 =
    {
        fillColor: "#ff000",
        fillOpacity: 0.2,
        strokeOpacity: 0
    };

Step3 Initialize base map

Initialize the base map. In this sample, we use maps that are published by SuperMap Online.

    var map, layer, animatorVector, 
        url = "http://www.supermapol.com/iserver/services/map_China4003/rest/maps/China";

    var value="IbooSg6gIBmhIRaesVgjSED0",
        name = "key";

    SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, "key");
    function init() {
        if (!document.createElement('canvas').getContext) {
            alert(' Your browser doesn't support canvas, please upgrade');
            return;
        }

        // Initialize base map
        map = new SuperMap.Map("map", {
            controls: [
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })],
            projection: "EPSG:3857"
        });
    ……

    }

Step4 Initialize base map and dynamic layer

Initialize the base map. Here we use the dynamic tiles of the map "China".

Initialize the dynamic layer "Polygon" and set the animation speed, start time, end time, and rendering frequency

        // Initialize map layer
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null,{maxResolution:"auto"});
        //Initialize the dynamic layer
        animatorVector = new SuperMap.Layer.AnimatorVector("Polygon", {}, {
            // Set the animation speed to display the data of 0.01 hour with 1 frame
            speed: 0.01,
            // Set the start time as 12 o' clock
            startTime: 12,
            // Render the data 12 times per second
            frameRate: 12,
            // Set the end time as 15 o' clock
            endTime: 15
        });

Step5 Show the effect of gradual change

Show the contour polygons in a dynamically and gradually changing style:

  • Get four contour lines of temperatures for different time frames from the file: animationPolygonData.js, and convert the contour lines to polygons.

  • Based on the predefined styles, set the styles for temperatures from 31 to 32 degrees.

  • Add the contour polygons and their attribution, including their IDs, time, etc to the object animatorVector.


    // Add polygon data
    function addPolygon() {
        var regionFeatures = [];
        for (var i = 0, len = lines.length; i < len; i++) {
            var arr = [];
            for (var j = 0; j < lines[i][3].length; j++) {
                var point = new SuperMap.Geometry.Point(lines[i][3][j][0], lines[i][3][j][1]);
                arr.push(point);
            }
            var line = new SuperMap.Geometry.LinearRing(arr);
            var region = new SuperMap.Geometry.Polygon([line]);
            var style;
            if (lines[i][2] == 31) {
                style = style1;
            }
            else if (lines[i][2] == 32) {
                style = style2;
            }
            else if (lines[i][2] == 33) {
                style = style3;
            }
            else if (lines[i][2] == 34) {
                style = style4;
            }
            else if (lines[i][2] == 35) {
                style = style5;
            }
            else if (lines[i][2] == 36) {
                style = style6;
            }
            else if (lines[i][2] == 37) {
                style = style7;
            }
            var regionFeature = new SuperMap.Feature.Vector(region, {
                FEATUREID: lines[i][0],
                TIME: lines[i][1],
                TEMPERATURE: lines[i][2]
            }, style);
            regionFeatures.push(regionFeature);
        }
        animatorVector.addFeatures(regionFeatures);
    }

    // Play the animation
    function startAnimator() {
        animatorVector.animator.start();
    }
    //Stop the animation
    function pauseAnimator() {
        animatorVector.animator.pause();
    }

Step6 Add layer to map

Add the base map and dynamic layer to the map.


    // The event for monitoring that the loading of the layer info is completed.
    layer.events.on({"layerInitialized":function(){
        map.addLayers([layer, animatorVector]);
        map.addControl(selectFeature);
        selectFeature.activate();
        map.setCenter(new SuperMap.LonLat(11586634.286396, 3588716.5813769), 12);
        //Add data
        addPolygon();
    }});
    var selectFeature = new SuperMap.Control.SelectFeature(animatorVector, {
        onSelect: function(fe){
            console.log(fe);
        },
        hover: false
    });

Online Demo and Code Editing

You can access the online source code and visualize the demo. You can also edit the source code and change the demo.