示例：通过面渐变模拟时空变化

Step1 准备数据和服务

本例中使用的数据和服务包括：

• 底图：SuperMap Online发布的地图服务 map_China4003

• 用于绘制动态图层的等高线数据：animationPolygonData.js，包含四个不同时刻下（时间数据），7个不同温度值的等高线（空间数据）

Step2 定义动态图层显示的风格样式

为面渐变图层定义填充颜色等风格样式，本例定义了7个不同的颜色层次。

    //定义面渐变的样式
    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 初始化地图

初始化地图，本例使用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('您的浏览器不支持 canvas，请升级');
            return;
        }

        //初始化地图
        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 初始化底图和动态图层

初始化底图，使用China中的动态瓦片。

初始化动态渲染图层Polygon，设置播放速度、开始时间、结束时间，以及每秒的渲染次数。

        //初始化图层
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null,{maxResolution:"auto"});
        //初始化动画矢量图层
        animatorVector = new SuperMap.Layer.AnimatorVector("Polygon", {}, {
            //设置速度为每帧播放0.01小时的数据
            speed: 0.01,
            //开始时间为12点
            startTime: 12,
            //每秒渲染12次
            frameRate: 12,
            //结束时间为15点
            endTime: 15
        });

Step5 实现面图层渐变效果

实现等温面的动态渐变效果：

• 从animationPolygonData.js中读取不同时刻的各四条等温度线数据lines，并把等温线转成等温面。

• 根据预设的风格样式，为温度从31到32分别设置颜色等风格样式。

• 把等温面几何要素及其ID、时间等属性信息添加到animatorVector中。

    //添加面数据
    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);
    }

    //开始播放动画
    function startAnimator() {
        animatorVector.animator.start();
    }
    //暂停播放动画
    function pauseAnimator() {
        animatorVector.animator.pause();
    }

Step6 把图层添加到地图上

把底图和动态面图层添加到地图上。

    //监听图层信息加载完成事件
    layer.events.on({"layerInitialized":function(){
        map.addLayers([layer, animatorVector]);
        map.addControl(selectFeature);
        selectFeature.activate();
        map.setCenter(new SuperMap.LonLat(11586634.286396, 3588716.5813769), 12);
        //增加数据
        addPolygon();
    }});
    var selectFeature = new SuperMap.Control.SelectFeature(animatorVector, {
        onSelect: function(fe){
            console.log(fe);
        },
        hover: false
    });

在线演示与源码编辑

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

• 在线演示

• 编辑源码