本文紧接前文，简单说明利用shp数据制作Echarts支持的geoJson格式的地图数据。本文以北京市通州区各镇的shp数据为例进行说明。
软件环境：
ArcGIS 10.2 (ArcGIS 10.2安装传送门)
1. 加载数据，将shp数据加载到ArcMap中
2.为shp数据增加一个name字段
由于Echarts默认以name为字段标识地区名称，因此要为shp数据增加一个name字段，其值为各镇名称。保存数据。
3.转化为geoJson格式
这里利用一个在线转化工具进行数据转换，地址：http://mapshaper.org/
点击 select 按钮
选择步骤1中的shp数据
点击 Export 选择 GeoJson 进行导出
4.引入geoJson
- var mapChart;
- var option;
- //use json file to make map layer
- $.get('../../js/Beijing_TZQ_TOWN.json', function (beijingJson) {
- echarts.registerMap('北京', beijingJson);
- mapChart = echarts.init(document.getElementById('map-wrap'));
- option = {
- title:{
- text: '通州区各镇人口密度图',
- left: 'center'
- },
- tooltip: {
- trigger: 'item',
- formatter: '{b}<br/>{c} (个)'
- },
- toolbox: {
- show: true,
- orient: 'vertical',
- left: 'right',
- top: 'left',
- feature: {
- dataView: {readOnly: false},
- restore: {},
- saveAsImage: {}
- }
- },
- visualMap: {
- min: 0,
- max: 2000,
- text:['高','低'],
- realtime: false,
- calculable: true,
- inRange: {
- color: ['lightskyblue','yellow', 'orangered']
- }
- },
- series:[
- {
- name: '通州区各镇',
- type: 'map',
- map: '北京', // 自定义扩展图表类型
- aspectScale: 1.0, //长宽比. default: 0.75
- zoom: 1.1,
- roam: true,
- itemStyle:{
- normal:{label:{show:true}},
- emphasis:{label:{show:true}}
- },
- data: [] //需要动态加载data内容
- }
- ]
- }
- mapChart.setOption(option);
- });
这里特别要注意的是：series中 map属性要为'北京'，这个根据你geoJson数据所表示的地区而定，加入你制作的是西安市geoJson数据，这里map要写'陕西'，这样初始地图的大小才较为合适。
5.最终效果