Echarts实战案例代码(11):利用geojson数据地图map组件生成js本地版直接访问的解决方案

series-map组件,在构建地理区域数据可视化时,一般是使用getJSON()来获取geojso数据,然后进行渲染。但是使用$.getJSON()就必须在http服务下进行访问,需要搭建http服务器。
代码如下:

 //调用地图geojson
    $.getJSON('geojson/au-all.geo.json', function (data) {
   //some codes;
   }

然后通过:http://test.com/进行预览访问。

能不能在本地直接点击访问呢?答案是肯定的。其步骤如下:

  1. 获取对应区域的geojson;
  2. 将geojson文件转换位js文件;
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    }
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    if (!echarts.registerMap) {
        log('ECharts Map is not loaded')
        return;
    }
    echarts.registerMap('lockdatav',
    //将geojson数据内容直接复制到该处即可;
    );
}));

将改JS文件保存为lockgeojson.js。

  1. html文件中直接调用lockgeojson.js;
    <!--对应的国家或地区JS文件-->
    <script type="text/javascript" src="js/lockgeojson.js"></script>
  1. echarts代码开发
series: [{
                type: 'map',
                map: 'lockdatav',//对应JS文件中地图的名称;
                roam: true,
                zoom: 1,
                aspectScale: 1,
                nameMap: {//自定义地区的名称映射
                    'South Australia': '南澳大利亚州',
                    'New South Wales': '新南威尔士州',
                    'Queensland': '昆士兰州',
                    'Tasmania': '塔斯马尼亚',
                    'Victoria': '维多利亚州',
                    'Western Australia': '西澳大利亚州',
                    'Australian Capital Territory': '澳大利亚首都领地',
                    'Northern Territory': '北领地',
                    'Norfolk Island': '诺福克岛',
                    'Jervis Bay Territory': '杰维斯湾地区',
                },
                label: {
                    normal: {
                        show: false,
                        color: "#fff"
                    },
                    emphasis: {
                        show: true,
                        color: "#fff"
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                },
            }]
  1. echarts自适应窗口;
 //渲染图表,并自适应窗口;
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });

Done!

©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值