Echarts使用心得------3D地圖渲染

最近開始寫前端了，好多東西都在摸索，比之前要忙了，但是筆記還是要記的，趁難得閑下來，總結總結最近的一些新東西。

用Echarts做三維地圖，需要有GeoJson數據，且對數據是有要求的，

 想要繪出地圖，它其中properties的屬性中必須要有name字段，我一開始shp里面的字段名叫NAME，是大寫的，導出為geojson后就讀不出來了，改為小寫就好了，巨坑。

另：坐標系要4326的

第一步：獲取數據：

    function analyseJSON(_url, _callback) {
        let url = _url;
        let request = new XMLHttpRequest();
        request.open("get", url);
        request.send(null);
        request.onload = function () {
            if (request.status == 200) {/*返回狀態為200，即為數據獲取成功*/
                var json = request.responseText;
                _callback(json);
            }
        }
    }

第二步：注冊地圖

  echarts.registerMap("紹興", getJSON);

第三部：構造三維地圖

    // 引入JSON文件
    analyseJSON('./紹興區縣.json', function (getJSON) {
        var myChart = echarts.init(document.getElementById('main'));
        echarts.registerMap("紹興", getJSON);
        let inputData = [565464, 117230.34, 74130.95, 41375.41, 43099.39, 127574.2, 86198.78, 75854.93];
        let data2 = [                // 可對單個地圖區域進行設置
            {
                name: '越城區',
                value: inputData[2],
                itemStyle: {                // 單個區域的樣式設置
                    color: '#e78078',
                },
            },
            {
                name: '上虞區',
                value: inputData[4],
                itemStyle: {                // 單個區域的樣式設置
                    color: '#98a3af',
                },
            },
            {
                name: '柯橋區',
                value: inputData[3],
                itemStyle: {                // 單個區域的樣式設置
                    color: '#3f93d3',
                },
            },
            {
                name: '諸暨市',
                value: inputData[6],
                itemStyle: {                // 單個區域的樣式設置
                    color: '#1bbac4',
                }
            },
            {
                name: '嵊州市',
                value: inputData[7],
                itemStyle: {                // 單個區域的樣式設置
                    color: '#0ac88f',
                },
            },
            {
                name: '新昌縣',
                value: inputData[5],
                itemStyle: {                // 單個區域的樣式設置
                    color: '#12c0ae',
                },
            }
        ];
        //構造
        let option = {
            tooltip: { // 提示框
                trigger: 'item',
                formatter: function (params) {
                    //console.log(params)
                    return params.name + ":" + params.value;
                }
            },
            series: [
                {
                    name: '紹興',
                    type: 'map3D',
                    map: '紹興',  //必須和上面注冊的地圖名稱一致，詳細可以看ECharts的GL配置說明
                    boxDepth: 100, //地圖傾斜度
                    regionHeight: 2, //地圖厚度
                    light: {
                        main: {
                            intensity: 1.5
                        }
                    },
                    label: {
                        show: true, //是否顯示市
                        textStyle: {
                            color: "#333333", //文字顏色
                            fontSize: 16, //文字大小
                            fontFamily: '微軟雅黑',
                            backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
                        },
                    },
                    data: data2,
                    itemStyle: {
                        opacity: 1, // 透明度
                        borderWidth: 1, //分界線寬度
                        borderColor: "#808080", //分界線顏色
                        color: "#ffffff"
                    },
                    emphasis: {
                        itemStyle: {
                            color: "#D3D3D3"
                        },
                    },
                    groundplane: {
                        show: false
                    },
                    shading: 'realistic',
                    // 真實感材質相關配置 shading: 'realistic'時有效
                    realisticMaterial: {
                        detailTexture: '#fff', // 紋理貼圖
                        textureTiling: 1, // 紋理平鋪，1是拉伸，數字表示紋理平鋪次數
                        roughness: 0, // 材質粗糙度，0完全光滑，1完全粗糙
                        metalness: 0, // 0材質是非金屬 ，1金屬
                        roughnessAdjust: 0
                    },
                    viewControl: {
                        distance: 135, // 地圖視角 控制初始大小
                        rotateSensitivity: 1, // 旋轉
                        zoomSensitivity: 1, // 縮放
                    },
                }

            ],
        };
        myChart.setOption(option);
    });

最終效果