梯度图组件

效果图

示例用法

<script type="text/javascript">
  var map,baseLayer,info,geojson,gradeLayer;
    function initMap(){
        map = W.map("mapContainer", {
            center : [35.53222622770337, 106.875],
            zoom : 4,
    serverUrl: 'http://localhost:8080/tileProxy'
        });
      var lengeds = [
      {
          from : 0,
          to : 10,
          lable : '0 -- 10',
          color : '#FFEDA0'
      },
      {
          from : 10,
          to : 20,        
          lable : '10 -- 20',
          color : '#FED976'
      },
      {
          from : 20,
          to : 30,
          lable : '20 -- 30',
          color : '#FEB24C'
      },
      {
          from : 30,
          to : 40,
          lable : '30 -- 40',
          color : '#FD8D3C'
      },
      {
          from : 40,
          to : 50,
          lable : '40 -- 50',
          color : '#FC4E2A'
      },
      {
          from : 50,
          to : 60,
          lable : '50 -- 60',
          color : '#E31A1C'
      },
      {
          from : 60,
          to : 80,
          lable : '60 -- 80',
          color : '#BD0026'
      },
      {
          from : 80,
          to : 100,
          lable : '80 -- 100',
          color : '#800026'
      }];
      var lengedOptions = {
        title : '图例属性',
        lengeds : lengeds,
        callback : {
            click : function(data, status){
                //console.log(status);
                //console.log(data);
            }
        }
    };
    //加载地图数据
    $.getJSON("geojson/province_s_pg.geojson", function(data){
        //为测试数据增加值域
        for(var i = 0; i < data.features.length; i++){
            var feature = data.features[i];
            //像feature插入 测试数据
            feature.properties['val'] = Math.random() * 70;//值字段
        }
        gradeLayer = W.grade(data,{
            lengedOptions: lengedOptions,
            valueFiled: 'val',//值字段
            infoParse: function(data){
                var html = "信息窗内容";
                html += "<table style='font-size: 12px'>";
                for(var key in data){
                    html += "<tr><td>" + key + "</td><td>" + data[key] + "</td></tr>";
                }
                html += "</table>";
                return html;
            }
        });
        map.addLayer(gradeLayer);
    });
    map.on("click", function(){
        if(gradeLayer){
            map.removeLayer(gradeLayer);
            gradeLayer = null;
        }else{
            //加载地图数据
            $.getJSON("geojson/province_s_pg.geojson", function(data){
                //为测试数据增加值域
                for(var i = 0; i < data.features.length; i++){
                    var feature = data.features[i];
                    //像feature插入 测试数据
                    feature.properties['val'] = Math.random() * 70;//值字段
                }
                gradeLayer = W.grade(data,{
                    lengedOptions: lengedOptions,
                    valueFiled: 'val',//值字段
                    infoParse: function(data){
                        var html = "信息窗内容";
                        html += "<table style='font-size: 12px'>";
                        for(var key in data){
                            html += "<tr><td>" + key + "</td><td>" + data[key] + "</td></tr>";
                        }
                        html += "</table>";
                        return html;
                    }
                });
                map.addLayer(gradeLayer);
            });
        }
    });
}
</script>

构造方法

构造属性