vue集成echarts导入百度地图实现个人轨迹的的可视化

最新推荐文章于 2024-06-19 17:33:44 发布
最新推荐文章于 2024-06-19 17:33:44 发布
阅读量1.3k 收藏 7
点赞数 2
分类专栏： echarts bmap vue 文章标签： 百度 可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45523066/article/details/107389779
版权
echarts 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
bmap
2 篇文章 0 订阅
订阅专栏
vue
2 篇文章 0 订阅
订阅专栏

第一步申请百度地图的ak

URL：http://lbsyun.baidu.com/apiconsole/key?application=key

第二步在vue中引入百度地图 

在public下的index.html中引入

如下

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=A3CklGvnFOjkAzKzay2dySgfdig0GKz4"></script>

在main.js中导入echarts

import echarts from "echarts";
import "echarts/extension/bmap/bmap";
Vue.prototype.$echarts = echarts

在组件中加载百度地图并实现轨迹可视化

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

<script>
/* eslint-disable */

export default {
  name: "Map",
  data() {
    return {
      chart: "",
      bmap: {}, //定义一个当前的bmap
      mapStyle: {
        styleJson: [
          {
            featureType: "land",
            elementType: "geometry",
            stylers: {
              color: "#081734"
            }
          },
          {
            featureType: "building",
            elementType: "geometry",
            stylers: {
              color: "#04406F"
            }
          },
          {
            featureType: "building",
            elementType: "labels",
            stylers: {
              visibility: "off"
            }
          },
          {
            featureType: "highway",
            elementType: "geometry",
            stylers: {
              color: "#015B99"
            }
          },
          {
            featureType: "highway",
            elementType: "labels",
            stylers: {
              visibility: "off"
            }
          },
          {
            featureType: "arterial",
            elementType: "geometry",
            stylers: {
              color: "#003051"
            }
          },
          {
            featureType: "arterial",
            elementType: "labels",
            stylers: {
              visibility: "off"
            }
          },
          {
            featureType: "green",
            elementType: "geometry",
            stylers: {
              visibility: "off"
            }
          },
          {
            featureType: "water",
            elementType: "geometry",
            stylers: {
              color: "#044161"
            }
          },
          {
            featureType: "subway",
            elementType: "geometry.stroke",
            stylers: {
              color: "#003051"
            }
          },
          {
            featureType: "subway",
            elementType: "labels",
            stylers: {
              visibility: "off"
            }
          },
          {
            featureType: "railway",
            elementType: "geometry",
            stylers: {
              visibility: "off"
            }
          },
          {
            featureType: "railway",
            elementType: "labels",
            stylers: {
              visibility: "off"
            }
          },
          {
            featureType: "all",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#313131"
            }
          },
          {
            featureType: "all",
            elementType: "labels.text.fill",
            stylers: {
              color: "#FFFFFF"
            }
          },
          {
            featureType: "manmade",
            elementType: "geometry",
            stylers: {
              visibility: "off"
            }
          },
          {
            featureType: "manmade",
            elementType: "labels",
            stylers: {
              visibility: "off"
            }
          },
          {
            featureType: "local",
            elementType: "geometry",
            stylers: {
              visibility: "off"
            }
          },
          {
            featureType: "local",
            elementType: "labels",
            stylers: {
              visibility: "off"
            }
          },
          {
            featureType: "subway",
            elementType: "geometry",
            stylers: {
              lightness: -65
            }
          },
          {
            featureType: "railway",
            elementType: "all",
            stylers: {
              lightness: -40
            }
          },
          {
            featureType: "boundary",
            elementType: "geometry",
            stylers: {
              color: "#8b8787",
              weight: "1",
              lightness: -29
            }
          }
        ]
      },
      geoCoordMap: [
        {
          name: "西9",
          value: [108.92025114773189, 34.25127182306254],
          tooltip: {
            formatter: "时间:8:30am<br/>出发地:中海锦城南苑"
          }
        },
        {
          name: "技术研究所",
          value: [108.91814012978332, 34.2491905888672],
          tooltip: {
            formatter: "时间:8:30am<br/>出发地:中海锦城南苑"
          }
        },
        {
          name: "幼儿园",
          value: [108.92196691125595, 34.25130166210155],
          tooltip: {
            formatter: "时间:8:30am<br/>出发地:中海锦城南苑"
          }
        },
        {
          name: "3号楼",
          value: [108.9203050460625, 34.25211477180376],
          tooltip: {
            formatter: "时间:8:30am<br/>出发地:中海锦城南苑"
          }
        },
        {
          name: "书海楼",
          value: [108.91941572360761, 34.25026474923389],
          tooltip: {
            formatter: "时间:8:30am<br/>出发地:中海锦城南苑"
          }
        },
        {
          name: "公共管理硕士教育中心",
          value: [108.9202241985666, 34.25035426740013],
          tooltip: {
            formatter: "时间:8:30am<br/>出发地:中海锦城南苑"
          }
        },
        {
          name: "材料科技B段",
          value: [108.91815809589365, 34.25025728938237],
          tooltip: {
            formatter: "时间:8:30am<br/>出发地:中海锦城南苑"
          }
        },
        {
          name: "健翔楼",
          value: [108.92203877569675, 34.25215952990572],
          tooltip: {
            formatter: "时间:8:30am<br/>出发地:中海锦城南苑"
          }
        }
      ],
      line: [
        {
          fromName: "技术研究所",
          toName: "材料科技大楼B段",
          coords: [
            [108.91814012978332, 34.2491905888672],
            [108.91815809589365, 34.25025728938237]
          ]
        },
        {
          fromName: "材料科技B段",
          toName: "书海楼",
          coords: [
            [108.91815809589365, 34.25025728938237],
            [108.91941572360761, 34.25026474923389]
          ]
        },
        {
          fromName: "书海楼",
          toName: "公共管理硕士教育中心",
          coords: [
            [108.91941572360761, 34.25026474923389],
            [108.9202241985666, 34.25035426740013]
          ]
        },
        {
          fromName: "公共管理硕士教育中心",
          toName: "西9",
          coords: [
            [108.9202241985666, 34.25035426740013],
            [108.92025114773189, 34.25127182306254]
          ]
        },
        {
          fromName: "西9",
          toName: "3号楼",
          coords: [
            [108.9202241985666, 34.25035426740013],
            [108.9203050460625, 34.25211477180376]
          ]
        },
        {
          fromName: "3号楼",
          toName: "健翔楼",
          coords: [
            [108.9203050460625, 34.25211477180376],
            [108.92203877569675, 34.25215952990572]
          ]
        },
        {
          fromName: "健翔楼",
          toName: "幼儿园",
          coords: [
            [108.92203877569675, 34.25215952990572],
            [108.92196691125595, 34.25130166210155]
          ]
        }
      ],
      // COLORS:["red", "yellow", "pink", "#900"]
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.chart = this.$echarts.init(this.$refs.map);
      //初始化echarts
      this.chart.setOption({
        animation: false,
        legend: {
          orient: "vertical",
          top: 30,
          left: 30,
          // data: linesData.map(v => v.name),
          textStyle: {
            color: "#222222"
          },
          selectedMode: "multiple"
        },
        bmap: {
          // 加载 bmap 组件
          center: [108.92203428416926, 34.2510330778021],
          zoom: 18,
          roam: true,
          label: {
            show: true
          },
          mapStyle: this.mapStyle
        },
        // visualMap: {
        //   type: "piecewise",
        //   inverse: true,
        //   top: 10,
        //   left: 10,
        //   pieces: [
        //     {
        //       value: 0,
        //       color: this.COLORS[0]
        //     },
        //     {
        //       value: 1,
        //       color: this.COLORS[1]
        //     },
        //     {
        //       value: 2,
        //       color: this.COLORS[2]
        //     },
        //     {
        //       value: 3,
        //       color: this.COLORS[3]
        //     }
        //   ],
        //   borderColor: "#ccc",
        //   borderWidth: 2,
        //   backgroundColor: "#eee",
        //   dimension: 2,
        //   inRange: {
        //     color: this.COLORS,
        //     opacity: 0.7
        //   }
        // },
        tooltip: {
          // show: true,
          // trigger: "item",
          // hideDelay: 4000,
          // formatter: function(d) {
          //   var tool = "经度：" + d.value[0] + "<br/>";
          //   tool += "纬度：" + d.value[1];
          //   console.log(tool)
          //   return tool;
          // }
        },
        series: [
          {
            name: "地点",
            type: "effectScatter",
            coordinateSystem: "bmap",
            polyline: true,
            data: this.geoCoordMap,
            silent: true,
            // label: {
            //   normal: {
            //     show: true,
            //     position: "right",
            //     formatter: "{b}",
            //     color: "yellow"
            //   }
            // },
            symbolSize: 13,
            showEffectOn: "render",
            itemStyle: {
              normal: {
                color: "red"
              }
            },
            progressiveThreshold: 10,
            progressive: 400
          },
          {
            name: "轨迹路线",
            type: "lines",
            coordinateSystem: "bmap",
            silent: true, // 图形不响应和触发鼠标事件
            polyline: true,
            lineStyle: { color: "red", width: "4" },
            z: 15,
            data: this.line,
            effect: {
              show: true,
              period: 3, //轨迹移动的实体指向速度，值越小速度越快
              trailLength: 0.5, //特效尾迹长度[0,1]值越大，尾迹越长重
              color: "yellow",
              symbol:
                "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z", //轨迹移动的实体
              symbolSize: 15 //图标大小
            }
          }
        ]
      });
      this.bmap = this.chart
        .getModel()
        .getComponent("bmap")
        .getBMap();
      this.bmap.addControl(
        new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT })
      ); // 在左下角显示比例尺控件
      // this.bmap.addEventListener("click", function(e) {
      //   alert(e.point.lng + "," + e.point.lat);
      // });
    }
  }
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 900px;
}
</style>

到此就应用成功啦。。

网上的例子vue中的比较少，所以分享。给大家参考参考！

doran_M
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
echarts加载离线百度地图
jiegiser博客
05-18 4339
最近在做一个国网的一个项目，需要实现一些热力图以及冒泡式的标注等；而且需要在内网使用，感觉使用 echarts 就可以简单的实现无需加载类似 openlayers ，leaflet 等 webgis 框架然后再发布地图服务实现。下面就写一下实现的过程。 实现思路 百度地图API文件 创建本地工具资源文件getModules.js 地图瓦片 百度地图API文件 下载 API 文件 首先需要准备离线的百度地图 API 文件，浏览器打开地址：http://api.map.baidu.com/api?v=2.0
echarts离线百度地图+demo（演示）+步骤文档（超详细）
05-04
环境在内网，又需要echarts结合百度地图，请参考本资源。里面有echarts+离线百度地图+demo+步骤文档（超详细）。百分百能用，用过麻烦好评，谢谢。
vue + echarts + ( bmap) 百度地图 实现公交、骑行、车辆 轨迹图
QIingBo的博客
10-23 2665
vue + echarts + ( bmap) 百度地图 实现公交、骑行、车辆 轨迹图 最终目标 最终目标：个性化的实现公交路线图 先看看效果以免白看一场，如果你是想实现类似的效果可以继续往下看 码起！！！ 1.申请百度地图的AK 进入百度开发者平台 ==> 点击 控制台 ==> 应用管理 如果没有应用创建应用 应用类型：浏览器端 白名单： 暂时填写 * 吧 后期上线可以再修改 2. 在 vue 的页面将 AK 写进入 2.1 打开如图所示的 html 文件 2.2 插入一段 scrtipt
高德地图轨迹回放/轨迹播放
最新发布
小谭鸡米花的博客
06-19 979
前端实现高德地图轨迹回放/轨迹播放
echarts + 离线百度地图 + 散点图配置
qq_43209807的博客
02-22 3595
最近在做一个国网的一个项目，需要实现一些散点图功能；而且需要在内网使用，感觉使用 echarts 就可以简单的实现无需加载类似 openlayers ，leaflet 等 webgis 框架然后再发布地图服务实现。
前端 百度地图 javascript api 在线地图, 离线地图
powerFulCat的博客
03-08 3929
前端 百度地图 javascript api 在线地图, 离线地图在线地图登录百度api获取key注册为个人开发者后, 创建应用离线地图 (瓦片地图)下载离线瓦片地图二, 下载api.js一些常用api难找见的api 在线地图 在线地图, 百度地图 api + echarts 优: 方便快捷, 示例丰富, 简单上手, 可在线编辑, 直接下载, 随后稍微修改就可 缺: 商用要花钱, 老板不高兴 百度地图api: https://lbsyun.baidu.com/jsdemo.htm#webgl0_1
echarts+百度地图实现个人轨迹-点随线顺序移动
08-28
在本文中，我们将深入探讨如何使用ECharts与百度地图结合，来实现个人轨迹的动态展示，其中亮点是点随线顺序移动的效果。ECharts是一款基于JavaScript的数据可视化库，而百度地图则是国内广泛应用的地图服务提供商。...
Vue Echarts实现可视化世界地图代码实例
11-28
Echarts实现可视化世界地图模拟迁徙，以我自己开发过程。 下载Echarts依赖： npm install echarts 成功以后引入依赖： import echarts from 'echarts' peopleInsertCharts为生成echarts容器。 let myChart = ...
vue基于Echarts的拖拽数据可视化功能实现
01-21
我司产品提出了一个需求，做一个数据基于Echars的可拖拽缩放的数据可视化，上网百度了一番，结果出现了两种结局，一种花钱买成熟产品（公司不出钱），一种没有成熟代码，只能自己写了，故事即将开始，敬请期待……。...
基于Vue和Echarts的大屏数据可视化设计源码
03-28
这是一个基于Vue和Echarts的大屏数据可视化设计，使用Javascript语言开发，包含104个文件。主要文件类型包括51个JSON文件、21个JavaScript文件、14个Vue文件、3个PNG图片文件、2个HTML文件、2个CSS文件、1个...
ECharts实现某省份热图、轨迹图和线图等例子
02-06
百度ECharts实现的地图方面的例子，某省份的热图、轨迹图和线图等例子。
echarts地图飞线实现
06-25
echarts地图展示、地图飞线，地图线行展示，大气、简洁、好看。
echarts+百度地图实现动态炫酷路线走势图
qq_40920553的博客
07-28 2017
代码】echarts+百度地图实现动态炫酷路线走势图。
高德地图里面自定义多个Marker，Marker设置缩放动画
baidu_41624013的博客
10-13 2883
Android 在高德地图里面自定义多个Marker，Marker设置缩放动画 一、使用步骤 1.引入库 在app的build.gradle里面添加 implementation files(‘libs/Android_Map3D_SDK_V7.4.0_20200416.jar’) implementation files(‘libs/AMap_Search_V7.3.0_20200331.jar’) 2.xml代码 <com.xishui.mapview.CommonMapView
echarts+百度地图
猿飞梦的博客
08-27 3766
 使用echarts实现百度地图功能（需要下载bmap.js）： 效果图如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;百度地图&lt;/title&gt; &lt;meta name="viewport&qu
echarts json 地图_Qt编写的项目作品20-百度地图综合应用(在线+离线+区域)
weixin_39942037的博客
11-24 207
一、功能特点同时支持闪烁点图、迁徙图、区域地图、仪表盘等。可以设置标题、提示信息、背景颜色、文字颜色、线条颜色、区域颜色等各种颜色。可设置城市的名称、值、经纬度 集合。可设置地图的放大倍数、是否允许鼠标滚轮缩放。内置世界地图、全国地图、省份地图、地区地图，可以精确到县，所有地图全部离线使用。内置了各省市json数据文件转js文件功能，如有数据更新自行转换即可，支持单个文件转换和一键转换所有文件。...
百度地图3.0离线地图教程和echarts的结合使用
热门推荐
GentleMannn的博客
01-21 1万+
百度地图版本2.0和3.0区别对比 http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/usage 1、找到百度地图的主文件 1.1 输入地址：http://api.map.baidu.com/api?v=3.0&amp;ak=您的密钥 找到&lt;script type="text/javascript"&gt;标签里的...
原生html 使用echarts实现地图轨迹
一个超爱喝可乐的web前端攻城狮
12-09 3981
原生html 使用echarts 地图
vue3 echarts 使用百度地图
02-29
Vue3是一个用于构建用户界面的JavaScript框架，而Echarts是一个用于数据可视化的JavaScript库。百度地图是百度提供的地图服务，可以在网页中展示地图和相关的地理信息。 要在Vue3项目中使用Echarts和百度地图，可以...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值