首页 > 其他分享 >前端常用的echart获取地图json方法

前端常用的echart获取地图json方法

时间:2024-09-05 09:49:13浏览次数:13  
标签:文件 echart 前端 地图 Json json 右手定则 链接

一、世界地图,不细分国家
相关链接:geojson 在线绘制

 

Json文件链接:world-min.json

二、世界地图,包含各个国家

 


Json文件链接:world.json

三、中国地图,省市区县(阿里DataV.GeoAtlas)
相关链接:阿里DataV.GeoAtlas 在线绘制

 

 

Json文件链接:china-min.jsonchina.json

修复右手定则

当我们将地图合并成只有一个图层时,直接放到项目运行,会发现地图不显示了,将文件从 geojson.io 打开

 


发现右侧提醒我们应该遵循右手定则,这时我们用 mapster-right-hand-rule-fixer  这个小工具进行修复,再将生成的文件运行在项目,这样就解决了不显示的问题。

标签:文件,echart,前端,地图,Json,json,右手定则,链接
From: https://www.cnblogs.com/hpx2020/p/18397762

相关文章

  • MySQL JSON 数据类型
    JSON数据类型是MySQL5.7.8开始支持的。在此之前,只能通过字符类型(CHAR,VARCHAR或TEXT)来保存JSON文档。相对字符类型,原生的JSON类型具有以下优势:在插入时能自动校验文档是否满足JSON格式的要求。优化了存储格式。无需读取整个文档就能快速访问某个元素的值。在JS......
  • 尚硅谷前端 ES6 笔记
    ECMAScript6-11概述1.ECMA介绍ECMA(EuropeanComputerManufacturersAssociation)是欧洲计算机制造商协会,目标是评估、开发和认可电信和计算机标准。1994年后改名为Ecma国际。2.ECMAScript是什么ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。3.......
  • 前端开发学习——CSS定位
    一、定位的基本介绍1、网页常见的布局方式1.标准流块级元素独占一行——垂直布局行内元素/行内块元素一行显示多个——水平布局2.浮动可以让原本垂直布局的块级元素变成水平布局3.定位可以让元素自由的摆放在网页的任意位置一般用于盒子之间的层叠情况 2、定位的常见......
  • vscode launch.json 模板备忘
    {//UseIntelliSensetolearnaboutpossibleattributes.//Hovertoviewdescriptionsofexistingattributes.//Formoreinformation,visit:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0",&quo......
  • 前端vue项目 git commit msg 文字校验实现,利用husky 和 commitlint实现
    husky安装使用说明husky作用是创建git钩子,然后触发命令执行安装yarnaddhusky初始化npxhuskyinit会出现下面文件夹commitlint安装和使用安装commitlintyarnaddcommitlint安装校验规则库@commitlint/config-conventionalyarnadd@commitlint/co......
  • 【前端工程化-Node.js】Node.js介绍、模块化、模块导入导出语法、npm包管理、同源和跨
    Node.js入门Node.js是什么Node.js是一个跨平台的JavaScript运行环境,主要使用场景有:编写后端程序:充当服务器,对外提供Web服务(接口、数据、网页资源等)前端工程化:对代码进行压缩,转译和整合浏览器和Node环境的对比Node.js内部封装了ChromeV8引擎,因此可以像浏览器一样运......
  • Vue前端开发 转 React 指南
    JSX先介绍React唯一的一个语法糖:JSX。理解JSX语法并不困难,简单记住一句话,遇到{}符号内部解析为JS代码,遇到成对的<>符号内部解析为HTML代码。当你写下这个React组件时:importReactfrom'react';functionMyComponent(props){return<div>{props.hello}<......
  • 纯前端Canvas绘制海报
    封装类:/***Canvas绘制海报*/classPoster{canvas:HTMLCanvasElement;context:CanvasRenderingContext2D;constructor(el:string,width:number,height:number){constcanvas=document.querySelector<HTMLCanvasElement>(el);if(canvas......
  • 从0到1落地微前端架构:‌MicroApp实战招聘网站
    从0到1落地微前端架构:‌MicroApp实战招聘网站随着前端技术的快速发展和复杂化,‌微前端架构作为一种新兴的前端架构模式,‌正在逐渐受到开发者的关注和应用。‌本文将详细介绍如何从零开始,‌利用微前端架构和MicroApp技术实战开发一个招聘网站,‌并分析其设计思路、‌实施步骤及优势......
  • React 18 系统精讲:‌前端教程与最新特性源码级剖析
    React18系统精讲:‌前端教程与最新特性源码级剖析引言React18带来了许多激动人心的新特性和改进,‌旨在提高应用的性能和用户体验。‌本教程将深入探讨React18的核心特性,‌包括并发特性、‌新的API、‌以及源码层面的解析,‌帮助前端开发者更好地理解和应用这些新技术。‌......