<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地圖</title>
    <script src="js/echarts.js"></script>
    <script src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="map" style="width: 1000px;height: 800px"></div>
<script type="text/javascript">
    var dt = [
        {name:'芙蓉區(qū)', value: 40000.34,text:'貸款筆數(shù)：54412<br/>貸款金額：468452.35萬(wàn)',selected:true},
        {name:'岳麓區(qū)', value: 38000,text:'繳存人數(shù)：32412'},
        {name:'開(kāi)福區(qū)', value: 18000,text:'繳存人數(shù)：22412'},
        {name:'天心區(qū)', value: 15092,text:'繳存人數(shù)：42412'},
        {name:'雨花區(qū)', value: 28000,text:'繳存人數(shù)：52412'},
        {name:'望城區(qū)', value: 12000,text:'繳存人數(shù)：72412'},
        {name:'長(zhǎng)沙縣', value: 32000,text:'繳存人數(shù)：82412'},
        {name:'寧鄉(xiāng)縣', value: 5100,text:'繳存人數(shù)：6412'},
        {name:'瀏陽(yáng)市', value: 2200,text:'繳存人數(shù)：3412'},
        {name:'分中心', value: 4918,text:'繳存人數(shù)：66412'}
 
    ];
    var option = {
 
 
        title : {
            text: '長(zhǎng)沙市',
            subtext: '各區(qū)縣',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            type:'cross',
            /*   backgroundColor:"#ff7f50",//提示標(biāo)簽背景顏色
             textStyle:{color:"#fff"}, //提示標(biāo)簽字體顏色
             formatter:function(param){
             return dt[param.dataIndex].name + "<br />" +dt[param.dataIndex].text;
             } */
            alwaysShowContent: false,
            bordeRadius: 4,
            borderWidth: 1,
            borderColor: 'rgba(0,0,0,0.2)',
            backgroundColor: 'rgba(255,255,255,0.9)',
            padding: 0,
            // position: "top",
            textStyle: {
                fontSize: 12,
                color: '#333'
            },
            formatter: function(params) {
                var color = "#FFB84D";
                var a = "<div style='background-color:"+color+";padding: 5px 10px;text-align:center;color:white;font-size: 16px;'>" + dt[params.dataIndex].name + "</div>";
                var num = Math.ceil(params.data.name[1].length / 10);
                a += "<div style='padding:3px;'>";
                for (var i = 0; i < num; i++) {
                    a += dt[params.dataIndex].text + "<br>";
                }
                a += "</div>";
 
                return a;
            }
 
 
        },
        visualMap: {
            min: 800,
            max: 50000,
            text:['High','Low'],
            x:'left',
            y:'center',
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue','yellow', 'orangered']
            }
        },
        toolbox:{
            show : true,
            orient : 'vertical',
            x: 'right',
            y: 'center',
            borderColor: '#FFF',       // 工具箱邊框顏色
            borderWidth: 0,            // 工具箱邊框線寬，單位px，默認(rèn)為0（無(wú)邊框）
            padding: 5,                // 工具箱內(nèi)邊距，單位px，默認(rèn)各方向內(nèi)邊距為5，
            showTitle: false,
            feature : {
                saveAsImage: { show : true,
                    title : '保存為圖片',
                    type : 'jpeg'
                },
                restore: {show: true},
            }
        },
        series: [{
            name: '長(zhǎng)沙',
            type: 'map',
            map:'cs',
            // symbol:'../images/shine.jpg',
            //  symbolSize: 41,
            roam:true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
 
            layoutCenter: ['50%', '50%'],   //屬性定義地圖中心在屏幕中的位置，一般結(jié)合layoutSize 定義地圖的大小
//            layoutSize: 11200,
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:dt
        }]
    };
    $.get('json/cs.json', function (csJson) {
        echarts.registerMap('cs', csJson);
        var chart = echarts.init(document.getElementById('map'));
        chart.setOption(option);
    });
</script>
</body>
</html>

示意圖如下：

一個(gè)基本的地圖就出來(lái)了。

提出問(wèn)題

熟悉長(zhǎng)沙的人就會(huì)知道，在上面這個(gè)地圖中，多了一塊區(qū)域“分中心”，在長(zhǎng)沙的地圖板塊中是沒(méi)有這個(gè)區(qū)域的，那么我是怎樣將他改變成這樣的呢。

這其實(shí)是當(dāng)初用戶提出的一個(gè)需求，因?yàn)樗麄冎惺怯幸粋€(gè)分中心的，而長(zhǎng)沙地區(qū)是沒(méi)有這個(gè)地圖區(qū)域的，所以最后決定是添加一塊湖南縮略圖樣式的區(qū)域來(lái)代表這個(gè)分中心。

當(dāng)初也是找了很多資料，沒(méi)有找到合適的辦法，然后決定用兩個(gè)地圖來(lái)表示，然后給用戶看了樣式，用戶也覺(jué)得很滿意，但是在真正開(kāi)發(fā)過(guò)程中確遇到了很多問(wèn)題，數(shù)據(jù)不好一起展示和聯(lián)動(dòng)。后來(lái)也是找了很久才找到一個(gè)網(wǎng)站

自定義地圖

下面來(lái)講解這個(gè)網(wǎng)站如何使用：

打開(kāi)網(wǎng)址我們可以看到這個(gè)網(wǎng)站的樣子

網(wǎng)頁(yè)的左上角是菜單欄，在open選項(xiàng)中打開(kāi)我們需要編輯的json文件

open----->file

編輯完成之后在第二個(gè)save菜單中保存我們編輯的內(nèi)容即可

save------>GeoJSON

在網(wǎng)頁(yè)的中部有一塊區(qū)域就是我們需要重點(diǎn)掌握的畫圖工具

第一個(gè)就是根據(jù)點(diǎn)來(lái)繪圖，繪制的都是線條形狀的圖形

第二個(gè)就是多邊形，可以快速的繪制一個(gè)多邊形區(qū)域或者是比較復(fù)雜的地圖區(qū)域。

第三個(gè)就是矩形，能夠快速的繪制一個(gè)簡(jiǎn)單的矩形區(qū)域。

當(dāng)我們?cè)诘貓D上新增了一塊區(qū)域之后還要為這塊區(qū)域命名：

如圖：點(diǎn)擊這塊新增的區(qū)域，會(huì)出現(xiàn)一個(gè)該區(qū)域的屬性框，點(diǎn)擊Add按鈕，新增一個(gè)name屬性值為分中心。這樣就完成了地圖區(qū)域的增加。

上面這個(gè)圖的左上角就是我自己繪制的，長(zhǎng)沙的地圖原本是只有下面這塊區(qū)域的。

有了地圖的增加，那么必然會(huì)有地圖的合并。

以長(zhǎng)沙為例，假如由于行政區(qū)域的劃分，開(kāi)福區(qū)和芙蓉區(qū)合并為一個(gè)區(qū)，那么我們就需要在地圖上將這兩個(gè)區(qū)進(jìn)行合并。

首先將這兩個(gè)區(qū)刪除:點(diǎn)擊芙蓉區(qū)和開(kāi)福區(qū)然后把他們兩個(gè)刪除掉

刪除后的樣子是這樣

可以看到中間空了一塊區(qū)域，然后再利用我們的點(diǎn)畫圖工具再地圖上的那塊空白區(qū)域進(jìn)行繪制即可，利用多邊形畫圖工具將空白區(qū)域的點(diǎn)鏈接起來(lái)即可，在繪制過(guò)程中利用鼠標(biāo)滾輪盡量把地圖擴(kuò)大這樣方便繪制并且繪制的更加精密，最后將它的名字修改成合并后的名字即可。

最后將繪制完成的保存到本地即可。

地圖的東西大概就是這么多，有問(wèn)題的可以留言一起討論。

最后送上一個(gè)3D版的地圖：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/echarts.js"></script>
    <script src="../js/echarts-gl.js"></script>
    <script src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="mp" style="height: 700px;width: 100%;margin:0px;padding: 0px;"></div>
<script>
    var dt = [
        {name:'芙蓉區(qū)', value: 1,height:2.5},
        {name:'岳麓區(qū)', value: 2,height:3.5},
        {name:'開(kāi)福區(qū)', value: 3,height:4.5},
        {name:'天心區(qū)', value: 4,height:1.5},
        {name:'雨花區(qū)', value: 5,height:5.5},
        {name:'望城區(qū)', value: 6,height:3.5},
        {name:'長(zhǎng)沙縣', value: 7,height:2.5},
        {name:'寧鄉(xiāng)縣', value: 8,height:4.5},
        {name:'瀏陽(yáng)市', value: 9,height:5.5}
    ];
    var option = {
       // backgroundColor: "#333",
        geo3D:[{
            show:true,
            type:'map',
            map:'cs',
            symbolSize: 1300,
//            environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
//                offset: 0, color: '#00aaff' // 天空顏色
//            }, {
//                offset: 0.7, color: '#998866' // 地面顏色
//            }, {
//                offset: 1, color: '#998866' // 地面顏色
//            }], false),
            environment:'../images/shine.jpg',
            groundPlane: {
                show: false,
                color: "#0080FF"
            },
            shading: 'realistic',
          //  backgroundColor:'red',
 
 
 
            itemStyle: {
                areaColor: '#fff',
                opacity:1,
                borderColor: "rgba(100,149,237,1)",
                borderWidth: 2
            },
            label: {
                show:true,
                textStyle: {
                    color: '#ff0000'
                }
            },
            emphasis:{
                label:{
                    show:true,
                    distance: 2
                    //formatter: ''
                },
                itemStyle:{
                    color:'#EF7E10',
                    opacity:1
                }
            },
            instancing: false,
            width: "100%",
            height: "100%",
            boxWidth: 160,
            boxHeight: 2,
            regions: dt
        }],
        series:[{
            bevelSmoothness: 50,
            type: "bar3D",
            coordinateSystem: "geo3D",
            backgroundcolor:'blcak',
            data:[{
                name:'芙蓉區(qū)',value:[112.988094,28.193106,2.5],itemStyle: {
                    color: "#dd6b66"
                }},
                {name:'岳麓區(qū)',value:[112.911591,28.213044,2.5],itemStyle: {
                    color: "#759aa0"
                }},
                {name:'開(kāi)福區(qū)',value:[112.985525,28.201336,2.5],itemStyle: {
                    color: "#e69d87"
                }},
                {name:'天心區(qū)',value:[112.97307,28.192375,2.5],itemStyle: {
                    color: "#8dc1a9"
                }},
                {name:'雨花區(qū)',value:[113.016337,28.109937,2.5],itemStyle: {
                    color: "#ea7e53"
                }},
                {name:'望城區(qū)',value:[112.819549,28.347458,2.5],itemStyle: {
                    color: "#eedd78"
                }},
                {name:'長(zhǎng)沙縣',value:[113.080098,28.237888,2.5],itemStyle: {
                    color: "#73a373"
                }},
                {name:'寧鄉(xiāng)縣',value:[112.553182,28.253928,2.5],itemStyle: {
                    color: "#73b9bc"
                }},
                {name:'瀏陽(yáng)市',value:[113.633301,28.141112,2.5],itemStyle: {
                    color: "#7289ab"
                }
                }],
            maxHeight: 20,
            minHeight:0,
            barSize: 4
 
        }]
    };
    $.get('../json/cs.json', function (chinaJson) {
        echarts.registerMap('cs', chinaJson);
        var chart = echarts.init(document.getElementById('mp'));
        chart.setOption(option);
    })
</script>
</body>
</html>

效果圖：