世界各个国家echarts地图展示
因为有时候业务需求需要实现展示某个国家地图,但是目前资源我们很难找到有些国家的地图json数据,我就从某个地图应用中提取 了全世界地图的json源数据,下面提供关于源数据的处理,将其转换成我们需要的多边形json数据。
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script src="jquery-1.9.1.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
$.get('Kazakhstan.json', function (KazakhstanJson) {
myChart.hideLoading();
echarts.registerMap('Kazakhstan', KazakhstanJson);
option = {
title: {
text: 'USA Population Estimates (2012)',
subtext: 'Data from www.census.gov',
sublink: 'http://www.census.gov/popest/data/datasets.html',
left: 'right'
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params) {
var value = (params.value + '').split('.');
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
return params.seriesName + '<br/>' + params.name + ': ' + value;
}
},
visualMap: {
left: 'right',
min: 500000,
max: 38000000,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
},
text:['High','Low'], // 文本,默认为数值文本
calculable: true
},
toolbox: {
show: true,
//orient: 'vertical',
left: 'left',
top: 'top',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [
{
name: 'USA PopEstimates',
type: 'map',
roam: true,
map: 'Kazakhstan',
itemStyle:{
emphasis:{label:{show:true}}
},
// 文本位置修正
textFixed: {
Alaska: [20, -20]
},
data:[
{name: 'URAL SK', value: 4822023},
{name: 'GUR YEV', value: 731449},
{name: 'OSTROV NORDVESTINSKIY#GUR YEV', value: 6553255},
{name: 'MANGYSHLAK', value: 2949131},
{name: 'KZYL-ORDA', value: 38041430},
{name: 'OSTROV KULALY#MANGYSHLAK', value: 5187582},
{name: 'AKTYUBINSK', value: 3590347},
{name: 'NORTH KAZAKHSTAN', value: 917092},
{name: 'KUSTANAY', value: 632323},
{name: 'TSELINOGRAD', value: 19317568},
{name: 'TURGAY', value: 9919945},
{name: 'KARAGANDA', value: 1392313},
{name: 'PAVLODAR', value: 1595728},
{name: 'ALMA-ATA', value: 12875255},
{name: 'SEMIPALATINSK', value: 4822023},
{name: 'EAST KAZAKHSTAN', value: 731449},
{name: 'DZHEZKAZGAN', value: 6553255},
{name: 'TALDY KURGAN}', value: 2949131},
{name: 'CHIMKENT', value: 38041430},
{name: 'DZHAMBUL', value: 5187582}
]
}
]
};
myChart.setOption(option);
});;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
关于数据源Kazakhstan.json的处理
世界源文件的数据摘取一个地图应用的程序,格式为sql形式。当前数据是经过初次处理的,格式,中间的逗号,问好都经过处理。假如我需要制作哈萨克斯坦Kazakhstan国家的地图数据,需要以下步骤。
首先我们筛选出哈萨克斯坦国家的数据,通过程序将当前文件通过代码将sql形式数据转换为地图多边形数据。
package cn.com.util;
import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class SourceSolve {
public static void main(String[] args) throws IOException {
SourceSolve();
AutoPackage();
}
private static void SourceSolve() throws FileNotFoundException, IOException {
BufferedReader br = new BufferedReader(new InputStreamReader(new FileInputStream(new File("C:/Users/Administrator/Desktop/Mapdata/sourceFile.txt"))));
BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(new File("C:/Users/Administrator/Desktop/Mapdata/resultFile.txt"))));
String name = "";
String length = "";
//筛选名字的正则
String regex = "[1-9]{5}(.*?)BM";
Pattern pattern = Pattern.compile(regex);
while((length=br.readLine())!=null) {
int indexOf = length.indexOf("[[[");
Matcher matcher = pattern.matcher(length);
length = length.substring(indexOf).replaceAll("\\)", "").replace("\'", "").replaceAll(";", "");
if(matcher.find()) {
name = matcher.group(1).replaceAll("'", "").replaceAll(",", "");
}
bw.write(name+"---"+length+"\n");
}
br.close();
bw.close();
}
private static void AutoPackage() throws FileNotFoundException, IOException {
BufferedReader br = new BufferedReader(new InputStreamReader(new FileInputStream(new File("C:/Users/Administrator/Desktop/Mapdata/head.txt"))));
String data = "";
int count = 0 ;
String head = "";
String body = "";
while((data=br.readLine())!=null) {
if(count==0) {
head = data;
}else{
body = data;
}
count ++;
}
br.close();
String result = head;
BufferedReader br2 = new BufferedReader(new InputStreamReader(new FileInputStream(new File("C:/Users/Administrator/Desktop/Mapdata/resultFile.txt"))));
String data2 = "";
String name = "";
String datas = "";
while((data2 = br2.readLine())!=null) {
String[] split = data2.split("---");
name = split[0];
datas = split[1];
System.out.println(data2);
result += body.replaceAll("ANDHRA,PRADESH", name) + datas + "}},"+"\n";
}
br2.close();
result += "]}";
BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(new File("C:/Users/Administrator/Desktop/Mapdata/packageFile.txt"))));
bw.write(result);
bw.close();
}
}
处理完成后的json数据是如下这样
楼主写的程序会有点小问题,就是有时候筛选出来的数据正则匹配不是很完全,一般去寻找处理后的文件是否存在 ( 或者 )类似的字符,处理完成即可。以下是缅甸的地图
此地图会出现的一个小问题是,最开始从地图应用中提取的json数据,总体会在地图上加入经纬线,情况如下
可以按照可以的需求对这个进行筛选。一般这条线都是该地区各个轮廓中相同的点造成的,只需要找出上下两块地区的数据,找出相同的然后将其接起来就可以解决。这种程序代码很简单,这里就不写了。
大致的流程就是这样。
以下是几个案例展示,有的调了样式,有的没有调样式。
Kazakhstan
India
已经筛选出世界各国的json文件
下载路径为
https://download.csdn.net/download/dalton2017/10539660
世界各个国家echarts地图展示相关推荐
- echarts 地图展示乡镇数据
echarts 地图展示乡镇数据 获取乡镇数据 修改echarts以支持GeometryCollection 合并GeoJson数据 获取乡镇数据 阿里DataV 只支持到区县级别的GeoJson数据 ...
- echarts世界各个国家的地图
https://github.com/echarts-maps/echarts-countries-js/blob/master/demo.js 记录了echarts中画图包括世界各个国家的图
- 自定义echarts地图展示行政区域
展示全国前十数据省份及数据大小如图 echarts地图设置map默认显示中国地图,若想自定义各省市县地图需要先引入当地数据资源json文件 以沈阳为例 首先引入沈阳json文件 如下 import s ...
- vue使用Echarts地图展示并标注坐标点、点击进入省市子区域地图
1.安装echarts依赖 npm install echarts --save 2.main.js中引入echarts import echarts from 'echarts';//引入echar ...
- echarts 地图展示数据错误/中国地图显示异常
不酱油了.直接上干货. 问题一:显示以上图片说明你给编码不是utf-8.你只需要修改一下你的jsp /html的编码格式就ok了. 问题二:有的修改完以后显示的不是你的统计的value的值,显示的是省 ...
- 【Echarts】echarts地图展示、自定义点位、地图及点位的点击事件
项目中用到地图,之前看到ecarts的地图功能觉得合适,先看看效果图: 1.首先在阿里数据可视化平台下载需要地区的JSON文件:数据可视化 2.下载安装echarts.vue.axios 数据格式(必 ...
- 最新中国省市区县geoJSON格式地图数据Echarts地图数据
最新全国省市区县geoJSON格式的地图数据,可直接用于echarts地图展示: https://github.com/lyhmyd1211/GeoMapData_CN 全国地图: china.jso ...
- 实时最新中国省市区县geoJSON格式地图行政边界数据Echarts地图数据(可精确到街道级)
geojson 数据下载地址:https://hxkj.vip/demo/echartsMap/ 可下载的数据包含省级geojson行政边界数据.市级geojson行政边界数据.区/县级geojson ...
- Echarts实战案例代码(10):echarts结合世界所有国家地图数据集geojson的(英文翻译映射)解决方案
国外地图,默认GeoJSON文件为英文,为了阅读友好化体验,一般需要将地区的名称翻译成中文. 一种方式是修改GeoJSON文件内部,找到对应地区的name属性,直接替换成相应的中文即可,这种方式在众多 ...
- echarts 地图 dispatchaction不好使_数据分析帝:广东省客户数量地图展示,如何通过python实现?...
上周在给公司做数据时,在展示数据到了展示公司在广东省内客户数量时候,机械性的用了柱状图,回家路上想了一下,是否可以有别的.更好的展示方式呢?于是就想到了用地图展示,常用地图展示有以下几种方式: 1.P ...
最新文章
- wamp php非线程安全,wampserver PHP多版本切换
- [WF4.0]工作流设计器Rehosting(一)
- jquery页面滚动显示浮动菜单栏锚点定位效果
- 嵌套字典|python_Python | 如果不是,则使用嵌套,根据销售额计算折扣
- Oracle的直方图试验
- python生成正态分布数据_python 生成正态分布数据,并绘图和解析
- java 中 正则 正则表达式 匹配 url
- 【elasticsearch】elasticsearch 精确匹配 与 全文搜索
- php7 mcrypt模块_Linux下PHP安装mcrypt扩展模块笔记
- hdu 1421 搬寝室
- IIS 搭建简单网站 并 发布项目
- 2019年架构软考论文押题(一)
- APP导航菜单系列Axure模板原型
- 丰厚资本杨守彬:创业就是从地狱到天堂,路过人间而已
- JMeter详细使用手册
- 双目测距算法matlab模拟,基于BM算法的双目测距.pdf
- 四季芬芳,花开不只在春天
- 电脑桌面图片变成白色的解决方案
- 90个外国英文网站强力推荐
- 介绍几款最优秀的CMS(网站内容管理系统)
热门文章
- 从零开始:微信小程序零基础入门宝典
- Java随笔记录第二章:输入输出流程控制
- springboot 多模块 Found multiple @SpringBootConfiguration annotated classes
- linux文件空洞与稀疏文件,Linux文件空洞与稀疏文件
- 软件工程作业——《人件》读书笔记
- 一个游戏程序员的学习资料(全是好书)
- 单元测试总结反思_单元考试反思总结
- 做后端开发需要学什么?标梵看到了一条小白的发展之路
- oracle+归档时间设置,oracle 归档设置
- Cython 的简要入门、编译及使用