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

生成原始地图

index.hmtl

引入 Jquery 和 Echart

<!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

Echarts 地图添加自定义区域的更多相关文章

  1. echarts地图扩展文件使用geoJson格式。

    echarts地图扩展文件使用geoJson格式. 1.在线生成 http://ecomfe.github.io/echarts-map-tool/  这里可以生成省市区的json,但是最多生成到”区 ...

  2. react使用echarts地图实现中国地图大区展示

    日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...

  3. echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】

    首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...

  4. Echarts 地图上显示数值

    Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', ...

  5. Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据

    在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...

  6. 工作中遇到的有关echarts地图和百度地图的问题

    工作中遇到的有关echarts地图和百度地图的问题 *** 前言:在做项目中需要制作一个场景是左边是柱状图,右边是地图,地图上悬浮一个按钮可以切换echarts地图和百度地图.*** 功能: 在点击左 ...

  7. ios 地图，系统升级为12后，进入地图，大头针全部默认展开问题，以及在选择不同距离的情况下，如何刷新地图的区域范围

    1.第一个问题,大头针在ios12,默认展开问题,需要设置大头针视图的默认选中属性为NO - (MKAnnotationView *)mapView:(MKMapView *)mapView view ...

  8. echarts 地图 动态 展示 结合css+js

    echarts地图展示功能非常强大,官网上静态展示的样例非常多了,动态的资料少.研究了下.我眼下实现的通过ajax从server获取数据动态展示地图. 另外,我们有时候希望在地图之上做些自己定义的东西 ...

  9. 本周学习总结(原生+Echarts地图)

    本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...

随机推荐

  1. java程序员最不愿意看到的十件事

     0.遍历结果集并构造对象如果你是个时髦的开发者而不是专业人员,显然你从某篇博客中读过有开发者遇到Hibernate的“性能问题”,因而认为ORM都不好,觉得手动编码“明显更好”.喜欢的话你当然可以用 ...

  2. C# 解析json数据出现---锘縖

    解析json数据的时候出现 - 锘縖,不知道是不是乱码,反正我是不认识这俩字.后来发现是json的 '[' 字符转换的 网上搜了一下,说的是字符集不匹配,把字符集改为GB2312. 一.贴下处理jso ...

  3. DevExpress 控件中GridControl的使用

    近期开发用到了DevExpress系列的控件,GridControl是我用到的Dev系列控件最多的一个控件.现在先来总结一下: 首先先写一个简单的小例子来简单介绍一下GridControl的用法: 1 ...

  4. io使用的设计模式

    File f = new File("c:/a.txt"); 1. FileInputStream fis = new FileInputStream(f); 2. Reader ...

  5. PyQt5--基础篇：用eric6工具实现三级联动效果

    今天给大家介绍下python gui界面的三级联动效果,我们用工具eric6来实现,先看下效果图. 首先我们先创建项目linkage,再新建窗体进入到Qt设计师工具开始设计界面,完成后保存并退出. 在 ...

  6. 深入理解Javascript单线程谈Event Loop

    假如面试回答js的运行机制时,你可能说出这么一段话:"Javascript的事件分同步任务和异步任务,遇到同步任务就放在执行栈中执行,而碰到异步任务就放到任务队列之中,等到执行栈执行完毕之后 ...

  7. Mysql 库表

    create database student_info default character set utf8 collate utf8_general_ci; ------------------- ...

  8. js正则表达式入门以及常见用例

    学习正则表达式的最好方法是从例子开始,理解例子之后再自己对例子进行修改,实验.下面给出了不少简单的例子,并对它们作了详细的说明. 假设你在一篇英文小说里查找hi,你可以使用正则表达式hi. 这几乎是最 ...

  9. ［转］map函数补充

    map()函数 map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. 例如,对于li ...

  10. Spring Cloud学习笔记-002

    搭建Spring Cloud注册中心:Eureka 服务注册:在服务治理框架中,通常都会构建一个注册中心,每个服务单元向注册中心登记自己提供的服务,将主机与端口号.版本号.通信协议等一些附加信息告诉注 ...