用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

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.最終效果