ECharts 渲染中欧视图(中国在左,欧洲在右)
本来上传了一份 world.js
到 CSDN。但是想着 CSDN 自动涨积分的机制就干脆再写一篇博客,以帮助那些真正需要的人。(world.js
上传还在审核,需要下载文件的留言评论。)
首先你需要一份 world.json
数据。如果没有:请移步至 ECharts 常见问题 寻找下载 world.json
的方法。
中欧视图
现在网上的大多数世界地图基本全是以欧洲为中心的,不太适合我们国内开发。其实这个时候转也很方便,只需要通过 js
代码将所有的点坐标按照一定的算法进行平移即可。
下面是我的部分代码,大家可以参考一下,如有疑问可留言讨论。(与 -30 比较是因为这个经度纵向经过的区域少,就“格陵兰”一个,方便修复):
/**
* 初始化 Echarts*/
initEcharts() {const that = this;this.echartsInstance = echarts.init(document.getElementById('geocanvas'));// 显示加载动画this.echartsInstance.showLoading();// 获取地图数据并渲染fetchWorldJson().then(geojson => {let fixPlaces = ['格陵兰', 'Greenland'];// 欧洲视图 转为 中欧视图(中国在左,欧洲在右)let features = geojson.features;for (let i = 0, length = features.length; i < length; ++i) {let feature = features[i];let geometry = feature.geometry;let coordinates = geometry.coordinates;if (fixPlaces.includes(feature.properties.name)) {continue;}if (feature.properties.cp) {feature.properties.cp[0] = feature.properties.cp[0] >= -30 ? feature.properties.cp[0] - 180 : feature.properties.cp[0] + 180;}if (feature.properties.center) {feature.properties.center[0] = feature.properties.center[0] >= -30 ? feature.properties.center[0] - 180 : feature.properties.center[0] + 180;}for (let j = 0, length = coordinates.length; j < length; ++j) {let coordinate = coordinates[j];for (let k = 0, length = coordinate.length; k < length; ++k) {if (coordinate[k].length > 2) {for (let m = 0, length = coordinate[k].length; m < length; ++m) {coordinate[k][m][0] = coordinate[k][m][0] >= -30 ? coordinate[k][m][0] - 180 : coordinate[k][m][0] + 180;}} else {coordinate[k][0] = coordinate[k][0] >= -30 ? coordinate[k][0] - 180 : coordinate[k][0] + 180;}}}}// 注册地图echarts.registerMap('WorldMap', geojson, {'Greenland': {left: 110,top: 60,width: 60}});this.echartsInstance.setOption(this.option);// 隐藏加载动画this.echartsInstance.hideLoading();// 请求初始数据this.mapView.toLowerCase() === 'world' ? this.getWorldGisDot() : this.getChinaGisDot();}).catch(err => {console.error("[MapEcharts.vue] 渲染地图失败!", err);});
}
ECharts 渲染中欧视图(中国在左,欧洲在右)相关推荐
- 【问链财经-区块链基础知识系列】 第二十九课 区块链的世界:中国向左 美国向右
世界有两大互联网生态,一个是美国构筑的,当中的互联网公司有苹果.谷歌.亚马逊.脸书.雅虎等:另一个是中国构筑的,当中互联网公司有阿里.腾讯.百度.京东.今日头条等.这两大生态占据了全球互联网十强. 其 ...
- 亚马逊向土耳其企业启动“全球开店”计划,要和中国卖家抢夺欧洲市场
亚马逊向土耳其企业启动"全球开店"计划,要和中国卖家抢夺欧洲市场 亚马逊发表声明称,已启动土耳其站点面向欧洲的电子出口计划.中小企业(SMEs)将能够通过亚马逊土耳其站将其产品出口 ...
- spring mvc 渲染html,在Spring MVC中使用Thymeleaf模板渲染Web视图
Thymeleaf模板是原生的,不依赖于标签库.它能在接受原始HTML的地方进行编辑和渲染.由于没有与Servlet规范耦合,因此Thymeleaf模板能够进入JSP所无法涉及的领域 如果想要在Spr ...
- 中间件中渲染Razor视图
前言 上一篇文章<ASP.NET Core 奇技淫巧(1):中间件实现服务端静态化缓存>中介绍了中间件的使用方法.以及使用中间件实现服务端静态化缓存的功能.本系列文章取名"奇技淫 ...
- spring(6) 渲染web视图
[0]README 1)本文部分文字描述转自:"Spring In Action(中/英文版)",旨在review "spring(6) 渲染web视图" 的 ...
- 《Spring In Action(第4版)》阅读总结(四)渲染Web视图
渲染Web视图 将模型数据渲染为HTML 使用JSP视图 通过tiles定义视图布局 使用Thymealeaf视图 理解视图渲染 控制器只负责处理请求并返回模型数据和视图名 将控制器中请求处理逻辑与视 ...
- 【ECharts学习】—实现中国地图
[ECharts学习]-实现中国地图 使用Echarts进行地图绘制展示的时候,需要china.js的引入,我把它放在百度网盘里了,需要的自取 点我跳转到百度网盘 提取码:clby <!DOCT ...
- echarts 渲染3d地图
与渲染2d地图类似 echarts 渲染3d地图要先安装依赖 echarts-gl npm install echarts-gl 但是常常依赖安装失败,这往往是因为 安装的这个依赖的版本太高造成的 可 ...
- 曾惊动中国大使馆的欧洲专利流氓迎来中国企业的连续痛击
近日欧洲专利运营企业Sisvel在荷兰海牙法院被判败诉,中国手机企业小米对该公司持有的一项专利不构成专利侵权,这是中国手机企业在欧洲市场遭遇的专利诉讼当中的首次重大胜利. Sisvel是一家非执业实体 ...
最新文章
- Linux下无法进入windows的NTFS分区并挂载错误的问题的解决方法
- Trie树的常见应用大总结(面试+附代码实现)
- DotnetCharting
- 科技前沿智能创新 2019北京智能家居 全屋智能博览会
- 通过一个简单例子理解 RecyclerView.ItemDecoration
- 将读写锁放到共享内存中,实现进程之间对数据的读写访问控制
- Axis2;wsdl生成客户端和serverJava代码
- RTT的线程同步篇——总结
- DOCX%20是什么格式
- rk3399_android7.1添加个驱动且加上宏控编译
- ScaleAnimation缩放动画Demo
- puppetmaster 自动签名
- [Erlang 0017]Erlang/OTP基础模块 proc_lib
- M1 Macbook安装MATLAB
- Smobiler 窗体
- 服务器进pe后找不到硬盘,进入PE后找不到硬盘的原因及解决方法
- 为什么现在很多人在用影刀,影刀突然火起来了?
- 前端 115道 面试题总结【持续更新...】
- 使用树莓派打造一台收音机
- Android P获取系统IMEI码、ANDROID_ID