一般情況下，我們的功能需求並不是要整個地圖來展示，也許只是需要某一個市或地區的一個形狀來製作出一個地圖效果，這個時候其實使用 Echarts 地圖是一個不錯的選擇。

由於Echarts 官方下架了地圖資料的下載，所以可以採用自己製作的方式來滿足需求。

shp檔案準備

shp檔案為地圖向量檔案，使用ArcMap給shp檔案的屬性表中新增 name 屬性，因為Echarts 是通過 name 屬性來配置地圖，將shp檔案轉換為網頁專門使用的 web墨卡託系統，將shp匯出，選擇資料框選項才能生效。座標系轉換及請自行搜尋方法。（一般情況下使用Web墨卡託，4326）

將shp檔案轉換為geojosn檔案

方法一：

使用 geotools 工具後臺轉換，geotools是一個java的庫，裡面有很多處理地理物件的方法
示例程式碼(Java)：

package com.kay;

import org.geotools.data.shapefile.ShapefileDataStore;
import org.geotools.data.simple.SimpleFeatureCollection;
import org.geotools.data.simple.SimpleFeatureIterator;
import org.geotools.data.simple.SimpleFeatureSource;
import
 
 org.geotools.geojson.feature.FeatureJSON;
import org.json.simple.JSONArray;
import org.opengis.feature.simple.SimpleFeature;
import java.io.*;
import java.nio.charset.Charset;

/**
 * Created by kay on 2018/2/1.
 */
public class ShpFormatUtil {

    public static void shp2Json(String shpPath){
        StringBuffer sb = new
 
 StringBuffer();
        FeatureJSON fjson = new FeatureJSON();
        try{
            sb.append("{\"type\": \"FeatureCollection\",\"features\": ");

            File file = new File(shpPath);
            ShapefileDataStore shpDataStore = null;

            shpDataStore = new ShapefileDataStore(file.toURL());
            //設定編碼
            Charset charset = Charset.forName("UTF-8");
            shpDataStore.setCharset(charset);
            String typeName = shpDataStore.getTypeNames()[0];
            SimpleFeatureSource featureSource = null;
            featureSource =  shpDataStore.getFeatureSource (typeName);
            SimpleFeatureCollection result = featureSource.getFeatures();
            SimpleFeatureIterator itertor = result.features();
            JSONArray array = new JSONArray();
            while (itertor.hasNext())
            {
                SimpleFeature feature = itertor.next();
                StringWriter writer = new StringWriter();
                fjson.writeFeature(feature, writer);
                array.add(writer);
            }
            itertor.close();
            sb.append(array.toString());
            sb.append("}");
            //寫到檔案
            writeToFile("E:\\workspace\\GISFile\\testFile\\beijing.geojson",sb.toString());
        }
        catch(Exception e){
            e.printStackTrace();
        }

    }


    /**
     *  寫出到檔案
     * @param targetFile  目標檔案路徑
     * @param soure         json
     */
    public static void writeToFile(String targetFile,String soure) {
        File file = new File(targetFile);

        try {
            OutputStream os = new FileOutputStream(file);
            OutputStreamWriter osw = new OutputStreamWriter(os);
            osw.write(soure);
            osw.flush();
            osw.close();

        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

}

方法二：使用現成的轉換工具

-> 網站：http://mapshaper.org/ 上傳shp匯出 json檔案
-> Geoserver 轉換，上傳到geoserver然後匯出（其實也是geotools）

通過對比發現geotools轉換的檔案要小一些，不知道是不是偶然，沒研究。

使用Echarts載入 json

引入 echarts和 jquery的js檔案

/**
 *  Created by Kay
 */

var mapChart2;
var option;
//bj.json 即為我們將shp匯出的json檔案
$.get('data/bj.json', function (beijingJson) {
    echarts.registerMap('bj', beijingJson);
    mapChart2 = echarts.init(document.getElementById('mapDiv2'));
    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: ['高', '低'],
            calculable: true,
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            }
        },
        series: [
            {
                name: '北京市各區',
                type: 'map',
                map: 'bj', // 自定義擴充套件圖表型別
                aspectScale: 1.0, //長寬比. default: 0.75
                zoom: 1.1,
                roam: false,    //是否開啟滑動和縮放
                itemStyle: {
                    normal: {label: {show: true}},
                    emphasis: {label: {show: true}}
                },
                data: [
                    {name: '昌平區', value: 100},
                    {name: '朝陽區', value: 200},
                    {name: '大興區', value: 300},
                    {name: '東城區', value: 800},
                    {name: '房山區', value: 1000},
                    {name: '豐臺區', value: 1500},
                    {name: '海淀區', value: 2300},
                    {name: '懷柔區', value: 1340},
                    {name: '門頭溝區', value: 2425},
                    {name: '密雲區', value: 1555},
                    {name: '平谷區', value: 700},
                    {name: '石景山區', value: 652},
                    {name: '順義區', value: 200},
                    {name: '通州區', value: 200},
                    {name: '西城區', value: 200},
                    {name: '延慶區', value: 200}
                ]
            }
        ]
    }
    mapChart2.setOption(option);
});

效果