echarts 某省下钻某市地图

2024-01-30 08:30
文章标签 地图 echarts 某市 某省

本文主要是介绍echarts 某省下钻某市地图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

因为最近工作需要，接触到了highcharts 与echarts ，对比了一下，目前公司系统用的是highcharts的图表插件，就不想再去用echarts的图标插件了，奈何highcharts地图对中国地图支持不友好，领导要求地图，没办法，逼着自己去尝试了一把echarts ，网上关于echarts地图下钻的资料真心少，要么是骗分的，要么是不正常的，或许是我不懂大神的写法吧，初入echarts ，小白一个，如果有写的不好的地方。大家莫怪，好了，废话不多说了。上代码，

最近用hicharts无意中发现了一个比较好看的国》省》市三级下钻的地图，附上链接

https://code.hcharts.cn/highmaps/FSSm7A

 

ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。

建议大家使用以百度地图为底图的形式，参考实例：http://echarts.baidu.com/demo.html#map-polygon

 

项目目录结构如下：

json 下面放的是全国的各个省的json文件，js下面放了个贵州省的json 与贵州省下面各市json，如需下载地图json,

各省json 下载地址：http://echarts.baidu.com/download-map.html

各省下面市的json下载地址：http://ecomfe.github.io/echarts-map-tool/

记得把如下选项选中，否则地图不会显示各县的边界线

2，文件下载完毕，接下来就是写代码咯，

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE" /><link rel="stylesheet" href="css/index.css" /><script type="text/javascript" src="Plugins/jquery-easyui/jquery.min.js"></script><script type="text/javascript" src="js/echarts.min.js" ></script><script>function goBackProeMap(){$('#cont_pro_map').css('display','block');$('#cont_city_map').css('display','none');$('.retPro').css('display','none');}</script>		
</head>
<body><div class="main" style="width:1300px;height:;margin:50px auto;"><div id="p" style="width:1300px;height:680px;padding:10px;background:#F6F8F7;"><!--下属单位完成项目概况--><div class="proj fl pro_map" style="position: relative;"><div class="proj_top"><p>地图总览</p></div><div class="retPro"><a href="javascript:void(0);" οnclick="goBackProeMap()">返回省级地图</a></div><div id="cont_pro_map" style="width:580px;height:440px;float:left;position: absolute;left:10px;top:50px;z-index:1;"></div><div id="cont_city_map" style="width:580px;height:440px;float:left;display: none;position: absolute;left:10px;top:50px;z-index:99;"></div></div></div></div><script>$().ready(function(){/*echarts*/$.get('js/guizhou.json', function (mapJson) {echarts.registerMap('gui_zhou', mapJson);var chart = echarts.init(document.getElementById('cont_pro_map'));//在id为mainMap的dom元素中显示地图chart.setOption({tooltip: {trigger: 'item',formatter: function loadData(result){//回调函数，参数params具体格式参加官方API//鼠标放到某个地市上，显示这个地市的名称加人口数//例如 params.name：当前地市名称。params.value：你传入的json数据与当前地市匹配的一项。//params.data.value:你传入的json数据与当前地市匹配的一项中'value'对应的数据return result.name+'<br />数据:'+result.value;} },dataRange:{  min:0,  max:50,  splitNumber:0,text:['高','低'],  realtime:false,calculable:false,selectedMode:false,realtime:false,itemWidth:10,itemHeight:60,color:['lightskyblue','#f2f2f2']}, title:{text:'贵州省各市区数据总览',//subtext:'',x:'center',y:'top',textAlign:'left'},series: [{type: 'map',map: 'gui_zhou',//要和echarts.registerMap（）中第一个参数一致scaleLimit: { min: 0.8, max: 1.9 },//缩放mapLocation:{  y:60  },  itemSytle:{  emphasis:{label:{show:false}}  }, label: {normal: {show: true},emphasis: {show: true}},data : [{name:'毕节市',value:'5'},  {name:'遵义市',value:'20'},  {name:'铜仁市',value:'10'},  {name:'六盘水市',value:'30'},  {name:'安顺市',value:'50'},  {name:'贵阳市',value:'15'},{name:'黔东南苗族侗族自治州',value:'33'}]//dataParam//人口数据：例如[{name:'济南',value:'100万'},{name:'菏泽'，value:'100万'}......]}]}),chart.on('click', function (result) {//回调函数，点击时触发，参数params格式参加官方APIsetTimeout(function () { $('#cont_pro_map').css('display','none');$('#cont_city_map').css('display','block');$('.retPro').css('display','block');}, 500);//选择地级市的单击事件var selectCity = result.name;//alert(selectCity);//    调取后台数据$.get('js/'+selectCity+'.json', function (Citymap) {echarts.registerMap(selectCity, Citymap);var myChartCity = echarts.init(document.getElementById('cont_city_map'));myChartCity.setOption({tooltip: {trigger: 'item',formatter: function loadData(result){//回调函数，参数params具体格式参加官方API//鼠标放到某个地市上，显示这个地市的名称加人口数//例如 params.name：当前地市名称。params.value：你传入的json数据与当前地市匹配的一项。//params.data.value:你传入的json数据与当前地市匹配的一项中'value'对应的数据return result.name+'<br />数据:'+result.value;} },dataRange:{  min:0,  max:50,  text:['高','低'],  realtime:false,calculable:false,splitNumber:0,itemWidth:10,itemHeight:60,color:['lightskyblue','#f2f2f2']}, title:{text:selectCity+'地图数据总览',//subtext:'',x:'center',y:'top',textAlign:'left'},series: [{type: 'map',map: selectCity ,//要和echarts.registerMap（）中第一个参数一致scaleLimit: { min: 0.8, max: 1.9 },//缩放mapLocation:{  y:60  },  itemSytle:{  emphasis:{label:{show:false}}  }, label: {normal: {show: true},emphasis: {show: true}},data : [{name:'大方县',value:'5'},  {name:'金沙县',value:'0'},  {name:'织金县',value:'10'},  {name:'七星关区',value:'30'},  {name:'纳雍县',value:'50'},  {name:'赫章县',value:'15'}]//dataParam//人口数据：例如[{name:'济南',value:'100万'},{name:'菏泽'，value:'100万'}......]}]})myChartCity.on('click',function(rel){setTimeout(function () { //$('#cont_pro_map').css('display','block');//$('#cont_city_map').css('display','none');}, 500);})});});});});</script>
</body>
</html>

　　

下面是css文件，

@charset "utf-8";
/* CSS Document */
body{margin:0;font-size:12px; color:#383838;line-height:1.8;font-family:"microsoft yahei";  }
form,ul,li,ol,li,dl,dt,dd,img,p,h1,h2,h3,h4,h5,h6,input,table,th,tr{margin:0;padding:0; }
h1,h2,h3,h4,h5,h6{font-size:12px;}
input,select{font-size:12px;outline: none;}
img{border:0;}
ul,li{list-style-type:none;}
strong,b{font-weight:bold;}
em {font-style:normal;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;}
/* Link 全局链接样式 2012.7.28 */
a{color:#393939;text-decoration:none; cursor:pointer;}.display_no{display:none;}
.display_yes{display:block;}
.fl{float:left}
.fr{float:right;}
.clear{clear:both;}.main_top{width:100%;height:136px;}
.main_top .mdiv{display: inline-block;width:18.743333%;height:120px;background: #fff;display: block;float:left;margin:10px 20px 0px 0;}
.mdiv img {margin:30px 0 30px 20px;width:60px;}
.acsur{float:right;margin-right:10px;margin-top:25px;color:#fff;width: 120px;overflow: hidden;}
.acsur span{display: block;font-size:20px;text-align: center;}
.acsur p{font-size:24px;text-align: center;}
/*main_nav*/
.main_nav{width:35%;margin:15px 0;height:150px;background: #fff;float: left;border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;}
.comp_top{margin:5px 10px;height:30px;line-height:30px;border-bottom:1px solid  #ccc;}
.comp_top P{font-size:16px;font-weight: bold;}
.comp_list{margin:5px 10px;height:100px;}
.comp_list ul li{margin-left:10px;float:left;list-style-type: none;width:120px;height:50px;margin-top:20px;border-right: 1px solid #f2f2f2;}
.comp_list ul li:last-child{border:none;}
.comp_list ul li p{text-align: center;font-size:24px;}
.comp_list ul li span{display:block;text-align: center;font-size:18px;}
.pro_bm{color:#FF9900;}
.pro_user{color:#14ABE4;}
.ml{float:right;}/*comp_xj*/
.main_nav_cent{width:26.55555%;float:left;background: #fff;margin:15px 20px;height:150px;border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;}
/*proj*/
.proj{width:49.2%;background: #fff;margin-top:5px;display: inline-block;margin-bottom: 20px;border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;}
.proj_top{margin:5px 10px;height:30px;border-bottom: 1px solid #ccc;line-height:30px;}
.proj_top p{font-size:16px;font-weight: bold;}
.proj_row{width:100%;margin-top:40px;clear:both;background: #fff;border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;margin-bottom: 20px;}/*map*/
.pro_map{width:70%;height:490px;margin-bottom: 10px;}
.proj_map_list{width:29%;height:490px;background: #fff;border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;margin-top:5px;}
#map_list ul li{margin:10px 10px;height:30px;line-height: 30px;font-size:14px;border: 1px solid #ccc;box-shadow: 1px 1px 1px #ccc;}
#map_list ul a{display: block;}
#map_list ul li span{float:left;margin-left:10px;width: 40%;border-right:1px solid #ccc;}
#map_list ul li em{font-style:normal;float:right;margin-right:10px;width:50%;height:30px;overflow: hidden;text-indent: 15px;}
.jh{color:#D84F4B;}
.wc{color:#FF0000;}
.ncl{color:#0088CC;}
.gd{color:#588EBD;}
.gs{color:#44B6AE;}
.zb{color:#14ABE4;}.list{width: 31%;height: 440px;float: right;margin-right: 10px;border-radius:5px;border:1px solid #f2f2f2;box-shadow: 2px 2px 2px #ccc;}/*排名*/
.ranking ul li {margin:10px 20px;height:20px;line-height: 20px;font-size:16px;margin-top:20px;}
.ranking ul li span{float:left;margin-left:10px;width: 30%;overflow: hidden;height:20px;}
.ranking ul li em{font-style:normal;float:left;margin-left:10px;width:60%;height:20px;overflow: hidden;background: #d0ddf3;
position: relative;display: inline-block;}
.sp{display: inline-block;position: absolute;left:0;background: #029be5;height:20px;}
.sp_line{display: inline-block;width: 60%;text-align: center;color: #fff;z-index: 1;position: relative;font-size:14px;}/*css3动画效果*/
#cont_pro_map{-moz-transition: all .2s ease-out 0s;-o-transition: all .2s ease-out 0s;-webkit-transition: all .2s ease-out;-webkit-transition-delay: 0s;transition: all .2s ease-out 0s;
}
#cont_city_map{-moz-transition: all .2s ease-out 0s;-o-transition: all .2s ease-out 0s;-webkit-transition: all .2s ease-out;-webkit-transition-delay: 0s;transition: all .2s ease-out 0s;}
/*返回省级地图按钮*/
.retPro{z-index:999;position: absolute;top:50px;left:10px;display: none;}
.retPro a{height:30px;line-height: 30px;border:1px solid #ccc;padding:5px 10px;margin-left:20px;border-radius:5px;cursor: pointer;}

　　记得在js下面引入省的json 与 省下市的地图json

 

最后来张效果图

 

本文为作者原创，转载请注明

 附上百度网盘：http://pan.baidu.com/s/1nvRwLGt

 github：https://github.com/oliverdai/echarts

如不能下载，请留言

转载于:https://www.cnblogs.com/dhforsite/p/6198579.html

这篇关于echarts 某省下钻某市地图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/659654。

相关文章

使用Folium在Python中进行地图可视化的操作指南

使用Folium在Python中进行地图可视化的操作指南

《使用Folium在Python中进行地图可视化的操作指南》在数据分析和可视化领域,地图可视化是一项非常重要的技能,它能够帮助我们更直观地理解和展示地理空间数据,Folium是一个基于Python的地... 目录引言一、Folium简介与安装1. Folium简介2. 安装Folium二、基础使用1. 创建
阅读更多...
无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
全英文地图/天地图和谷歌瓦片地图杂交/设备分布和轨迹回放/无需翻墙离线使用

全英文地图/天地图和谷歌瓦片地图杂交/设备分布和轨迹回放/无需翻墙离线使用

一、前言说明 随着风云局势的剧烈变化，对我们搞软件开发的人员来说，影响也是越发明显，比如之前对美对欧的软件居多，现在慢慢的变成了对大鹅和中东以及非洲的居多，这两年明显问有没有俄语或者阿拉伯语的输入法的增多，这要是放在2019年以前，一年也遇不到一个人问这种需求场景的。 地图应用这块也是，之前的应用主要在国内，现在慢慢的多了一些外国的应用场景，这就遇到一个大问题，我们平时主要开发用的都是国内的地
阅读更多...
Imageview在百度地图中实现点击事件

Imageview在百度地图中实现点击事件

1.首先第一步，需要声明的全局有关类的引用 private BMapManager mBMapMan; private MapView mMapView; private MapController mMapController; private RadioGroup radiogroup; private RadioButton normalview; private RadioBu
阅读更多...
MMO地图传送

MMO地图传送

本篇由以下四个点讲解： 创建传送点 传送点配置 编辑器扩展：传送点数据生成 传送协议与实现 创建传送点 建碰撞器触发 //位置归零 建一个传送门cube放到要传送的位置（这个teleporter1是传出的区域 这是从另一张地图传入时的传送门 创建一个脚本TeleporterObject给每个传送cube都绑上脚本 通过脚本，让传送门在编辑器下面还能绘制出来
阅读更多...
Echarts使用笔记--饼图，柱状图

Echarts使用笔记--饼图，柱状图

开始做前端了，感觉自己是要变成全栈工程师了。。。 今天使用了echart，用之前觉得好高大上好厉害，肯定很复杂。用了以后才发现，使用起来超简单，当然，精通很难，里面的各种配置太多了，本文记录一下自己用到的东西。 echart使用 现在直接引用js文件就可以了 <script src="echarts.min.js"></script> echart组件需要在一个宽高固定的DOM里才能显示
阅读更多...
【python web】Flask+Echarts 实现动图图表

【python web】Flask+Echarts 实现动图图表

flask 是python web开发的微框架，Echarts酷炫的功能主要是javascript起作用，将两者结合起来，发挥的作用更大。下面将Echarts嵌套进Flask的html模板中。 项目结构： 打开demo.py运行，点击console中的链接http://127.0.0.1:5000/ 就可以看到我们想要的动态图表。 demo.py #coding:utf-8fro
阅读更多...
ArcGIS Pro SDK （十三）地图创作 3 特殊图层

ArcGIS Pro SDK （十三）地图创作 3 特殊图层

ArcGIS Pro SDK （十三）地图创作 3 特殊图层 文章目录 ArcGIS Pro SDK （十三）地图创作 3 特殊图层1 高程表面图层1.1 创建具有地表图层的场景1.2 创建新的高程表面1.3 将自定义高程表面设置为 Z 感知图层1.4 将高程源添加到现有高程表面图层1.5 从地图中获取高程表面图层和高程源图层1.6 查找高程表面图层1.7 移除高程表面图层1.8 从曲面获
阅读更多...
激光SLAM如何动态管理关键帧和地图

激光SLAM如何动态管理关键帧和地图

0. 简介 个人在想在长期执行的SLAM程序时，当场景发生替换时，激光SLAM如何有效的更新或者替换地图是非常关键的。在看了很多Life-Long的文章后，个人觉得可以按照以下思路去做。这里可以给大家分享一下 <br/> 1. 初始化保存关键帧 首先对应的应该是初始化设置，初始化设置当中会保存关键帧数据，这里的对应的关键帧点云数据会被存放在history_kf_lidar当中，这个数据是和
阅读更多...
echarts 多个3D柱状图

echarts 多个3D柱状图

图片样式： 代码实现： <template><div :class="className" :style="{height:height,width:width}" /></template><script>require("echarts/theme/sakura"); // echarts themeexport default {props: {className: {typ
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2