5
使用echarts 绘制 中国地图/各省地图/市级地图 的3D地图

先上效果图

中国
image

四川省
image

成都市
image

dome代码地址 https://github.com/zhaosheng808/echarts-demo

3D地图说明

通过使用 series-map3D 可以绘制3D地图

快速开始

1.需要先下载echarts.js,然后额外下载 echarts-gl.js,并在页面中引入

<script type="text/javascript" src="./lib/echarts/echarts-4.9.0/echarts.min.js"></script>
<script type="text/javascript" src="./lib/echarts/echarts-gl.min.js"></script>

这个两个js文件可以在echarts官网下载也可以在上面给的dome项目中拷贝
echarts资源下载
echarts扩展下载

2.通过json导入地图数据

$.get('map/json/china.json', function (chinaJson) {
   echarts.registerMap('china', chinaJson); // 注册地图
   var chart = echarts.init(document.getElementById('main'));
   chart.setOption({ 
      series: [{ 
          type: 'map3D', // map、map3D
          map: 'china' // 注册的地图名称
      }] 
   });
});

中国地图/各省地图/市级地图
使用方式相同 唯一的区别是导入不同的 json 文件

demo项目中附带china.json以及各级省市json文件
/map/目录下有中国地图以及 各省市的 地图 json文件 /map/geoCitys.js是省市关联文件
level代表行政级别
code代表城市编码

地图数据json文件可能不准确 可以自行下载替换
DATAV


ZHAO_
454 声望11 粉丝

前端开发