概述

如有不明白的可以加QQ：2781128388
源码获取：https://mbd.pub/o/bread/Y5uck5dp

开发了一个高德地图视角实时更新的项目demo，先看视频效果

高德地图+echarts 马拉松大屏项目

初始化地图

创建一个初始化地图的类ZMap, 写入initMap方法加载地图

initMap(option) {let config = {resizeEnable: true,center: [116.479126, 39.998563],zoom: 20,pitch: 65,rotation: 4.509173845626157,viewMode: '3D', //开启3D视图,默认为关闭buildingAnimation: true, //楼块出现是否带动画}this.map = new AMap.Map(this.id, Object.assign(config, option));window.map = this.map;}

在场景中调用即可此方法即可

创建马拉松路线

原理，根据起始点和终点获取中间经过的所有点，然后保存成数组，生成路线

setDriving(start, end) {if (!this.driving) {let drivingOption = {}this.driving = new AMap.Driving(drivingOption);}return new Promise(resolve => {this.driving.search(start, end, function (status, result) {if (status === 'complete') {console.log(result);if (result.routes && result.routes[0].steps.length) {let path = [];let roads = [];result.routes[0].steps.forEach(item => {roads.push({roadName: item.road,position: [item.end_location.lng, item.end_location.lat]})item.path.forEach(step => {path.push([step.lng, step.lat])})});resolve({path,roads})}}});})}

输入两个坐标即可获取所有点，根据点数组画线和路标文本

export function drawRoute(app, pathInfo) {app.loaderMarker({position: pathInfo.path[0]});app.loaderMarker({position: pathInfo.path[pathInfo.path.length - 1],icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png'});app.loaderPolyline({path: pathInfo.path});pathInfo.roads.forEach(item => {if (item.roadName) {let text = app.loaderText({text: item.roadName, position: item.position})text.setMap(app.map);}});
}

接下来在创建一条线表示马拉松当前进行到的位置

passedPolyline = app.loaderPolyline({strokeColor: "#AF5",strokeWeight: 8,});

marker = app.loaderMarker({icon: '',position: pathInfo.path[0],});

最后我们在给market绑定移动物体事件，在移动物体的时候更新marker的位置和设置线条即可，此处代码可以看博客中的高德地图3D轨迹回放 + 视野跟随功能此文章，有具体的代码写法
左右两侧的报表是基于datav和echarts做的，很简单，这里就不介绍了，最后的效果

高德地图+echarts 大屏项目相关推荐

基echarts实现的地图，大屏数据可视化
基echarts实现的地图,大数据数据可视化 1.课程目标: 实践css布局相关技术实践jquery相关技术掌握echarts的基本使用 2.项目介绍我们要完成这个项目:需要使用一些基础的DIV ...
数据大屏项目Vue+DataV+Echarts(附源码)
一.项目描述 1 前端项目 1.1 项目简介一个基于 Vue.datav.Echart 框架的 " 数据大屏项目 ",通过 vue 组件实现数据动态刷新渲染,内部图表可实现自由替 ...
三原县地图可视化大屏数据三原县地图.js
三原县地图可视化大屏数据前言可视化大屏数据在学习地图可视化数据的时候,发现在网上只能找到省.市.县的地图json数据,到县级别只能到县,数据却不能精确到镇.网上没有三原精确到镇的json数据,于 ...
ECharts大屏可视化
文章目录 ECharts大屏可视化一.项目概述 1.1 项目介绍 1.2 项目架构 1.3 使用环境二.数据获取 1.获取腾讯数据 1.1数据爬取 1.2数据存储
高德地图+Echarts+Vue
@[TOC]高德地图+Echarts+Vue 高德地图+Echarts+Vue 先上效果图 1.创建后vue项目后下载echarts和高德地图插件 npm install amap-echarts n ...
可视化大屏项目：学生就业统计展示
最近在学习前端开发,顺便做了一个项目,学生就业统计展示,可以直观的看到学生就业数据统计.由静态数据提供展示,使用Css3+Html5+JavaScript进行开发.源代码可以到文章底部扫码进行购买. ...
Echarts+大屏
先放上我做的大屏吧,做的不是很好看,希望大家能见谅. 一.实验目的理解大数据可视化的原理和方法掌握ECharts可视化的原理.步骤和效果掌握使用D3读取数据的方法二.实验任务与要求通过网店运 ...
基于 Spring Boot + Vue 实现的可视化拖拽编辑的大屏项目
大家好,今天给小伙伴们分享一个基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目: 简介这个是一个开源的一个BI平台,酷炫大屏展示,能随时随地掌控业务动态,让每个决策都有数据支撑 ...
实际工作中，一个完整的可视化大屏项目有哪些步骤？
这两年数据可视化大屏成为了各家公司的网红,老板动不动开口就要"酷炫大屏",大屏的应用场景确实很多,不仅能实时监控重点数据,提高决策效率,放在公司会议室,展台等地方,还能提升公司形象 ...

高德地图+echarts 大屏项目

高德地图+echarts 大屏项目

概述

初始化地图

创建马拉松路线

高德地图+echarts 大屏项目相关推荐

最新文章

热门文章