在实现vue中地图可视化之前。我们先来看看如何渲染百度地图。
百度地图的简单使用
先申请百度地图秘钥：lbsyun.baidu.com/index.php?t…
获取秘钥：lbsyun.baidu.com/apiconsole/…
申请秘钥后，引入百度地图js库，将百度地图api挂载到window上。
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#map {width: 100%;height: 100%;}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
<title>地图展示</title>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script type="text/javascript">
// 创建Map实例
const map = new BMapGL.Map("map");
// 初始化中心点坐标
const point = new BMapGL.Point(116.404, 39.915);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 12);
// 开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
</script>
具体用法请访问百度地图官网 lbsyun.baidu.com/index.php?t…
web中实现百度地图可视化
mapv库: 主要是提供一些方法。获取数据
mapvgl库：主要是绘制数据源。
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
绘制数据源：
- 生成mapvgl视图view。就是在百度地图上添加一层画布。
- 初始化mapvgl的PointLayer对象。在画布和数据添加映射关系。
- 将PointLayer对象加入到view。
- 将数据与PointLayer进行绑定。
下面是一个百度地图绘制散点图的案列
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
// 这个库是简化初始化百度地图对象的
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
<title>地图展示</title>
</head>
<body>
<div id="map_container"></div>
<script type="text/javascript">
var map = initMap({
tilt: 0,
heading: 0,
center: [103.438656,25.753594],
zoom: 8,
style: snowStyle,
skyColors: [
// 地面颜色
'rgba(226, 237, 248, 0)',
// 天空颜色
'rgba(186, 211, 252, 1)'
]
});
setData(initData());
function initData() {
var data = [];
var citys = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
];
var randomCount = 700;
// 构造数据
while (randomCount--) {
var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);
data.push(
{
geometry: {
type: 'Point',
coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
},
properties: {
count: Math.random() * 100
}
});
}
return data;
}
function setData(data) {
// 生成mapvgl视图view。就是在百度地图上添加一层画布。
var view = new mapvgl.View({
map: map
});
var intensity = new mapvgl.Intensity({
gradient: {
0: 'rgb(25, 66, 102, 0.8)',
0.3: 'rgb(145, 102, 129, 0.8)',
0.7: 'rgb(210, 131, 137, 0.8)',
1: 'rgb(248, 177, 149, 0.8)'
},
maxSize: 30,
minSize: 5
});
// 初始化mapvgl的PointLayer对象。在画布和数据添加映射关系。
var pointLayer = new mapvgl.PointLayer({
blend: 'lighter',
size: function (data) {
return intensity.getSize(data.properties.count);
},
color: function (data) {
return intensity.getColor(data.properties.count);
}
});
// 将数据与PointLayer进行绑定。
pointLayer.setData(data);
// 将PointLayer对象加入到view。
view.addLayer(pointLayer);
}
</script>
</body>
</html>
更多案例请访问官网 mapv.baidu.com/gallery.htm…
下面就要介绍百度地图通过echarts在vue中实现可视化了。。。。有点小激动。
vue中通过echarts来实现百度地图的可视化
使用注意事项：
- 当图表不能显示的时候，注意看是否给定了组件宽高。
- 选项的使用请看echarts的官网。
npm i -S vue-echarts echarts
引入百度地图的js库。注意需要引入的是第二版本的。否则不兼容vue-echarts。
百度地图 <script src="https://api.map.baidu.com/api?v=2.0&ak=key"></script>
高德地图 <script src="https://webapi.amap.com/maps?v=1.4.3&key=key"></script>
vue2中的使用
如果安装了最新版本的vue-echarts。还需要安装
npm i -D @vue/composition-api
import VueECharts from 'vue-echarts'
import ECharts from 'echarts'
Vue.prototype.$echarts = ECharts
Vue.component('vue-echarts', VueECharts)
// 使用
// 注意这里的props是options。到了vue-echarts v6就改成了option了。
<vue-echarts :options="option"/>
// 默认有一个echarts的class属性
// 引用bmap的echarts的扩展
import 'echarts/extension/bmap/bmap'
// option中的bamp组件
const option = {
bmap: {
key: 'G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb',
center: [104.114129, 37.550339],
zoom: 5,
roam: false
}
}
如果未导入import 'echarts/extension/bmap/bmap'
vue3中的使用
绘制一个散点图
<template>
// 默认宽高是100%， 所以要将父元素设置宽高，才会显示散点。
<vue-echarts :option="option"></vue-echarts>
</template>
<script>
import { ref } from 'vue'
import 'echarts/extension/bmap/bmap'
const data = [
{ name: '海门', value: 9 },
{ name: '鄂尔多斯', value: 12 },
{ name: '招远', value: 12 },
{ name: '舟山', value: 12 },
{ name: '齐齐哈尔', value: 14 },
{ name: '盐城', value: 15 },
{ name: '赤峰', value: 16 },
{ name: '青岛', value: 18 },
{ name: '乳山', value: 18 },
{ name: '金昌', value: 19 },
{ name: '泉州', value: 21 },
{ name: '莱西', value: 21 },
{ name: '日照', value: 21 },
{ name: '胶南', value: 22 },
{ name: '南通', value: 23 },
{ name: '拉萨', value: 24 },
{ name: '云浮', value: 24 },
{ name: '梅州', value: 25 },
{ name: '文登', value: 25 },
{ name: '上海', value: 25 },
{ name: '攀枝花', value: 25 }
]
const geoCoordMap = {
海门: [121.15, 31.89],
鄂尔多斯: [109.781327, 39.608266],
招远: [120.38, 37.35],
舟山: [122.207216, 29.985295],
齐齐哈尔: [123.97, 47.33],
盐城: [120.13, 33.38],
赤峰: [118.87, 42.28],
青岛: [120.33, 36.07],
乳山: [121.52, 36.89],
金昌: [102.188043, 38.520089],
泉州: [118.58, 24.93],
莱西: [120.53, 36.86],
日照: [119.46, 35.42],
胶南: [119.97, 35.88],
南通: [121.05, 32.08],
拉萨: [91.11, 29.97],
云浮: [112.02, 22.93],
梅州: [116.1, 24.55],
文登: [122.05, 37.2],
上海: [121.48, 31.22],
攀枝花: [101.718637, 26.582347]
}
const convertData = function (data) {
const res = []
for (let i = 0; i < data.length; i++) {
const geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
})
}
}
return res
}
export default {
name: 'HelloWorld',
setup() {
const option = ref({
title: {
text: '散点图',
},
bmap: {
// 这里是百度地图申请的ak
key: 'XMXwpnzh2in7SuulLeibVVOmdooOBxqj',
center: [104.114129, 37.550339],
zoom: 5,
roam: false,
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: [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10
},
encode: {
value: 2,
},
label: {
formatter: '{b}',
position: 'right',
show: false,
},
itemStyle: {
color: 'purple',
},
emphasis: {
label: {
show: true,
},
},
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(
data
.sort(function (a, b) {
return b.value - a.value
})
.slice(0, 6)
),
symbolSize: function (val) {
return val[2] / 10
},
encode: {
value: 2,
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke',
},
hoverAnimation: true,
label: {
formatter: '{b}',
position: 'right',
show: true,
},
itemStyle: {
color: 'purple',
shadowBlur: 10,
shadowColor: '#333',
},
zlevel: 1,
},
],
})
return {
option,
}
},
}
</script>
具体案例请看官网 echarts.apache.org/examples/zh…
还有其他案例 github.com/apache/echa…
V-charts
只能在vue2中使用，它不兼容vue3。
优点：不需要引入echarts对百度地图的扩展和百度地图的js库。
安装
npm install v-charts echarts
vue2使用百度
// main.js
import VeBmap from 'v-charts/lib/bmap.common.js';
Vue.component(VeBmap.name, VeBmap);
<template>
<ve-bmap :settings="chartSettings"
:series="chartSeries"
:tooltip="chartTooltip">
</ve-bmap>
</template>
<script>
export default {
name: 'VChartsMap',
data() {
this.chartSettings = {
key: 'XMXwpnzh2in7SuulLeibVVOmdooOBxqj',
bmap: {
center: [120, 30],
zoom: 14,
roam: true,
mapStyle: {},
},
}
this.chartTooltip = { show: true }
return {
chartSeries: [
{
type: 'scatter',
coordinateSystem: 'bmap',
data: [
[120, 30, 1], // 经度，维度，value，...
],
},
],
}
},
}
</script>
具体请看中文官网 woolen.gitee.io/v-charts/#/…
