在实现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'
网络异常，图片无法展示
|
