echarts-市地图

echarts-深圳市地图

这里，我选择绘制的是深圳市地图，只展示区。数据来源于高德开放平台，部分可能存在误差：
1.数据来源
数据来源地址：http://datav.aliyun.com/tools/atlas/index.html#&lat=22.859177836173288&lng=113.68440594166313&zoom=12.5

在下图中区域，先选择省份，然后再从省份区域图中选择想要的市（我选择的市深圳市），选择市后，右边会有对应的市API和JSON。注意看右边当前选择的市是否正确。

下图的JSON可以下载

2.获取方式
我直接采用的是JQuery请求API获取，代码如下：

//css#main{width: 100%;height:700px;margin: 0 auto;}

//html
<body><div id="main"></div>
</body>

//js
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
//初始化
initMap();
function initMap(){$.get("https://geo.datav.aliyun.com/areas_v3/bound/440300_full.json", function (map) {var myChart = echarts.init(document.getElementById('main'));echarts.registerMap("shenzhen", map);var option = {tooltip: {trigger: 'item'},series: [{map: "shenzhen",type: "map",aspectScale: 1.0,selectedMode: 'single',//选择类型,hoverable: false,//鼠标经过高亮roam: true,//鼠标滚轮缩放itemStyle: {normal: {borderWidth: 1,borderColor: '#0692a4',//区域边框色areaColor: '#142957',//区域背景色label: {show: true,textStyle: {color: '#6495ED',//文字颜色fontSize: 16      //文字大小}}},emphasis: {                 // 选中样式borderWidth: 1,borderColor: '#00ffff',areaColor: '#142957',color: '#0b1c2d',label: {show: true,textStyle: {color: '#fff'}}}}}]};myChart.setOption(option);});
}
</script>

效果如下：

echarts-市地图相关推荐

地图统计_博客城市访问量统计并且通过Echarts+百度地图展示
本篇讲解一下如何在Vue 中使用 Echarts + 百度地图统计博客访问量并且通过QQWry 解析 ip 地址利用Echarts 展示出来效果图如下: 1.纯真Ip地址库 QQWry 这 ...
echarts实现地图飞线
echarts实现地图飞线 echarts画地图 echarts画地图由于地图需要省市区经纬度,需要geoJSON数据,我们使用aliyun官方的JSON数据,以中国地图为例(链接: link.). ...
数据视化Echarts+百度地图API实现市县区级下钻
开始这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
获取省市区geoJson数据（精确到县、镇）用于echarts实现地图数据可视化
写在前面本文着重介绍关于获取数据的部分,如果数据处理好了,不会使用echarts将地图绘制出来,可以参考echarts的官方文档,或去搜寻大佬们的教程,或者另外问我,我再写一份我自己理解的关于ech ...
echarts全国地图资源，省份名称居中
echarts 全国地图资源 echarts全国地图资源全国地图山东黑龙江吉林辽宁北京天津河北河南山西陕西内蒙古安徽江苏上海浙江福建台湾广东香港澳门广西江 ...
Vue 使用 Apache Echarts 绘制地图（拓展篇）
前言根据大家的私信.留言,还是决定对地图这块的东西进行拓展讲解一下,希望大家能够真正了解.使用.绘制自己想要的地图效果,让大家彻底弄懂Echarts地图,涉及绘制原理.行政区划.SVG地图.地图打点 ...
Echarts离线地图开发--实现web端初始化世界地图，其他国家钻取到行政区，中国钻取到省市区的展示
背景:公司原本使用高德在线地图,但是由于有的客户是使用内网的,造成地图打开是空白的.于是,增加了离线地图功能,通过页签切换地图,默认展示在线地图,点击离线页签时,展示的是echarts离线地图. 重要 ...
echarts做地图
1.echarts需要的地图数据格式 echarts 渲染地图使用的市标准的geoJson格式 {"type": "FeatureCollection",&qu ...
echarts实现地图下钻
公司的新项目需要写这样的地图,还要能两级下钻到省,下面是我写好了的样子,我今天就是复一下盘: 如何用echarts显示地图首先需要下载map的Json数据,我放到这里:mapJson 然后使用ech ...
java echarts 散点图,echarts在地图上绘制散点图（任意点）
项目需求:在省份地图上绘制散点图,散点位置不一定是哪个城市或哪个区县,即任意点通过查询官网文档,找到一个与需求类似的Demo:https://www.echartsjs.com/gallery/ed ...

echarts-市地图

echarts-深圳市地图

echarts-市地图相关推荐

最新文章

热门文章