用shp制作geoJson格式地图数据(shp convert to geoJson)

本文紧接前文，简单说明利用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

1. var mapChart;
2. var option;
3. //use json file to make map layer
4. $.get('../../js/Beijing_TZQ_TOWN.json', function (beijingJson) {
5. echarts.registerMap('北京', beijingJson);
6. mapChart = echarts.init(document.getElementById('map-wrap'));
7. option = {
8. title:{
9. text: '通州区各镇人口密度图',
10. left: 'center'
11. },
12. tooltip: {
13. trigger: 'item',
14. formatter: '{b}<br/>{c} (个)'
15. },
16. toolbox: {
17. show: true,
18. orient: 'vertical',
19. left: 'right',
20. top: 'left',
21. feature: {
22. dataView: {readOnly: false},
23. restore: {},
24. saveAsImage: {}
25. }
26. },
27. visualMap: {
28. min: 0,
29. max: 2000,
30. text:['高','低'],
31. realtime: false,
32. calculable: true,
33. inRange: {
34. color: ['lightskyblue','yellow', 'orangered']
35. }
36. },
37. series:[
38. {
39. name: '通州区各镇',
40. type: 'map',
41. map: '北京', // 自定义扩展图表类型
42. aspectScale: 1.0, //长宽比. default: 0.75
43. zoom: 1.1,
44. roam: true,
45. itemStyle:{
46. normal:{label:{show:true}},
47. emphasis:{label:{show:true}}
48. },
49. data: [] //需要动态加载data内容
50. }
51. ]
52. }
53. mapChart.setOption(option);
54. });

这里特别要注意的是：series中 map属性要为'北京'，这个根据你geoJson数据所表示的地区而定，加入你制作的是西安市geoJson数据，这里map要写'陕西'，这样初始地图的大小才较为合适。

5.最终效果