码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • echarts绘制地图


    使用 echarts 绘制地图, 并实现简单的交互(如果是复杂的交互, 建议使用 高德地图的api)

    使用echarts 画中国地图有两种方法, 一种是使用 china.js 的文件, 来绘制地图。这个文件好像不是那么好找了, echarts 的站点不再提供了, 这里有一个从别的资源找过来的
    china.js
    这是有一个网络资源, 下载就可以了
    https://pan.baidu.com/s/1n1W__XPfS-icv_GOUPChBw
    提取码 4rxi
    把上面的文件, 保存为china.js 再通过 import 引入到要使用的地方去

    从echart 的文档上来看, 我们在echart中使用 geo 和 使用 series 来绘制地图,它们之间有一点细微的差别,可以忽略不计

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    引入china.js
    图中这个箭头指错了, 自已纠正一下
    在这里插入图片描述

    //这里使用 series 来配置地图

    在这里插入图片描述
    别一种方法, 我们不使用 series来配置, 使用 geo来配置
    在这里插入图片描述
    两中方法都是可以了, 随便选择就可以了


    第二种方法绘制地图是使用 json 数据, 这种方法更灵活一些, 可以绘制不同省份,市区,等的地图,上面的是 国家的地图, 那么这里的 使用json数据的方法可以绘制更小的地方的地图
    首先, 我们要取得 json 数据才可以

    http://datav.aliyun.com/portal/school/atlas/area_selector 这里是可以获取区域json 数据的地方
    在这里插入图片描述
    从站点上可以看到, 我们可以选择 是下载全国的数据, 还是下载某一个省的json数据, 我们这里只使用湖北省襄阳市的试试

    在这里插入图片描述
    下载 襄阳市的 json数据
    在这里插入图片描述
    使用数据时, 要echarts .registerMap

    在这里插入图片描述
    看一下最后的效果
    在这里插入图片描述

  • 相关阅读:
    Unity --- 向量
    白盒子测试总结
    关于XAMPP无法启动mysql数据库
    SpringBoot 整合 MyBatis
    使用SQL语句处理csv数据
    vue设置全局变量:让你的数据无处不在!
    Robot Framework自动化测试框架超强教程(一)
    《元宇宙2086》亮相金鸡奖中国首部元宇宙概念院线电影启动
    LeetCode(23)找出字符串中第一个匹配项的下标【数组/字符串】【简单】
    vue项目打包成H5apk中使用语音播放
  • 原文地址:https://blog.csdn.net/hjh15827475896/article/details/126470836
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号