世界各个国家echarts地图展示

最新推荐文章于 2024-06-19 15:10:02 发布
最新推荐文章于 2024-06-19 15:10:02 发布
阅读量1.9w 收藏 7
点赞数 7
分类专栏： echarts 前端地图展示 文章标签： 国家 地图 json 世界各国
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dalton2017/article/details/80352085
版权

因为有时候业务需求需要实现展示某个国家地图，但是目前资源我们很难找到有些国家的地图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

没想到取啥名
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
echart美国地图
10-12
echart美国地图
echarts 地图 中文,英文世界地图等
05-06
中文地图通常用于展示中国各个省份和城市的分布，而英文世界地图则可以用于全球视角的数据分析和展示。 `.js` 和 `.json` 格式的文件是 ECharts 地图数据常见的存储方式。`.js` 文件可能是包含地图配置和数据的 ...
Echarts实现可视化世界地图——Vue
热门推荐
K563161969的博客
12-17 1万+
Echarts实现可视化世界地图——Vue
echart实现3D地球和地图
最新发布
weixin_46011719的博客
06-19 546
echarts实现地球和地图，并包括飞线
VUE Echarts世界地图 中文名称显示国家
wanghui374的博客
10-14 1万+
1、安装插件 npm install echarts --save 2、引入组件 import echarts from &quot;echarts&quot; //引入组件 import '../../node_modules/echarts/map/js/world.js' //引入地图文件 3、效果图 环境 VUE — 脚手架 全部代码 &amp;lt;template&amp;gt; &amp;lt;div..
echarts世界各个国家的地图
qq_19530157的博客
06-02 2582
https://github.com/echarts-maps/echarts-countries-js/blob/master/demo.js 记录了echarts中画图包括世界各个国家的图
Echarts世界地图中国分区显示
dycsos123的专栏
08-14 2050
需求：在报表显示世界地图，国外显示到国家，国内显示到省份。   分析：由于之前系统中所有的报表都是用Echarts做的，所以决定世界地图也用Echarts来做，查了一下Echarts网方网站，貌似和地图有关的Demo都已关闭（API尚在）；查了一些资料，发现Echarts支持的地图大都只显示到国家，如下图。很明显不符合我们的需求，对于我这个半屌子前端，着实费了好大精力，好在查到了Echarts是...
echarts-5.1.2世界地图demo
12-07
ECharts 的地图模块支持各种级别的地理数据，包括国家、省份、城市等，而“world.js”则包含了世界地图的数据，使得我们可以渲染出全球的地图，并在此基础上进行定制化操作。 在“world.js”的中文版中，地图数据被...
echarts世界各个国家多边形json
07-13
总的来说，这个资源提供的JSON文件是ECharts绘制世界地图的基础，结合ECharts库，你可以轻松实现交互式的世界地图展示，进一步探索和分析全球数据。通过深入学习ECharts的文档和实践，你可以掌握更多高级功能，提升...
echarts世界地图资源map.zip
10-13
ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图...通过学习和掌握ECharts地图的使用，开发者可以更好地呈现全球性的数据，提升用户体验，为项目增加亮点。
echarts 实现以中国为中心的世界地图
05-04
1. **ECharts地图组件**： ECharts 提供了地图图表类型，支持自定义地图数据。它内建了世界地图，以及中国等国家的省级地图。要实现以中国为中心的世界地图，我们需要利用ECharts的`geo`系列。 2. **Vue.js集成...
Echarts 的主要国家地图
01-22
json格式的map（用于Echarts），世界主要国家都有，保证可用！
越南分省地图集（中文）
07-19
越南分省地图集（中文）2000-2004年资料，含县市，找了很久才找到
echarts地图：全球+全国+省级，可下钻层级
07-21
使用echarts来显示世界地图和全国地图，并且可以下钻层级 适用于使用echarts+vue3.0+vite的人员 解决全球下钻到全国到省级的问题 以及不要的地图资源
vietnam_map_history:越南地图历史
05-09
越南_地图_历史 越南地图历史 目标 2019年3月3日 将收集的地图数字化并校正为正确的地理坐标系 为已更正的地图构建地图服务（Web地图服务） 建立一个Web视图，以便用户可以浏览时间轴上的地图（时间轴） 建筑数据库可存储有关每个地图的每个历史时期的信息 程序库 参考
echarts 中的世界地图的使用案例
weixin_52137696的博客
10-12 4801
echarts 中的世界地图的使用案例。
小技巧，echarts的tooltip显示多值
yaonierensheng的博客
04-02 1908
最近研究echarts，有些小技巧还是需要琢磨的，给自己做一个备忘。 通过修改series的data数据的value，在tooltip里重新formatter一下data，再用html拼接一下 前： myChart.showLoading(); $.get(ROOT_PATH + 'data/asset/geo/USA.json', function (usaJson) { my...
【最新】全球各国的边界、中国各省的边界Geojson
Waterbicycle的博客
06-23 934
全球各国的边界、中国各省的边界Geojson
echarts 地图展示图片
07-28
echarts可以通过使用SVG（可缩放矢量图形）来展示地图图片。SVG是一种基于XML的图像格式，可以实现高质量的矢量图形展示。在echarts中，可以使用SVG来绘制各种地图，包括世界地图、国家地图、省份地图等。 要在echarts中展示地图图片，首先需要准备好地图的数据和对应的SVG文件。可以通过在echarts官方网站或其他资源网站上下载已经制作好的地图SVG文件。然后，在echarts的配置项中，使用"map"属性指定要使用的地图类型，并将对应的SVG文件路径作为值传入。 以下是一个示例代码，展示如何在echarts中展示地图图片： ```javascript // 引入echarts库 import echarts from 'echarts'; // 创建echarts实例 const chart = echarts.init(document.getElementById('chart')); // 地图数据 const mapData = \[ { name: '北京', value: 100 }, { name: '上海', value: 200 }, { name: '广州', value: 150 }, // 其他省份数据... \]; // 地图SVG文件路径 const mapSvgPath = 'path/to/map.svg'; // echarts配置项 const option = { // 设置地图类型为自定义地图 map: 'custom', // 指定使用的SVG文件路径 svg: mapSvgPath, // 其他配置项... series: \[ { type: 'map', mapType: 'custom', data: mapData, }, \], }; // 使用配置项绘制地图 chart.setOption(option); ``` 通过以上代码，可以在echarts中展示地图图片。需要注意的是，要根据实际情况修改地图数据和SVG文件路径，以及其他echarts配置项，以满足具体需求。\[1\] #### 引用[.reference_title] - *1* [echarts 地图添加纹理图片](https://blog.csdn.net/pwl124/article/details/124731179)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值