自定义一个中国七大区域geo.json文件,在地图事件响应,切换区域时,点击无反应,报“无法获取属性“getGeoJson”的值: 对象为 null 或未定义”错误

内力哥 发布于 2015/06/03 23:10
阅读 1K+
收藏 0

@Kener-林峰 你好,想跟你请教个问题:想做一个全国7大区域地图,点击区域显示该区域的各个省,自己写了一个分区的geoJson文件。以下是事件响应,切换区域js代码

        require(
                 [
                     'echarts',
                     'echarts/chart/map' //按需加载
                 ],
                 function (ec) {
                  require('echarts/util/mapData/params').params.area = {
                       getGeoJson: function (callback) {
                           $.getJSON('geoJson/area.geo.json',callback);
                       }
                    };
                 
                  require('echarts/util/mapData/params').params.db = {
                         getGeoJson: function (callback) {
                             $.getJSON('geoJson/db.geo.json',callback);
                         }
                   };
                  require('echarts/util/mapData/params').params.hb = {
                         getGeoJson: function (callback) {
                             $.getJSON('geoJson/hb.geo.json',callback);
                         }
                   };
                  require('echarts/util/mapData/params').params.hd = {
                         getGeoJson: function (callback) {
                             $.getJSON('geoJson/hd.geo.json',callback);
                         }
                   };
                  require('echarts/util/mapData/params').params.hn = {
                         getGeoJson: function (callback) {
                             $.getJSON('geoJson/hn.geo.json',callback);
                         }
                   };
                  require('echarts/util/mapData/params').params.hz = {
                         getGeoJson: function (callback) {
                             $.getJSON('geoJson/hz.geo.json',callback);
                         }
                   };
                  require('echarts/util/mapData/params').params.xb = {
                         getGeoJson: function (callback) {
                             $.getJSON('geoJson/xb.geo.json',callback);
                         }
                   };
                  require('echarts/util/mapData/params').params.xn = {
                       getGeoJson: function (callback) {
                           $.getJSON('geoJson/xn.geo.json',callback);
                       }
                  };
                 
                  var myChart = ec.init(document.getElementById('main'));
                  var ecConfig = require('echarts/config');
                  var zrEvent = require('zrender/tool/event');
                  var curIndx = 0;
                  var mapType = [
                     'area','db','hb','hd','hn','hz','xn','xb'
                  ];
                 
                  myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
                     var len = mapType.length;
                     var mt = mapType[curIndx % len];
                     if (mt == 'area') {
                         // 全国选择时指定到选中的省份
                         var selected = param.selected;
                         for (var i in selected) {
                             if (selected[i]) {
                                 mt = i;
                                 while (len--) {
                                     if (mapType[len] == mt) {
                                         curIndx = len;
                                     }
                                 }
                                 break;
                             }
                         }
                         option.tooltip.formatter = '滚轮切换省份或点击返回全国<br/>{b}';
                     }
                     else {
                         curIndx = 0;
                         mt = 'area';
                         option.tooltip.formatter = '滚轮切换或点击进入该省<br/>{b}';
                     }
                     option.series[0].mapType = mt;
                     option.title.subtext = mt + ' (滚轮或点击切换)';
                     myChart.setOption(option, true);
                  });

以下是area.geo.json文件部分内容

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": "db",
            "properties": {
                "name": "东北地区",
                "cp": [
                    128.1445,
                    45.5156
                ],
                "childNum": 3
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            121.4648,
                            53.3496
                        ],

                     ....................

                    ]
                ]
            }
        },
    {
            "type": "Feature",
            "id": "hb",
            "properties": {
                "name": "华北地区",
                "cp": [
                    115.1551,
                    42.2539
                ],
                "childNum": 5
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            117.4219,
                            40.21
                        ],

                   ....................
                    ]
                ]
            }
        }

],
    "srcSize": {
        "left": 243.4766,
        "top": 36.4307,
        "width": 61.6113,
        "height": 35.4638
    }
}








加载中
返回顶部
顶部