Echarts地图详解(地图样式、合并地图、增加地图)

Echarts地图详解(地图样式、合并地图、增加地图)概述 nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp 地图在我们日常的数据可视化分析中是很常见的一种展示手段 不仅美观而且很大气 尤其是在大屏展示中更是扮演着必不可缺的角色 地图实现下面我们就来实现一个基本的地图 并为之添加一些好看的样式 lt DOCTYPEhtml gt lt htmllang en gt lt head gt lt metacharset UTF 8 amp g

概述

        地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气。尤其是在大屏展示中更是扮演着必不可缺的角色。

地图实现

下面我们就来实现一个基本的地图,并为之添加一些好看的样式。

 
   
   地图 
    
    
   

示意图如下:

Echarts地图详解(地图样式、合并地图、增加地图)

一个基本的地图就出来了。

提出问题

        熟悉长沙的人就会知道,在上面这个地图中,多了一块区域“分中心”,在长沙的地图板块中是没有这个区域的,那么我是怎样将他改变成这样的呢。

        这其实是当初用户提出的一个需求,因为他们中是有一个分中心的,而长沙地区是没有这个地图区域的,所以最后决定是添加一块湖南缩略图样式的区域来代表这个分中心。

        当初也是找了很多资料,没有找到合适的办法,然后决定用两个地图来表示,然后给用户看了样式,用户也觉得很满意,但是在真正开发过程中确遇到了很多问题,数据不好一起展示和联动。后来也是找了很久才找到一个网站

http://geojson.io

这个网站完美解决了我的问题。

自定义地图

下面来讲解这个网站如何使用:

打开网址我们可以看到这个网站的样子

Echarts地图详解(地图样式、合并地图、增加地图)

网页的左上角是菜单栏,在open选项中打开我们需要编辑的json文件

open—–>file

Echarts地图详解(地图样式、合并地图、增加地图)

编辑完成之后在第二个save菜单中保存我们编辑的内容即可

save——>GeoJSON

Echarts地图详解(地图样式、合并地图、增加地图)

在网页的中部有一块区域就是我们需要重点掌握的画图工具

Echarts地图详解(地图样式、合并地图、增加地图)

第一个Echarts地图详解(地图样式、合并地图、增加地图)就是根据点来绘图,绘制的都是线条形状的图形

Echarts地图详解(地图样式、合并地图、增加地图)

第二个Echarts地图详解(地图样式、合并地图、增加地图)就是多边形,可以快速的绘制一个多边形区域或者是比较复杂的地图区域。

Echarts地图详解(地图样式、合并地图、增加地图)

第三个Echarts地图详解(地图样式、合并地图、增加地图)就是矩形,能够快速的绘制一个简单的矩形区域。

Echarts地图详解(地图样式、合并地图、增加地图)

当我们在地图上新增了一块区域之后还要为这块区域命名:

Echarts地图详解(地图样式、合并地图、增加地图)

如图:点击这块新增的区域,会出现一个该区域的属性框,点击Add按钮,新增一个name属性值为分中心。这样就完成了地图区域的增加。

Echarts地图详解(地图样式、合并地图、增加地图)

上面这个图的左上角就是我自己绘制的,长沙的地图原本是只有下面这块区域的。

 

有了地图的增加,那么必然会有地图的合并。

以长沙为例,假如由于行政区域的划分,开福区和芙蓉区合并为一个区,那么我们就需要在地图上将这两个区进行合并。

首先将这两个区删除:点击芙蓉区和开福区然后把他们两个删除掉

Echarts地图详解(地图样式、合并地图、增加地图)

删除后的样子是这样

Echarts地图详解(地图样式、合并地图、增加地图)

可以看到中间空了一块区域,然后再利用我们的点画图工具再地图上的那块空白区域进行绘制即可,利用多边形画图工具Echarts地图详解(地图样式、合并地图、增加地图)将空白区域的点链接起来即可,在绘制过程中利用鼠标滚轮尽量把地图扩大这样方便绘制并且绘制的更加精密,最后将它的名字修改成合并后的名字即可。

Echarts地图详解(地图样式、合并地图、增加地图)

最后将绘制完成的保存到本地即可。

地图的东西大概就是这么多,有问题的可以留言一起讨论。

最后送上一个3D版的地图:

 
   
   Title 
    
    
    
   

效果图:

Echarts地图详解(地图样式、合并地图、增加地图)

 

全国各省市地图json数据

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/205118.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月19日 下午6:46
下一篇 2026年3月19日 下午6:46


相关推荐

  • 2025政企行业智能体(Agent)研究

    2025政企行业智能体(Agent)研究

    2026年3月16日
    2
  • R语言ggplot画图(autocad命令输入方式有几种)

    提到R语言,总会想到它强大的绘图包ggplot2,甚至于其他语言中也有它的痕迹(例如,python中的matplotlib模块就有ggplot样式)。以下,总结了一些日常绘图中常用的命令。目录一、基本绘图二、精雕细琢三、ggplot中的数据变换一、基本绘图二、精雕细琢(1)图片标题字体、大小、样式设置(2)坐标轴字体、大小、样式设置(3)颜色设置I.指定颜色scale_fill_manual(value=c())II.使用调色板RColorBrewer::displ

    2022年4月10日
    276
  • vue中watch的详解

    vue中watch的详解Watch 概述 一个对象 键是需要观察的表达式 值是对应回调函数 值也可以是方法名 或者包含选项的对象 Vue 实例将会在实例化时调用 watch 遍历 watch 对象的每一个属性 简单的监听 body divid app inputtype text v model num lt inputtype text v model num divid app body

    2026年3月20日
    1
  • uos访问windows共享打印机_Linux打印机安装命令

    uos访问windows共享打印机_Linux打印机安装命令Unraid安装CUPS实现共享打印和无线打印2020-11-2916:08:3451点赞486收藏51评论创作立场声明:个人瞎折腾,文中部分内容来自网络,本人并非专业人士,只是将个人的折腾经验分享给大家,如有错误请大家指正今年上半年买了一台高配蜗牛,蜗牛D的机箱、G5400的cpu、B365的板子,就开始了一系列的折腾,更换了8700tescpu,带pcie插槽的蜗牛C机箱,4口pci…

    2022年10月9日
    6
  • gradle配置详解

    gradle配置详解版权声明 本文为章鱼哥原创文章 若要转载 请注明出处 https blog csdn net article details gradle 配置总结 gradle 是一个基于 jvm 的富有突破性的构建工具 gradle 正迅速成为许多开源项目和前沿企业构建系统的选择 同时也在挑战遗留的自动化构建项目 优点 1 一个像 ant 一样 通用的灵活的构建工具

    2026年3月19日
    3
  • Pycharm连接并调用服务器「建议收藏」

    Pycharm连接并调用服务器「建议收藏」Pycharm可以与服务器建立连接,把相应的项目同步到服务器上,并且可以通过Pycharm直接使用服务器的解释器运行相应程序,实现Pycharm编程,服务器运行的效果。具体步骤如下:1.建立一个服务器连接Pycharm的“Tools”-》“Deployment”-》“Configuration”2.创建一个SFTP3.为该项目添加一个SSH解释器。因为前面已经添加好了服务器连接,所以这里直接选择已经设置好的就可以,如果没有已经设置好的,可以重新添加。配置好SSH之后,选择Next,设置本地项目

    2022年8月28日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号