Echarts 地图添加自定义区域
使用 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 地图添加自定义区域的更多相关文章
- echarts地图扩展文件使用geoJson格式。
echarts地图扩展文件使用geoJson格式. 1.在线生成 http://ecomfe.github.io/echarts-map-tool/ 这里可以生成省市区的json,但是最多生成到”区 ...
- react使用echarts地图实现中国地图大区展示
日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...
- echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】
首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...
- Echarts 地图上显示数值
Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', ...
- Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...
- 工作中遇到的有关echarts地图和百度地图的问题
工作中遇到的有关echarts地图和百度地图的问题 *** 前言:在做项目中需要制作一个场景是左边是柱状图,右边是地图,地图上悬浮一个按钮可以切换echarts地图和百度地图.*** 功能: 在点击左 ...
- ios 地图，系统升级为12后，进入地图，大头针全部默认展开问题，以及在选择不同距离的情况下，如何刷新地图的区域范围
1.第一个问题,大头针在ios12,默认展开问题,需要设置大头针视图的默认选中属性为NO - (MKAnnotationView *)mapView:(MKMapView *)mapView view ...
- echarts 地图 动态 展示 结合css+js
echarts地图展示功能非常强大,官网上静态展示的样例非常多了,动态的资料少.研究了下.我眼下实现的通过ajax从server获取数据动态展示地图. 另外,我们有时候希望在地图之上做些自己定义的东西 ...
- 本周学习总结(原生+Echarts地图)
本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...
随机推荐
- hadoop2.6.0实践：000 虚拟机配置
- 新概念英语（1-57）An unusual day
新概念英语(1-57)An unusually day What is Mr. Sawyer doing tonight? It is eight o'clock. The children go t ...
- Bootstrap 栅格系统简单整理
Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 总结一下我近期的学习Bootstrap的一些理解: 一.. ...
- 转：java中Vector的使用
转:https://www.cnblogs.com/zhaoyan001/p/6077492.html Vector 可实现自动增长的对象数组. java.util.vector提供了向量类(vect ...
- dict的update方法
dict = {'Name': 'Zara', 'Age': 7} dict2 = {'Sex': 'female' } dict.update(dict2)输出结果:{'Age': 7, 'Name ...
- 使用requirejs来管理angularJS依赖示例
有关requirejs是什么在这里不做解释,只用纯代码实战让你感受requirejs依赖管理的强大. 一.首先要先下载require.js,然后整一个入口文件main.js包括了对其他js的引用. / ...
- js常用正则表达式表单验证代码
方法一: var re=/正则表达式/; re.test($("txtid").val()) 方法二: $("txtid").val.match(/正则 ...
- Python无法导入Cython的.pyx文件
在import 相应包之前, 添加: import pyximport pyximport.install() 即可.
- Jenkins: Can't connect to Docker daemon解决办法
Jenkins安装后首次使用报错: Jenkins: Can't connect to Docker daemon 解决办法: 参照StackOverflow 添加jenkins用户到dockergr ...
- HTML5中meta属性大集合
1.声明文档的字符编码 <meta charset='utf-8'> 2.声明文档的兼容模式 <meta http-equiv="X-UA-Compatible" ...