Node-RED系列（二五）：集成高德地图并实现3d地图和轨迹回放

前言

在上一篇文章中我向大家介绍了如何在node-red中使用高德地图的api sdk。并向大家展示了如何使用template来显示一个地图组件。那么本篇文件中我就教大家如何实现实现一个3D地图显示到面板上。
并实现一个地图中常用的功能，轨迹回放，这在路线规划，车辆导航中非常使用。结合其他的功能也能实现酷炫的效果。下面详细介绍一个这两个案例。

3d地图的显示

要制作一个3d地图，仅仅引入sdk是不够的，还需要引入其他的插件。

高德地图的 JS API 3D 地图是基于矢量地图数据提供的新的地图视图效果，相比 2D 地图增加了对旋转、视角倾斜等地图功能的支持。3D 地图基于 WEBGL 开发，在保证流畅度的同时，增加了对无级别缩放等功能的支持。
看一下效果

下面我们来实现一下该案例。

首先在node-red的编辑面板里，引入template节点，编写节点的内容。

引入/amap-loader.js

配置高德地图KEY,加载SDK

编写初始化地图的代码

AMapLoader.load({ //首次调用 load</

Node-RED系列（二五）：集成高德地图并实现3d地图和轨迹回放相关推荐

Android - 简单的显示高德SDK中的3D地图
简单的显示高德SDK中的3D地图身为一个安卓小白,前几天试了一下高德SDK,踩了几个蠢蠢的坑,秉承着别让其他小白也踩到,我就写一篇怎么简单的实现高德SDK显示地图与小蓝点的教程. 获得key 1.先 ...
HttpClientFactory系列二：集成Polly处理瞬态故障
前言:最近,同事在工作中遇到了使用HttpClient,有些请求超时的问题,辅导员让我下去调研一下,HttpClinet的使用方式已经改成了之前博客中提到的方式,问题的原因我已经找到了,就是因为使用了 ...
echarts省级地图展示(包含3D地图)
1.npm i echarts --save // main.js import * as echarts from 'echarts'; Vue.prototype.$echarts = echar ...
Android--高德地图通过经纬度简单的实现轨迹回放
效果图: 1.首先去高德地图官网去申请key,然后下载相关jar包. /*** Created by Administrator on 2019/5/31* <p>* desc:轨迹回放* ...
【地图导航】3D地图软件是如何做路径规划的？为什么准确率这么高
3D地图软件是一类拥有三维地图的功能,可以让大家在电脑上更加直观的看到国内各地的大街小巷,帮助更好的制定出行路线,让旅游出行更加方便快捷.软件还能够提供当地的海拔.建筑等信息,还有高清的实景图片,满足 ...
地图定位之3D 地图
在 iOS7以后,手机上就可以实现3D 地图效果了.其实,实现3D 地图效果并不难,就是几行代码的事. 在 iOS7中引入了一个新的 MKMapCamera 类,它将一个 MKMapCamera 对象 ...
MP实战系列(二)之集成swagger
其实与spring+springmvc+mybatis集成swagger没什么区别,只是之前写的太不好了,所以这次决定详细写. 提到swagger不得不提rest,rest是一种架构风格,里面有对不同 ...
【深入浅出Node.js系列十一】Node.js开发框架Express4.x
为什么80%的码农都做不了架构师?>>> #0 系列目录# 深入浅出Node.js系列 [深入浅出Node.js系列一]什么是Node.js [深入浅出Node.js系列二]N ...
新手跑通3D地图demo
在面对一些导航.打车.代驾等项目时,这些功能总会用到LBS(Location Based Service),即基于位置的服务,国内提供地图服务的有百度地图.腾讯地图.高德地图.本文选取的是腾讯地图的A ...
视频教程-Three.js(webgl) webpack+es6 geojson 3d地图项目实战视频教程-JavaScript
Three.js(webgl) webpack+es6 geojson 3d地图项目实战视频教程 2008年开始从事C#编程工作,2013年转向Unity游戏开发领域,在谷歌市场及苹果商店陆续发布 ...

Node-RED系列（二五）：集成高德地图并实现3d地图和轨迹回放

前言

3d地图的显示

Node-RED系列（二五）：集成高德地图并实现3d地图和轨迹回放相关推荐

最新文章

热门文章