项目需求:根据后台的包含经纬度的数据,在百度地图上点出位置,显示分布图。
先看最后的效果图:
1、npm安装Echarts,过程略。
2、 在百度地图平台申请ack码,必须有才能在后面的步骤中引入全部的地图数据
3、在index.html主页面引入百度地图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>XXX系统</title>
<!--引入百度地图-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己申请的ak码" ></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4、在webpack.base.conf.js中配置
。。。。。
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? './' + config.build.assetsPublicPath
: './' + config.dev.assetsPublicPath
},
// 新增关于地图的配置
externals: {
'BMap': 'BMap'
},
。。。
5、在页面中按需引入并使用:
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import 'echarts/extension/bmap/bmap' // 引入百度地图插件
// import BMap from 'echarts/extension/bmap/bmap'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '280px'
}
},
data() {
return {
chart: null,
dataPoint: [{
name: '齐齐哈尔',
log: 123.97,
lat: 47.33,
remark: '2'
},
{
name: '赤峰',
log: 118.87,
lat: 42.28,
remark: '5'
},
{
name: '成都',
log: 104.06,
lat: 30.67,
remark: '3'
}
]
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
async initChart() {
try {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
tooltip: {
trigger: 'item',
formatter: (params) => {
return '设备数' + params.value[2]
}
},
bmap: {
center: [116.3964, 39.9093],
zoom: 2,
roam: true,
mapStyle: {
styleJson: [
{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#044161'
}
},
{
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#004981'
}
},
{
'featureType': 'boundary',
'elementType': 'geometry',
'stylers': {
'color': '#064f85'
}
},
{
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'highway',
'elementType': 'geometry',
'stylers': {
'color': '#004981'
}
},
{
'featureType': 'highway',
'elementType': 'geometry.fill',
'stylers': {
'color': '#005b96',
'lightness': 1
}
},
{
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#004981'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#00508b'
}
},
{
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'green',
'elementType': 'all',
'stylers': {
'color': '#056197',
'visibility': 'off'
}
},
{
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'local',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'boundary',
'elementType': 'geometry.fill',
'stylers': {
'color': '#029fd4'
}
},
{
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#1a5787'
}
},
{
'featureType': 'label',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}
]
}
},
series: [
// 点数据
{
name: '设备数',
type: 'scatter', // 类型,表示点数据
coordinateSystem: 'bmap',
data: this.convertPointData(this.dataPoint), // 数据源
symbolSize: 8, // 标记点大小
// 标记样式:可使用svg图标
symbol: 'path://M512 64C306.4 64 140 230.4 140 436c0 101.6 40.8 194.4 107.2 261.6L512 960l264-263.2c66.4-67.2 107.2-159.2 107.2-261.6C884 230.4 717.6 64 512 64z m128 331.2c-4.8 62.4-54.4 112-116.8 116.8-75.2 6.4-138.4-53.6-138.4-127.2 0-70.4 57.6-128 128-128 73.6 0 133.6 63.2 127.2 138.4z',
// 角度信息
symbolRotate: 0,
// 鼠标选中说明
label: {
normal: {
formatter: '{b}', // tooltip显示,自定义参考上方例子
position: 'left', // 对齐
show: false // 是否一直显示
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F06C00' // 颜色信息
}
}
}
]
})
// const bmap = this.chart.getModel().getComponent('bmap').getBMap()
// bmap.addControl(new BMap.MapTypeControl())
} catch (err) {
console.log(err)
}
},
convertPointData(data) {
var res = []
for (const item in data) {
res.push({
name: data[item].name,
value: [data[item].log, data[item].lat, data[item].remark]
})
}
return res
}
}
}
</script>
我注释掉了// const bmap = this.chart.getModel().getComponent('bmap').getBMap() // bmap.addControl(new BMap.MapTypeControl())
这段百度地图的操作设置。
拓展一下,对应的散点图、热力图,都可以操作了。