Vue + Echarts + 百度地图实践

栏目: JavaScript · 发布时间: 6年前

内容简介：如果需要在线定制适合自己项目的echarts包，可以使用

npm install echarts@3.0.0 --save

如果需要在线定制适合自己项目的echarts包，可以使用 <script> 引入。建议开发环境使用 echarts.js

<script src="echarts.min.js"></script>

在调用echarts的组件内引入，也可以在mian.js里面全局引入 import echarts from 'echarts'

如果项目使用typescript，需要 npm install @types/echarts --save

ECharts 目前暂停地图下载，所以使用百度地图作为底图，需要安装百度地图扩展

2. 安装百度地图扩展

bmap.js 下载地址 https://github.com/apache/incubator-echarts/tree/master/extension/bmap

如果安装的是echarts完整包，里面包含百度地图扩展，路径为 echarts/extension/bmap/bmap.js

在项目里引入:

import 'echarts/extension/bmap/bmap' 或者 <script src="dist/extension/bmap.min.js"></script>

3. 引入百度地图jssdk

使用百度地图JavaScript API ，需要先注册申请秘钥： http://lbsyun.baidu.com/apiconsole/key/create

<script src="http://api.map.baidu.com/api?v=3.0&ak=秘钥"></script>
复制代码

百度地图的 个性地图 支持用户使用JavaScript API设置地图底图的样式风格以及控制组成地图底图的元素类的显示和隐藏。可以在个性化编辑平台定制适合自己项目的地图。编辑生成的JSON就是 bmap.mapStyle.styleJson 的值

4. 绘制地图

<template>
  <div ref="map" class="map">
  </div>
</template>

<script>
import echarts from 'echarts'
import linesData from './data.json' // 需要在地图上绘制的数据集
import 'echarts/extension/bmap/bmap'

export default {
    mounted () {
        const map = echarts.init(this.$refs.map)
        const option = {
            bmap: {
                center: [116.46, 39.92],
                zoom: 10,
                roam: true,
                mapStyle: {
                  styleJson: [{ // 地图样式设置
                        'featureType': 'water',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'land',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#f3f3f3'
                        }
                    }, {
                        'featureType': 'railway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'highway',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#fdfdfd'
                        }
                    }, {
                        'featureType': 'highway',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'poi',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'green',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'subway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'manmade',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'local',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'boundary',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'building',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'label',
                        'elementType': 'labels.text.fill',
                        'stylers': {
                            'color': '#999999'
                        }
                    }]
                }
            },
            series: [{
                type: 'lines',
                coordinateSystem: 'bmap', // 使用百度地图坐标系
                polyline: true,
                data: busLines,
                silent: true,
                lineStyle: {
                    normal: {
                        color: '#c23531',
                        color: 'rgb(200, 35, 45)',
                        opacity: 0.2,
                        width: 1
                    }
                },
                progressiveThreshold: 500,
                progressive: 200
            }]
        }
        map.setOption(option)
        // 获取到的百度地图对象bmap适用于所有的百度地图的接口
        const bmap = this.chart.getModel().getComponent('bmap').getBMap()
        bmap.addControl(new BMap.MapTypeControl())
}


</script>
<style>
.map {
    height: 1000px;
    width: 1000px;
}
</style>
复制代码

例子比较简单直接使用的是本地的数据集data.json，示例数据如下

[
    [1164383,401471,-11,-13,1,-49,-26,-14,99,-170,4,-36,87,-2,16,-141,-2,-15,-47,-6,-168,-9,-2,22,-74,-4,-138,10,12,-152,9,-55,-17,-111,13,-176,-20,-38,1,-57,31,-54,28,-85,-5,-126,-13,-62,1,-34,-84,1,-3,-218,15,6,78,2,4,-52,70,1,7,-142,99,2,21,-5,229,-150,16,-23,0,-180,168,1,-4,-257,82,0,33,-22,78,20],
    [1164311,399594,8,1,33,0,56,1,29,3,30,27,8,-5,21,-14,3,-2,1,-1,-4,-3,-13,-13,-21,-19,-9,-9,-16,-9,-93,-6,8,50,-100,-1,-1,0,-171,-3,-1,0,0,-1,0,-8,0,-15,1,-8,0,-28,0,-4,1,-11,0,-19,0,-12,2,-22,1,-26,1,-25,0,-25,1,-24,0,-4,2,-25,0,-1,0,-7,1,-28,2,-25,17,-30,0,-1,0,-2,2,-55,-44,-1,0,-32,1,0,48,3,11,0,12,-34,0,-7,-24,-9,0,-12,1,-12,0,-1,7,0,8,0,8,0,41,1,1,-10,0,-4,1,-5,0,-6,0,-3,2,-21,1,-12,0,-8,0,-2,2,0,31,-6,6,0,51,2,0,1,-70,0,7,13,7,5,30,22,1,1],
    [1163521,398776,16,1,55,2,47,1,0,1,0,0,0,4,0,8,0,1,-1,7,0,11,-1,16,0,4,0,15,-1,45,0,1,-1,16,-1,54,0,29,0,1,0,2,0,1,0,2,0,4,0,37,-1,7,0,7,0,18,107,0,2,0,30,0,129,2,56,2,36,1,22,1,53,1,47,2,7,0,8,0,8,0,41,1,2,1,17,0,4,0,10,0,33,1,7,0,18,0,1,-32,0,-2,37,0,1,0]
]
复制代码