示例描述

该示例展示如何使用map.setData()更改用户数据。更改数据时注意使用map.setStyles()接口设置适用于数据的地图样式,如:分段范围等。

效果演示

示例代码

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src='http://dev.dituhui.com/sdk/1.0.0/js/dituhui-flash.js'></script>
  <script src='http://dev.dituhui.com/sdk/1.0.0/js/sample-data.js'></script>
  <script type="text/javascript" >
    var map = null;
    function init(){
     map = new Dituhui.Map("myMap", "http://dev.dituhui.com/sdk/1.0.0/swfs/", "100000", Dituhui.MapType.RANGE, "setData", "onError");
    }  
    var dataP = [{"name":"北京","出生率":"13.8","死亡率":"8.29"},
                {"name":"天津","出生率":"19.5","死亡率":"8.58"},
                {"name":"河北","出生率":"54.4","死亡率":"13.02"},
                {"name":"山西","出生率":"50.32","死亡率":"10.47"},
                {"name":"内蒙古","出生率":"43.38","死亡率":"8.94"},
                {"name":"辽宁","出生率":"35.95","死亡率":"5.71"},
                {"name":"吉林","出生率":"46.6","死亡率":"6.53"},
                {"name":"黑龙江","出生率":"43.5","死亡率":"6.99"},
                {"name":"上海","出生率":"10.7","死亡率":"6.97"},
                {"name":"江苏","出生率":"38.1","死亡率":"9.59"},
                {"name":"浙江","出生率":"37.7","死亡率":"9.47"},
                {"name":"安徽","出生率":"55.2","死亡率":"12.23"},
                {"name":"福建","出生率":"41.9","死亡率":"11.41"},
                {"name":"江西","出生率":"54.3","死亡率":"13.48"},
                {"name":"山东","出生率":"49.05","死亡率":"11.5"},
                {"name":"河南","出生率":"59.43","死亡率":"11.56"},
                {"name":"湖北","出生率":"48.17","死亡率":"10.39"},
                {"name":"湖南","出生率":"54.9","死亡率":"13.35"},
                {"name":"广东","出生率":"33.5","死亡率":"10.45"},
                {"name":"广西","出生率":"58.2","死亡率":"13.71"},
                {"name":"海南","出生率":"49.5","死亡率":"14.72"},
                {"name":"重庆","出生率":"44.98","死亡率":"9.88"},
                {"name":"四川","出生率":"58.17","死亡率":"9.79"},
                {"name":"贵州","出生率":"65.04","死亡率":"13.31"},
                {"name":"云南","出生率":"63.2","死亡率":"12.71"},
                {"name":"西藏","出生率":"77.29","死亡率":"15.39"},
                {"name":"陕西","出生率":"52.7","死亡率":"9.75"},
                {"name":"甘肃","出生率":"62.85","死亡率":"12.08"},
                {"name":"青海","出生率":"53.78","死亡率":"14.43"},
                {"name":"宁夏","出生率":"50.18","死亡率":"13.65"},
                {"name":"新疆","出生率":"56.46","死亡率":"14.99"}];
    var mapStyles = [
      {min:1,max:4},
      {min:4,max:8},
      {min:8,max:12},
      {min:12,max:16}];
    function setData()
    {
     var option = 
     {
      data: data, 
      styles:mapStyles, 
      valueField:'gdprate',
      backgroundColor:"#F5F5F5",
      legendTitle:"GDP增速%"
     };
     map.setMapOptions(option);
    }
    function onError(errorcode)
    {
     alert(errorcode);          
    }
    window.onload = init;
    function changeData(){
      var dataType=document.getElementById("data").value;
      switch(dataType){
        case "gdp":
          map.setValueField("gdprate");
          /*设置适用于数据的地图样式*/
          map.setStyles(mapStyles);   
          /*设置数据*/
          map.setData(data);
          break;
        case "population":
          var mapStylesP = [
            {min:0,max:42},
            {min:42,max:50},
            {min:50,max:55},
            {min:55,max:100}];
          map.setValueField("出生率");
          /*设置适用于数据的地图样式*/  
          map.setStyles(mapStylesP);   
          /*设置数据*/
          map.setData(dataP);
          break;
        default:
          break;
      }
    }
  </script>
  </head>
  <body>
    <label>切换制图数据: <select id="data" onchange="changeData()"> 
      <option value="gdp">2012GDP增长率</option>
      <option value="population">人口出生率与死亡率</option>
    </select></label>
    <div id='myMap' style='width:660px;height:600px'>
    </div>
  </body>
</html>