![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
百度地图可视化
李 克 鹏
这个作者很懒,什么都没留下…
展开
-
百度地图之飞线动画(边绑定)
与前两篇飞线动画不同的是准备数据源部分function initData() { var data = []; // 生成贝塞尔曲线坐标集 var cities = ['济南','临沂','潍坊','东营','滨州','青岛','威海','枣庄','德州','淄博','烟台']; // 1、实例化贝塞尔曲线对象 var targetCity = mapv.utilCityCenter.getCenterByCityName('济南') var node原创 2022-03-28 15:05:50 · 442 阅读 · 0 评论 -
百度地图之飞线动画(二)
绘制数据源其他部分与飞线动画(一)一致var linePointLayer = new mapvgl.LinePointLayer({ size:10, // 点的大小 speed:50, // 点运动速度 color: 'rgba(255,255,0,0.6)', // animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_UNIFORM_SPEED, animationType: mapvg原创 2022-03-28 10:29:21 · 471 阅读 · 0 评论 -
百度地图之飞线动画(一)
引入库<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.140/dist/mapvgl.threelayers.min.js"></script>总体结构与散点图类似初始化百度地图function initBMap() { var cityCenter = mapv.utilCityCenter.getCenterByCityName('上海') var map = init原创 2022-03-28 09:48:25 · 748 阅读 · 0 评论 -
百度地图之绘制散点图
引入以下几个库<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的key"></script><script type="text/javascript" src="https://mapv.baidu.com/gl/examples/static/common.js"></script><script原创 2022-03-27 16:59:46 · 1233 阅读 · 0 评论 -
百度地图之轨迹动画
引入库:<script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script> 主要函数:var trackAnimation = new BMapGLLib.TrackAnimation(map, lines, opts); 定义动画trackAnimation.start();原创 2022-03-25 14:40:51 · 2749 阅读 · 1 评论 -
百度地图之视角动画
主要函数:var animation = new BMapGL.ViewAnimation(keyFrames, opts); 定义动画map.startViewAnimation(animation); 开始动画map.cancelViewAnimation(animation); 结束动画定义keyFramesvar keyFrames = [原创 2022-03-25 14:25:25 · 1000 阅读 · 0 评论 -
百度地图之绘制覆盖物
需要用到的函数:map.addOverlay(polyline)绘制线段:var polyline = new BMapGL.Polyline([ new BMapGL.Point(116.399, 39.800), new BMapGL.Point(116.605, 39.920) 可以不断添加点的位置 ], { strokeColor: 'red', stro原创 2022-03-25 14:01:40 · 387 阅读 · 0 评论 -
百度地图之自定义样式
在百度控制台发布自定义样式并复制样式ID添加 setMapStyleV2 功能map.setMapStyleV2({ styleId:'76c03cdd35fa1e24f39edeb18849f04e' })完整代码如下:<!DOCTYPE html><html lang="en"><head> <script type="text/javascript" src="https://api.原创 2022-03-25 13:51:33 · 1193 阅读 · 0 评论 -
百度地图之异步加载
完整代码如下:<!DOCTYPE html><html lang="en"><head> <style> html, body { width:100%; height:100%; padding:0; margin:0; } #map { width:100%;原创 2022-03-25 11:09:02 · 292 阅读 · 0 评论 -
百度地图之初始化地图
引入库:<head><script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=自己的key"></script><head><style>确定地图的宽和高:<head> <style> html, body { width:原创 2022-03-25 11:04:58 · 1200 阅读 · 0 评论