echarts-extension-mbmap

参考

本组件来自于mapbox-echarts，主要是做了重命名，之所以这么做，主要考虑到mpbox-echarts和其他的几个echarts的地图扩展命名规则不一致，不利于开发者搜索。

Demo

热力图

散点图

mapbox-echarts

ECharts extension for visualizing data on mapbox. Require mapbox-gl and echarts.

How to install

with script tag

<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-extension-mbmap@1.0.0/dist/echarts-extension-mbmap.js"></script>    

with npm

npm install mapbox-gl echarts mapbox-echarts

import 'mapbox-gl'
import echarts from 'echarts'
import 'echarts-extension-mbmap'

Usage

use 'mapbox' as Echarts coordinateSystem

mapboxgl.accessToken = 'pk.eyJ1Ijoid2xmZWkiLCJhIjoiY2puMTB6MXZlNHZjcTNwbnl3dnowYjhoaSJ9.s6ZkjRHGIY6xVNBRAf52MQ';

var myChart = echarts.init(document.getElementById('echarts-container'));

let option = {
    // 取消动画、保持与地图同步移动
    animation: false,
    tmap: {
        center: [120.13066322374, 30.240018034923],
        zoom: 3,
        roam: true,
        style: 'mapbox://styles/mapbox/navigation-night-v1'
    },
    series: [{
        name: 'pm2.5',
        type: 'scatter',
        coordinateSystem: 'tmap',
        data: convertData(data),
        symbolSize: function (val) {
            return val[2] / 10;
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#ddb926'
            }
        }
    }, {
        name: 'Top 5',
        type: 'effectScatter',
        coordinateSystem: 'tmap',
        data: convertData(data.sort(function (a, b) {
            return b.value - a.value;
        }).slice(0, 6)),
        symbolSize: function (val) {
            return val[2] / 10;
        },
        showEffectOn: 'render',
        rippleEffect: {
            brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        zlevel: 1
    }]
}

myChart.setOption(option);