欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-11 16:22:50
series-map组件,在构建地理区域数据可视化时,一般是使用getJSON()来获取geojso数据,然后进行渲染。但是使用$.getJSON()就必须在http服务下进行访问,需要搭建http服务器。代码如下: //调用地图geojson $.getJSON('geojson/au-all.geo.json', function (data) { //some codes; }然后通过:http://test.com/进行预览访问。能不能在本地直接点击访问呢?答案是肯定的...

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!

本文地址:https://blog.csdn.net/weixin_41290949/article/details/107375048