Echarts 地图添加自定义区域

使用 Echarts 生成地图时,如果需要添加一些自定义区域,该怎么做呢?请看下面示例。

生成原始地图

index.hmtl

引入 Jquery 和 Echarts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts 地图添加自定义区域</title>
    <script></script>
    <script src="./js/jquery-1.9.1.min.js"></script>
    <script src="./js/echarts.js"></script>
    <script src="./js/map.js"></script>
</head>
<body>
<div id="map" style="width: 1500px;height: 800px;"></div>
</body>
</html>

map.js

var map = {
    init : function () {
        map.getMapData();
    },

    getMapData : function () {
        $.getJSON("./mapdata/china.json", function (data) {
            if(data != null) {
                echarts.registerMap("china", data);// 注册地图
                var mapData = [];
                var features = data.features;
                $.each(features, function(i, item) {
                    mapData.push({id : i+1, name: item.properties.name});
                })
                map.renderMap(mapData);
            }
        })
    },

    renderMap : function (data) {
        var chart =  echarts.init(document.getElementById("map"));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            series: [
                {
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    selectedMode : 'multiple',
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data : data
                }
            ]
        }
        chart.setOption(option);
    }
}

$(function () {
    map.init();
})

在浏览器打开 index.html,样式如下:

这时,一个简单的中国地图就已经生成了。接下来,我们在这个地图的基础上添加一个自定义区域。

添加自定义区域

在 map.js 中,我们使用 $.getJson()方法读取 ./mapdata/china.json 文件来获取地图数据。该文件是一个 geojson 文件,地图就是根据该文件中的数据生成的。所以,我们想要添加自定义区域,就必须修改该 geojson 文件。

但是,怎么修改呢?手动修改肯定是不可取的,因为 geojson 文件里有许多属性,改起来麻烦而且容易出错。有个专门处理 geojson 的网站可以帮我们解决这个问题。

打开网站 http://geojson.io/,界面如下:

导入 china.json 文件,使用画图工具添加区域

保存 geojson 文件,将其内容全部复制粘贴到项目的 china.json 文件中

在浏览器打开 index.html,样式如下:

可以看到,自定义区域已经成功添加上了。

示例 Github 地址:echarts-custom-map

转载于:https://www.cnblogs.com/wenbingyin/p/8946025.html

  • 2
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值