05-Echarts矢量地图实现、及常见效果

最新推荐文章于 2024-08-05 05:00:00 发布
最新推荐文章于 2024-08-05 05:00:00 发布
阅读量1k 收藏 4
点赞数 2
分类专栏： js Echarts 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liumuye88888/article/details/116768343
版权
js 同时被 3 个专栏收录
23 篇文章 1 订阅
订阅专栏
Echarts
7 篇文章 0 订阅
订阅专栏
数据可视化
7 篇文章 0 订阅
订阅专栏
本文介绍了如何使用ECharts库结合矢量地图数据实现交互式地图，包括地图的基本特点、加载数据、配置选项等。示例中展示了缩放拖动、地图与visualMap结合展示空气质量、以及地图与散点图结合显示城市空气质量等功能，通过实例代码详细解释了实现过程。
摘要由CSDN通过智能技术生成

目录

地图的特点

地图图表的两种使用方式

  1. 百度地图API
  2. 矢量地图数据

地图的绘制

  1. 加载数据
  2. 将数据注册给echarts全局对象
  3. 配置geo

常见效果

1.缩放拖动/初始缩放比例/中心点
2.visualMap和地图的结合
3.散点图和地图的结合

地图特点
地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异

矢量地图实现流程

  1. ECharts最基本的代码结构
  2. 准备中国地图的矢量数据
  3. 使用Ajax获取矢量地图数据
  4. 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap(‘chinaMap’, 矢量地图数据)
  5. 配置geo的type为’map’, map为’chinaMap’

矢量地图实现代码

https://gitee.com/liumuye666/front-end/tree/master/
进入前往git下载矢量地图数据进行操作
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.min.js"></script>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div style="width: 600px;height: 600px;"></div>
</body>
<script>
    var mCharts = echarts.init(document.querySelector('div'))
    $.get('map/china.json',function(ret){
        
        // console.log(ret);
        echarts.registerMap('chinaMap',ret)
        var option = {
        geo:{
            type:'map',
            map:'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
            roam:true,  //设置允许缩放、拖动
            label:{
                show:true
            },
            zoom:2, //初始化比例
            center:[87.617733,43.792818] //地图中心点
        }
    }
    mCharts.setOption(option)
    })
    
   
</script>
</html>

在这里插入图片描述
想要显示某个省份只需要把get请求里面的请求数据换下就行
如安徽:

   $.get('map/anhui.json',function(ret){
        console.log(ret);
        echarts.registerMap('anhui',ret)
        var option = {
            geo:{
                type:'map',
                map:'anhui',
                zoom:1.5,
                roam:true,
                center:[116.507676, 31.752889] //整个坐标值,我们可以通过地图矢量数据获取到
            }
        }
        mCharts.setOption(option)
    })

地图城市空气质量

  1. 显示基本的中国地图
  2. 将空气质量的数据设置给series下的对象
  3. 将series下的数据和geo关联起来
  4. 配置visualMap
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<body>
    <div style="width: 600px;height: 600px;"></div>
</body>
<script>
//airData   是不同城市的空气质量数据 
    var airData = [
        { name: '北京', value: 39.92 },
        { name: '天津', value: 39.13 },
        { name: '上海', value: 31.22 },
        { name: '重庆', value: 66 },
        { name: '河北', value: 147 },
        { name: '河南', value: 113 },
        { name: '云南', value: 25.04 },
        { name: '辽宁', value: 50 },
        { name: '黑龙江', value: 114 },
        { name: '湖南', value: 175 },
        { name: '安徽', value: 117 },
        { name: '山东', value: 92 },
        { name: '新疆', value: 84 },
        { name: '江苏', value: 67 },
        { name: '浙江', value: 84 },
        { name: '江西', value: 96 },
        { name: '湖北', value: 273 },
        { name: '广西', value: 59 },
        { name: '甘肃', value: 99 },
        { name: '山西', value: 39 },
        { name: '内蒙古', value: 58 },
        { name: '陕西', value: 61 },
        { name: '吉林', value: 51 },
        { name: '福建', value: 29 },
        { name: '贵州', value: 71 },
        { name: '广东', value: 38 },
        { name: '青海', value: 57 },
        { name: '西藏', value: 24 },
        { name: '四川', value: 58 },
        { name: '宁夏', value: 52 },
        { name: '海南', value: 54 },
        { name: '台湾', value: 88 },
        { name: '香港', value: 66 },
        { name: '澳门', value: 77 },
        { name: '南海诸岛', value: 55 }
    ]
    var mCharts = echarts.init(document.querySelector('div'))
    $.get('map/china.json',function(ret){
        
        console.log(ret);
        echarts.registerMap('chinaMap',ret)
        var option = {
        geo:{
            type:'map',
            map:'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
            roam:true,  //设置允许缩放、拖动
            label:{
                show:true
            },
           
        },
        series:[
            {
                data:airData,
                geoIndex:0 , //将空气质量的数据和第0个geo配置关联在一起
                type:'map'
            },
           
        ],
        visualMap:{
            min:0,
            max:300,  //滑块数值在0-300
            inRange:{
                color:['white','red']  //控制颜色渐变的范围
            },
            calculable:true  // 出现滑块的效果
        }
    }
    mCharts.setOption(option)
    })
</script>
</html>

在这里插入图片描述

地图和散点图结合

  1. 给series下增加一个新的对象
  2. 准备数据散点数据 , 配置给series下的另外一个对象
  3. 配置series下的新对象的type值为effectScatter
  4. 指明散点图的坐标系统为geo
  5. 调整涟漪动画效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<body>
    <div style="width: 600px;height: 600px;"></div>
</body>
<script>
    var airData = [
        { name: '北京', value: 39.92 },
        { name: '天津', value: 39.13 },
        { name: '上海', value: 31.22 },
        { name: '重庆', value: 66 },
        { name: '河北', value: 147 },
        { name: '河南', value: 113 },
        { name: '云南', value: 25.04 },
        { name: '辽宁', value: 50 },
        { name: '黑龙江', value: 114 },
        { name: '湖南', value: 175 },
        { name: '安徽', value: 117 },
        { name: '山东', value: 92 },
        { name: '新疆', value: 84 },
        { name: '江苏', value: 67 },
        { name: '浙江', value: 84 },
        { name: '江西', value: 96 },
        { name: '湖北', value: 273 },
        { name: '广西', value: 59 },
        { name: '甘肃', value: 99 },
        { name: '山西', value: 39 },
        { name: '内蒙古', value: 58 },
        { name: '陕西', value: 61 },
        { name: '吉林', value: 51 },
        { name: '福建', value: 29 },
        { name: '贵州', value: 71 },
        { name: '广东', value: 38 },
        { name: '青海', value: 57 },
        { name: '西藏', value: 24 },
        { name: '四川', value: 58 },
        { name: '宁夏', value: 52 },
        { name: '海南', value: 54 },
        { name: '台湾', value: 88 },
        { name: '香港', value: 66 },
        { name: '澳门', value: 77 },
        { name: '南海诸岛', value: 55 }
    ]
    var scatterData = [
      {
        value: [117.283042, 31.86119]
      }
    ]  //散点图数据,某个城市的经纬度
    var mCharts = echarts.init(document.querySelector('div'))
    $.get('map/china.json',function(ret){
        
        console.log(ret);
        echarts.registerMap('chinaMap',ret)
        var option = {
        geo:{
            type:'map',
            map:'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
            roam:true,  //设置允许缩放、拖动
            label:{
                show:true
            },
           
        },
        series:[
            {
                data:airData,
                geoIndex:0 , //将空气质量的数据和第0个geo配置关联在一起
                type:'map'
            },
            {
                data:scatterData,  //配置散点的坐标数据
                type:'effectScatter', //涟漪效果
                coordinateSystem:'geo', // 指明散点图的坐标系统为geo
                rippleEffect:{
                    scale:10
                }
            }
           
        ],
        visualMap:{
            min:0,
            max:300,
            inRange:{
                color:['white','red']  //控制颜色渐变的范围
            },
            calculable:true  // 出现滑块的效果
        }
    }
    mCharts.setOption(option)
    })
    
   
</script>
</html>

在这里插入图片描述

请问大家代码怎么敲
关注
专栏目录
Apache Echarts实现矢量地图
diviner_s的博客
04-22 3029
文章目录Echarts常用图表5地图1. 地图图表的使用方式2.矢量地图的实验步骤 Echarts常用图表5 地图 1. 地图图表的使用方式 百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak 矢量地图` : 可以离线展示地图, 需要开发者准备矢量地图数据 接下来的实现是通过矢量图的方式来实现的 2.矢量地图的实验步骤 1.先上Echarts经典基本代码框架~~ <!DOCTYPE html> <html lang="en"> <h
Echarts矢量地图
09-17
Echarts的矢量图下载，很多朋友很难找到相应的插件完成地图的绘画，希望我的上传能够有质的帮助大家减少寻找资源这一块的时间。
echarts矢量地图基本实现
qq_53987671的博客
04-02 2309
一、获取地图的相关数据和引入要用到的js库 1.1-引入echarts和jquery库 在bootcdn中分别搜索echarts和jquery库，点击复制script标签引入html文件中 1.2-使用ajax请求获取中国地图的json数据 http://datav.aliyun.com/portal/school/atlas/area_selector 点击上面链接进入页面，复制json数据的请求地址 二、绘制矢量地图 <!DOCTYPE html> <htm
Echarts 绘制地图（中国、省市、区县）
最新发布
富朝阳的博客
08-05 5460
Echarts 绘制地图（中国、省市、区县）
全国Echarts矢量图数据
04-02
全国Echarts矢量图数据，用在Echarts中加载相关数据。
echarts 矢量地图资源 json 格式（附demo）
08-20
ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。 建议大家使用以百度地图为底图的形式，参考实例：https://echarts.baidu.com/demo.html#map-polygon 如果大家想要继续使用之前的矢量地图，可以下载这个包，demo中有详细代码注释 在国家行政区重新划分后，此矢量地图已不再准确，请大家谨慎使用
山西省echarts地图资源
12-30
7. **地图动画**：ECharts可以实现地图的动态效果，例如随着时间变化展示山西省各地区的历年发展情况，或者通过过渡动画展示数据的对比。 8. **地图配置项**：ECharts提供了丰富的地图配置项，可以调整地图的背景色...
echarts3省市县地图完整版;echarts3地图数据(含全国和省js以及全国、省、地市json)和最新地图文件附带百度地图开发指南
05-05
需要注意的是，ECharts 提供的矢量地图数据可能并非实时更新，因此在处理最新的地理信息时，可能需要寻找更新的数据源。此外，虽然描述中提到地图数据来自第三方，但通常 ECharts 社区会维护一套相对完整的地图资源...
内蒙古各盟市geojson数据，svg数据打包下载，支持echarts地图数据，ArcGis数据
07-06
综合以上信息，这个资源包为开发者提供了全面的内蒙古地理信息数据，涵盖了GeoJSON和SVG两种常见格式，支持Echarts和ArcGIS两个平台，可以用于创建互动地图，进行地理数据分析，或者在网页中实现动态地图展示。...
echarts svg矢量图整理合集.txt
06-02
echarts svg矢量图整理合集，包括五角星、梯形、微信、相机、文件夹、喇叭、放大、缩小、饼图、柱图等等
echarts 厦门市地图矢量数据js
06-28
echarts 厦门市地图矢量数据js
echarts 省市县 矢量地图
12-25
ECharts 之前提供下载的矢量地图数据来自第三方，但是不提供下载了,这儿有全部的矢量地图,供大家使用
echarts黑龙江矢量地图
10-24
echarts黑龙江地图 官网上已经没有了 在这分享下 希望帮助到大家
echarts china map
10-17
此文件包含了echarts 里面的china.js 完整版的 如果不能用联系我QQ352183987 随时更新 echarts官网的不能下载的旧的矢量地图我都有 这个包里面还有各个省份的js文件和json文件 需要的请自行下载 下载之后就可以用 实在不懂随后我有空会出一个教程在我的博客里面.或者联系我QQ
echarts 地图 完整版 【免费】
11-06
echarts 地图 完整版。 ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。
世界地图矢量数据
03-06
世界地图矢量数据_shp，世界地图矢量数据_shp
自定义数据格式的矢量地图实现
tyc129的技术栈
04-22 2659
通过自定义的数据结构，在Android上实现灵活、可拓展的矢量地图显示模块。
【echarts】地图的使用（矢量数据）
qq_43806488的博客
11-29 2112
基本使用 1.准备最基本的结构 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
Echarts 空数据时展示自定义矢量图
wyz_memory的博客
09-09 816
话不多说，直接贴配置~~ options = { title: { show: isEmpty, // 是否要展示“暂无数据”矢量图 text: ' {a|}', // 写入占位符a，以便后续填充内容 x: 'center', y: 'center', subtext: '暂无数据', // 子标题 itemGap: -10, // 设置主副标题间隔 textStyle: { rich: { a: {
VC++实现MapInfo矢量地图实时嵌入与显示
本文主要探讨了如何利用Visual C++ (VC++) 和 Object Linking and Embedding (OLE) 技术实现在矢量地图背景下的实时显示。在当前的电子地图应用领域，实时信息的展示已经成为关键需求，尤其是当这些信息需要与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值