Echart + 百度地圖實現區域聚合（Vue版）

時間  2019-12-06
標籤 echart 百度 地圖 實現 區域 聚合 vue 欄目 設計模式 简体版
原文   原文鏈接

Echart + 百度地圖實現區域聚合（Vue版）

百度地圖的聚合很簡單，可是根據區域聚合怎麼實現呢？結合Echart的百度地圖怎麼實現區域聚合呢？json

單獨玩過Echart,也單獨用過百度地圖，可是兩個結合起來使用還整沒用過呢， Echart的API中有相應的地圖註冊方法，那麼通常地圖都是須要加載底圖的，在Echart中加載地圖底圖的方式有三種。後端

Echart中加載地圖底圖

百度地圖

使用百度地圖時，咱們須要先引入百度地圖API，而後在series中引入的其餘要素層中，coordinateSystem的值必須設置爲bmap，也就是其餘層的數據，以bmap地圖做爲空間座標系統的參考；bash

const options = {  
        bmap: {
            center: [108.95, 34.27], // 西安
            zoom: 6,
            roam: true,
            label: {
                show: true,
            },
            mapStyle:{
                styleJson: mapStyle, // 定義bmap的樣式
            },
        }
        series: [{
            type: 'scatter',
            // 注意這個地方必定要設置爲bmap
            coordinateSystem: 'bmap',  
            data: data,
          }
       ]
     }
複製代碼

json方式註冊地圖（registerMap）

這種方式底圖數據以json（geojson）格式存儲，在獲取json格式的數據後，採用registerMap進行手動註冊，給地圖取一個名字。EChart中使用的方法，可參考官方示例；網絡

fetch('/get/china.json', (china) => {
    echart.registerMap('china', china);
})

const options = {  
        series: [{
            type: 'map',
            map: 'china', // 這裏設置本身的註冊的map
            data: data,
          }
       ]
     }
複製代碼

series中的map爲用戶本身註冊的地圖。registerMap只能註冊面狀要素的json數據，對點、線無效！echarts

script 引入結合geo方式

這種方式的底圖數據，能夠直接用 script 標籤引入包含數據的 js 文件，引入後會自動註冊地圖名字和數據，如，引入後EChart自動對地圖進行註冊ide

const options = {  
        geo: {
            center: [108.95, 34.27], // 西安
            zoom: 6,
            roam: true,
            label: {
                show: true,
            },
            mapStyle:{
                styleJson: mapStyle, // 定義bmap的樣式
            },
        }
        series: [{
            type: 'scatter',
            // 注意這個地方必定要設置爲geo
            coordinateSystem: 'geo',  
            data: data,
          }
       ]
     }
複製代碼

series中的coordinateSystem必須設置爲 geo，即採用的座標系統參考與geo中定義的地圖保持一致；geo方式也只適用於面狀地圖數據，對點和線要素數據無效！fetch

咱們的這個需求既有點要素，也有線要素， Echart點、線要素加載動畫

series中type設置爲line/lines實現線要素。 series中type設置爲scatter/effectScatter實現點要素。ui

參數coordinateSystem設置爲bmap（百度地圖），this

Echart + 百度地圖實現多點

const options = {  
    bmap: {
        center: [108.95, 34.27], // 西安
        zoom: 6,
        roam: true,
        label: {
            show: true,
        },
        mapStyle: 
            {
                styleJson: mapStyle,
            },
    },
    title: {
        text: '網絡線路分佈',
        left: 'center',
        textStyle: {
            color: '#fff',
        },
    },
    tooltip: {
        trigger: 'item',
    },
    series: [
    {
        type: 'scatter',
        coordinateSystem: 'bmap',
        data: this.covertStopData(),
        tooltip: {
            formatter: '{b}',
        },
        symbolSize: 20,
        label: {
            normal: {
                formatter: '{b}',
                position: 'inside',
                show: true,
            },
            emphasis: {
                show: true,
            },
        },
        itemStyle: {
            normal: {
                color: '#fff',
            },
        },
        zlevel: 1,
    }],
};
複製代碼

也可使用effectScatter啊， 效果以下：

Echart + 百度地圖實現多點按照行政區域聚合

咱們以前在使用百度地圖的時候都知道啊，百度地圖的聚合是不能作到按照行政區域來聚合的，他的一個聚合方式我也沒用深刻研究過，可是如今咱們要是實現按照行政區域聚合怎麼處理呢？ 因而我求助了後端。哈哈哈 分三個等級，

zoom [百度縮放比例]
<= 6 [表示省份，請求省份數據]
<=8 && > 6 [表示市，請求市級數據]
> 8 [表示區, 請求區域數據]
複製代碼

根據zoom的變化，來update圖表的顯示數據 添加監聽器事件「bmaproam」，當zoom變化時重新請求數據。而且update圖表

this.myChart =window.echarts.init(document.getElementById('chart'));
this.myChart.on('bmaproam', () => {
    const _options = this.myChart.getOption();
    const zoom = _options.bmap[0].zoom;
    if (zoom === this.defaultZoom) return;
    if (zoom > 8) {
        this.stop_level = 3;
    } else if (zoom > 6 && zoom <= 8) {
        this.stop_level = 2;
    } else if (zoom <= 6) {
        this.stop_level = 1;
    }
    this.defaultZoom = zoom;
    this.fetchData();
});
複製代碼

整合數據，根據不一樣的level設置不一樣的點大小

covertStopData() {
    const res = [];
    const data = this.stopData;
    const colors = ['#79D12E', '#F9DE1C', '#DA3838'];
    const size = [35, 25, 20];
    const length = data.length;
    for (let i = 0; i < length; i++) {
    res.push({
        name: data[i].name,
        value: [data[i].lng, data[i].lat, data[i].total],
        itemStyle: {
            // color按照本身的需求設置，
            color: colors[data[i].level - 1],
        },
        symbolSize: size[this.stop_level - 1],
    });
    }
    return res;
}
複製代碼

Echart部分代碼

const options = {  
    bmap: {
        center: [108.95, 34.27], // 西安
        zoom: 6,
        roam: true,
        label: {
            show: true,
        },
        mapStyle: 
            {
                styleJson: mapStyle,
            },
    },
    title: {
        text: '網絡線路分佈',
        left: 'center',
        textStyle: {
            color: '#fff',
        },
    },
    tooltip: {
        trigger: 'item',
    },
    series: [
    {
        type: 'scatter',
        coordinateSystem: 'bmap',
        data: this.covertStopData(),
        tooltip: {
            formatter: '{b}',
        },
        symbolSize: 20,
        label: {
            normal: {
                formatter: '{b}',
                position: 'inside',
                show: true,
            },
            emphasis: {
                show: true,
            },
        },
        itemStyle: {
            normal: {
                color: '#fff',
            },
        },
        zlevel: 1,
    }],
};
this.myChart.setOption(options);
複製代碼

效果以下： 區

市
省

就這樣實現了按區域聚合的功能

Echart + 百度地圖實現多線路+多點

實現了多點，要實現多線路就很簡單了，在series中的type設置爲lines就能夠了，

const options = {  
    bmap: {
        center: [108.95, 34.27], // 西安
        zoom: 6,
        roam: true,
        label: {
            show: true,
        },
        mapStyle: 
            {
                styleJson: mapStyle,
            },
    },
    title: {
        text: '網絡線路分佈',
        left: 'center',
        textStyle: {
            color: '#fff',
        },
    },
    tooltip: {
        trigger: 'item',
    },
    series: [
    {
        type: 'scatter',
        coordinateSystem: 'bmap',
        data: this.covertStopData(),
        tooltip: {
            formatter: '{b}',
        },
        symbolSize: 20,
        label: {
            normal: {
                formatter: '{b}',
                position: 'inside',
                show: true,
            },
            emphasis: {
                show: true,
            },
        },
        itemStyle: {
            normal: {
                color: '#fff',
            },
        },
        zlevel: 1,
    }，
     {
        type: 'lines',
        coordinateSystem: 'bmap',
        polyline: false, 
        slient: true,
        data: this.busLines,
        symbol: ['none', 'arrow'],
        symbolSize: 5,
        tooltip: {
            formatter: '{b}:{c}',
        },
        silent: true,
        label: {
            show: true,
            formatter: '{b}:{c}',
        },
        lineStyle: {
            normal: {
                opacity: 1,
                curveness: 0.3,
            },
        },
        progressiveThreshold: 500,
        progressive: 200,
        zlevel: 2,
    },
    {
        type: 'lines',
        coordinateSystem: 'bmap',
        polyline: false,
        data: this.busLines,
        lineStyle: {
            normal: {
                width: 1.5,
                curveness: 0.3,
            },
        },
        effect: {
            show: true,
            symbol: 'circle',
            constantSpeed: 40,
            trailLength: 0,
            symbolSize: 4,
        },
        animation: true,
        zlevel: 2,
    },
    ],
};
this.myChart.setOption(options);
複製代碼

注意，第一個lines是設置這一條線，第一個lines是設置沿着這條線跑的動畫。 效果以下：

具體的樣式能夠根據本身的需求來進行設置。 若是想了解更多，歡迎關注公衆號
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程