echarts矢量地图基本实现

一、获取地图的相关数据和引入要用到的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>
<html lang="en">
<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"><title>中国地图的基本实现</title><!-- 引入jquery和echarts库 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script><!-- <script src="./lib/echarts.min.js"></script><script src="./lib/jquery.min.js"></script> --><style>/* 为地图容器设置样式 */.x{height: 800px;width: 1200px;margin:0 auto;/* border: 1px solid black; */}</style>
</head>
<body><!-- 创建一个容器容纳地图 --><div class="x" id="x"></div><script>let x = document.getElementById("x")// 初始化echarts实例let mycharts = echarts.init(x)//通过ajax请求获取地图的相关数据// ./map/china.json$.get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",function(res){console.log(res);// 地图注册echarts.registerMap("chinaMap",res);// 设置图表的配置项let option = {geo:{type:"map",//设置图表类型map:"chinaMap",//需与上面echarts.registerMap方法的第一个参数保持一致roam:true,//设置缩放和拖动label:{show:true,},zoom:1 ,// 设置初始化的缩放比例center:[116.405285,39.904989]//设置地图中心点}}//生成图表（地图）mycharts.setOption(option)   })</script>
</body>
</html>

echarts矢量地图基本实现相关推荐

vue全家桶+Echarts+百度地图，搭建数据可视化系统
本文章篇幅略长,内容有点多大佬可根据目录选择性查阅新人可一步步来阅读 1 前言 1.1 业务场景突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未 ...
echarts geo地图示例_用Python，炫酷地图轻松绘制，一起来学习吧
转自:数据分析1480 地图可视化是一种非常直观的数据分析结果展现形式,python 有很多可视化库可以实现,pyecharts 就是很多 python 爱好者喜爱的实现地图可视化方法之一.不可否认, ...
echarts 省级地图下钻到市demo
借鉴了昨夜小楼又东风这位兄弟的代码 https://blog.csdn.net/m0_46577631/article/details/124354267?utm_medium=distribut ...
echarts省份地图制作
目录 1.引入插件 2.地图json数据选择 3.创建一个容器 4.读取json的数据,并加载到echarts 5.最终效果图 6.特殊效果如有其他不懂的记得私我哦 1.引入插件 <scrip ...
前端实现街道地图_有哪些简单易用且可精确到地级市的JavaScript前端矢量地图绘制库？...
有一个方案完全满足你的需求,那就是 Echarts + 百度地图 API,首先我不太喜欢百度,也不做广告,不过 Echarts 却是我最喜欢的开源图表库. Echarts 实现的地图是这样的,你可以在 ...
超棒的jQuery矢量地图生成插件 - JQVAMP
为什么80%的码农都做不了架构师?>>> 日期:2012-5-14 来源:GBin1.com 在线演示本地下载是不是也考虑生成一个矢量类型的地图?今天我们将介绍的这款j ...
地图统计_博客城市访问量统计并且通过Echarts+百度地图展示
本篇讲解一下如何在Vue 中使用 Echarts + 百度地图统计博客访问量并且通过QQWry 解析 ip 地址利用Echarts 展示出来效果图如下: 1.纯真Ip地址库 QQWry 这 ...
java echarts 散点图,echarts在地图上绘制散点图（任意点）
项目需求:在省份地图上绘制散点图,散点位置不一定是哪个城市或哪个区县,即任意点通过查询官网文档,找到一个与需求类似的Demo:https://www.echartsjs.com/gallery/ed ...
OpenLayer学习之矢量地图
一.首先了解下矢量地图和栅格地图矢量图使用直线和曲线来描述图形,这些图形的元素是一些点.线.矩形.多边形.圆和弧线等等,矢量地图放大和缩小不会失真(图片你要是放大一定程度明显可以看出一个一个小格→栅 ...
自定义数据格式的矢量地图实现
Update *原文链接:http://blog.csdn.net/tyc129/article/details/70477131* 项目已重构至2.0,启用了新的数据结构和代码结构.基本弥补了初版的 ...

echarts矢量地图基本实现

一、获取地图的相关数据和引入要用到的js库

1.1-引入echarts和jquery库

1.2-使用ajax请求获取中国地图的json数据

二、绘制矢量地图

echarts矢量地图基本实现相关推荐

最新文章

热门文章