目录

  • 百度地图开发
    • 控件
    • 个性化地图
    • 绘图
    • 动画
    • 可视化
    • 3D建筑

百度地图开发

  • 申请开发者账号
  • 在控制台->应用管理->我的应用，创建AK
  • 引入api，Demo，基本操作就是：实例化类，调用方法；类又分基础类（必须有的）和高级类；需要根据文档（更新可能不及时）或者直接打印出api看调哪个合适 
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度地图</title><script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=7YFFdS7jQV6MyhGTlnNmp1xxxxxxx"></script><style>html, body {width: 100%;height: 100%;padding: 0;margin: 0;}#map {width: 500px;height: 500px;}/* 不显示logo */.anchorBL, .BMap_cpyCtrl {display: none;}</style>
</head>
<body><div id="map"></div><script>// console.log(window.BMapGL) // version=3.0 自动加载了百度地图的组件var map = new BMapGL.Map('map');var point = new BMapGL.Point(116.404, 39.915);  // 绘制中心点 BJmap.centerAndZoom(point, 10)    // 默认显示精度为10map.enableScrollWheelZoom(true) // 支持鼠标滚轮放大</script>
</body>
</html>
  • 异步加载，更快渲染；主要是用了window.onload 
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html, body {width: 100%;height: 100%;padding: 0;margin: 0;}#map {width: 500px;height: 500px;}/* 不显示logo */.anchorBL, .BMap_cpyCtrl {display: none;}</style>
</head>
<body><div id="map"></div><script>// 这属于window下面的方法function init() {var map = new BMapGL.Map('map');var point = new BMapGL.Point(116.404, 39.915);  // 绘制中心点 BJmap.centerAndZoom(point, 10)    // 默认显示精度为10map.enableScrollWheelZoom(true) // 支持鼠标滚轮放大}        // 整个页面加载完之后，执行这里的操作（onload下面的方法）window.onload = function() {var script = document.createElement('script')// 加载api，并callback，初始化地图script.src = "https://api.map.baidu.com/api?type=webgl&v=1.0&ak=7YFFdS7jQV6MyhGTlnNmp1UacH2jjMyV&callback=init"document.body.appendChild(script)   // 挂载一个script标签}</script>
</body>
</html>
  • 官方的工具：坐标拾取器
  • 地球卫星图，API参考，调用方法：map.xxx 
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度地图</title><script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=7YFFdS7jQV6MyhGTlnNmp1UacH2jjMyV"></script><style>html, body {width: 100%;height: 100%;padding: 0;margin: 0;}#map {width: 1600px;height: 800px;}/* 不显示logo */.anchorBL, .BMap_cpyCtrl {display: none;}</style>
</head>
<body><div id="map"></div><script>// console.log(window.BMapGL) // version=3.0 自动加载了百度地图的组件var map = new BMapGL.Map('map');var point = new BMapGL.Point(116.365211,39.990025);  // 绘制中心点 BJmap.centerAndZoom(point, 20)map.enableScrollWheelZoom(true)// map.setHeading(30) 旋转// map.setTilt(60) 倾角map.setMapType(BMAP_EARTH_MAP)  // 地球卫星</script>
</body>
</html>

控件

  • 比如地图中的加减号按钮
  • 可以查看文档，使用方法就是new一个类，添加到核心类Map的实例
  • 基本都是这样操作，具体用什么类，里面的什么方法，需要多看文档

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度地图</title><script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=7YFFdS7jQV6MyhGTlnNmp1UacH2jjMyV"></script><style>html, body {width: 100%;height: 100%;padding: 0;margin: 0;}#map {width: 500px;height: 500px;}/* 不显示logo */.anchorBL, .BMap_cpyCtrl {display: none;}.BMap_stdMpZoom {display: block;}</style>
</head>
<body><div id="map"></div><script>// var map = new BMapGL.Map('map');var map = new BMapGL.Map('map', {minZoom: 6,maxZoom: 12,mapType: BMAP_NORMAL_MAP});var point = new BMapGL.Point(116.404, 39.915)map.centerAndZoom(point, 10)map.enableScrollWheelZoom(true)// 有坑的地方用 ‘坑！’标注// map.setMinZoom(6)   // 文档中有这个接口，但是打印map没有，可能是版本更新文档没及时更新；坑！不过还是生效的？// map.setMaxZoom(12)  // 最大能放大到的倍数var zoomCtrl = new BMapGL.ZoomControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT,offset: new BMapGL.Size(20, 20) // 距左下角的位置});// 添加控件map.addControl(zoomCtrl)// console.log(map)// 添加事件map.addEventListener('zoomstart', function() {  // 还有很多事件，可以看文档console.log(map.getZoom());})map.addEventListener('zoomend', function() {console.log(map.getZoom());})// 标尺控件var scaleCtrl = new BMapGL.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT,offset: new BMapGL.Size(40, 40) // 距左下角的位置});map.addControl(scaleCtrl)</script>
</body>
</html>

个性化地图

  • 根据文档，推荐根据样式ID调用
  • 代码里使用ID设置自定义样式 
    map.setMapStyleV2({styleId: 'a7bd12549deaba9d1f0a3c47badd987a'
})

  • 配色一般交给设计师做，别插手

绘图

  • 在地图上绘制个图标、弹窗啊啥的
  • 绘制图标（图片）
  • 绘制线段（折线）
  • 绘制三角形（多边形） 
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度地图</title><script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=7YFFdS7jQV6MyhGTlnNmp1UacH2jjMyV"></script><style>html, body {width: 100%;height: 100%;padding: 0;margin: 0;}#map {width: 900px;height: 900px;}/* 不显示logo */.anchorBL, .BMap_cpyCtrl {display: none;}</style>
</head>
<body><div id="map"></div><script>// console.log(window.BMapGL) // version=3.0 自动加载了百度地图的组件var map = new BMapGL.Map('map');var point = new BMapGL.Point(116.404, 39.915);  // 绘制中心点 BJmap.centerAndZoom(point, 10)    // 默认显示级别为10map.enableScrollWheelZoom(true) // 支持鼠标滚轮放大var myIcon = new BMapGL.Icon('https://www.youbaobao.xyz/datav-res/datav/location.png',new BMapGL.Size(60, 60),{anchor: BMapGL.Size(0, 0),  // 图标的定位点相对于图标左上角的偏移值imagOffset: BMapGL.Size(0, 0)   // 图标所用的图片相对于可视区域的偏移值})var marker = new BMapGL.Marker(point, {icon:myIcon})map.addOverlay(marker)// 线段 折线var line = new BMapGL.Polyline([new BMapGL.Point(116.404, 39.915),new BMapGL.Point(117.404, 39.915)],   // 点数组{strokeColor: 'red',strokeWeight: 4,strokeOpacity: 0.5})map.addOverlay(line)// 多边形var triangle = new BMapGL.Polygon([new BMapGL.Point(116.404, 39.915),new BMapGL.Point(117.404, 39.915),new BMapGL.Point(116.804, 39.415)],   // 点数组{strokeColor: 'red',strokeWeight: 4,strokeOpacity: 0.5})map.addOverlay(triangle)</script>
</body>
</html>
  • 绘制标注（文字），可以添加event 
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度地图</title><script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=7YFFdS7jQV6MyhGTlnNmp1UacH2jjMyV"></script><style>html, body {width: 100%;height: 100%;padding: 0;margin: 0;}#map {width: 900px;height: 900px;}/* 不显示logo */.anchorBL, .BMap_cpyCtrl {display: none;}</style>
</head>
<body><div id="map"></div><script>// console.log(window.BMapGL) // version=3.0 自动加载了百度地图的组件var map = new BMapGL.Map('map');var point = new BMapGL.Point(116.404, 39.915);  // 绘制中心点 BJmap.centerAndZoom(point, 10)    // 默认显示级别为10map.enableScrollWheelZoom(true) // 支持鼠标滚轮放大// 标注var label = new BMapGL.Label('Roy地图开发',{position: point,    // 相对这个点offset: new BMapGL.Size(50, 20),})label.setStyle({width: '75px',height: '20px',padding: '20px',color: '#fff',background: 'red',overflow: 'hidden'})// 添加事件label.addEventListener('click', function(e) {alert(e.target.content)})map.addOverlay(label)</script>
</body>
</html>
  • 弹窗（信息窗），比alert更高级些 
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度地图</title><script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=7YFFdS7jQV6MyhGTlnNmp1UacH2jjMyV"></script><style>html, body {width: 100%;height: 100%;padding: 0;margin: 0;}#map {width: 900px;height: 900px;}/* 不显示logo */.anchorBL, .BMap_cpyCtrl {display: none;}</style>
</head>
<body><div id="map"></div><script>// console.log(window.BMapGL) // version=3.0 自动加载了百度地图的组件var map = new BMapGL.Map('map');var point = new BMapGL.Point(116.404, 39.915);  // 绘制中心点 BJmap.centerAndZoom(point, 10)    // 默认显示级别为10map.enableScrollWheelZoom(true) // 支持鼠标滚轮放大// 弹窗var myIcon = new BMapGL.Icon('https://www.youbaobao.xyz/datav-res/datav/location.png',new BMapGL.Size(60, 60))var marker = new BMapGL.Marker(point, {icon:myIcon})// 定制，直接传html的字符串var content = '<div style="color:red;">Roy欢迎你~</div>'// var div = document.createElement('div') 对象会被变成字符串，传div不行// div.innerText = contentmarker.addEventListener('click', function() {var info = new BMapGL.InfoWindow(content,{width: 250,height: 50,title: 'Welcome',// offset:})map.openInfoWindow(info, point)})map.addOverlay(marker)</script>
</body>
</html>

动画

  • 使用动画类，把每一帧定义好是关键，还有一些可监听的事件

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度地图</title><script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=7YFFdS7jQV6MyhGTlnNmp1UacH2jjMyV"></script><style>html, body {width: 100%;height: 100%;padding: 0;margin: 0;}#map {width: 100%;height: 100%;}/* 不显示logo */.anchorBL, .BMap_cpyCtrl {display: none;}.tools {position: absolute;left: 10px;top: 10px;/* 防止被覆盖 */z-index: 10;}</style>
</head>
<body><div id="map"></div><div class="tools"><button id="start">start</button><button id="end">end</button></div><script>// console.log(window.BMapGL) // version=3.0 自动加载了百度地图的组件var map = new BMapGL.Map('map');var point = new BMapGL.Point(116.404, 39.915);  // 绘制中心点 BJmap.centerAndZoom(point, 15)map.enableScrollWheelZoom(true)// 动画的帧，数组var keyframe = [{center: new BMapGL.Point(116.404, 39.915),zoom: 18,tilt: 50,   // 地图倾斜角度heading: 0, // 地图旋转角度percentage: 0}, {center: new BMapGL.Point(116.404, 39.915),zoom: 19,tilt: 50,heading: 100,percentage: 0.5}, {center: new BMapGL.Point(116.404, 39.915),zoom: 21,tilt: 50,heading: 180,percentage: 0.8}]// 动画的配置var options = {delay: 2000,    // 动画开始延迟时间duration: 3000, // 动画持续时间interation: 1   // 循环次数，'INFINITE'无限循环}var animation = new BMapGL.ViewAnimation(keyframe, options)// 直接播放// map.startViewAnimation(animation)// 按钮播放document.getElementById('start').addEventListener('click', function(e) {map.startViewAnimation(animation)})document.getElementById('end').addEventListener('click', function(e) {map.cancelViewAnimation(animation)})// 对应动画播放，还有四个事件// animationstart animationiterations animationend animationcancel// 动画播放过程中如果想做什么操作，可以借助这几个</script>
</body>
</html>
  • 轨迹动画，记得要引入新的JS库 
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度地图</title><script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=7YFFdS7jQV6MyhGTlnNmp1UacH2jjMyV"></script><script type="text/javascript" src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script><style>html, body {width: 100%;height: 100%;padding: 0;margin: 0;}#map {width: 100%;height: 100%;}/* 不显示logo */.anchorBL, .BMap_cpyCtrl {display: none;}</style>
</head>
<body><div id="map"></div><script>var map = new BMapGL.Map('map');var point = new BMapGL.Point(116.404, 39.915);map.centerAndZoom(point, 10)map.enableScrollWheelZoom(true)// 点的轨迹，类似keyframe帧的集合var points = [new BMapGL.Point(116.365211,39.990025),new BMapGL.Point(116.345549,39.998601),new BMapGL.Point(116.321269,40.047384),new BMapGL.Point(116.325185,40.198075)]var line = new BMapGL.Polyline(points)var option = {delay: 1000,duration: 15000,tilt: 30,   // 倾角overallView: true}var track = new BMapGLLib.TrackAnimation(map, line, option)track.start()</script>
</body>
</html>

可视化

  • 这部分很重要，涉及到业务数据了

  • 这里要通过mapv和mapvgl，需要另外引入几个库

  • 散点图，看注释

    <!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><!-- common.js定义的id，这个库帮助我们更方便的使用map --><div id="map_container"></div><script type="text/javascript">// 初始化百度地图，map后面要用，搞成全局变量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)']});// 这类问题都分两步：准备数据源 + 绘制数据源// 第一步：准备数据源function initData() {var data = [];var citys = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春','沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州','南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'];var randomCount = 700;  // 随机取城市坐标然后偏移，总共搞出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) {// 1. 生成mapvgl，Viewvar view = new mapvgl.View({map: map});// 2. 初始化intensity对象，控制点的大小var intensity = new mapvgl.Intensity({max: 100,min: 0,// 渐变，绘制不同颜色的圆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});// 3. 初始化mapvgl的point对象var pointLayer = new mapvgl.PointLayer({blend: 'lighter',size: function (data) {// 根据count控制大小return intensity.getSize(data.properties.count);},color: function (data) {// 根据count控制渐变色return intensity.getColor(data.properties.count);}});// 5. 将data和point绑定pointLayer.setData(data);// 4. 将point对象加入View中view.addLayer(pointLayer);}setData(initData());</script>
</body>
</html>

  • 飞线图，看注释；官方文档，主要用了这个3D曲线生成器

    <!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><script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.threelayers.min.js"></script><title>地图展示</title>
</head>
<body><div id="map_container"></div><script type="text/javascript">function initBMap() {var cityCenter = mapv.utilCityCenter.getCenterByCityName('上海')var map = initMap({tilt: 60,heading: 0,center: [cityCenter.lng, cityCenter.lat],zoom: 7,style: purpleStyle});return map}var map = initBMap()// 和前面的散点图步骤大体一致function initData() {var data = [];var citys = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春','沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州','南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'];var randomCount = 100; // 模拟的飞线的数量// 生成贝塞尔曲线坐标集（一条飞线，是根据起点+终点搞出来的一堆坐标，因为有高度；所以说一条线就是一个坐标集）// 1.实例化var curve = new mapvgl.BezierCurve();while (randomCount--) {var startPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);var endPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)])// 2. 设置起点和终点curve.setOptions({start: [startPoint.lng, startPoint.lat],end: [endPoint.lng, endPoint.lat]});// 3. 生成贝塞尔曲线坐标集var curveModelData = curve.getPoints();// console.log(curveModelData)data.push({geometry: {type: 'LineString',coordinates: curveModelData},properties: {count: Math.random()}});}return data;}function setData(data) {var view = new mapvgl.View({map: map});var flylineLayer = new mapvgl.FlyLineLayer({style: 'chaos',step: 0.3,color: 'rgba(33, 242, 214, 0.3)',textureColor: function (data) {return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd';},textureWidth: 20,textureLength: 10});view.addLayer(flylineLayer);flylineLayer.setData(data);}setData(initData());</script>
</body>
</html>

  • 这些是其他的官方示例，可以参考；但是源码不能直接用，需要改库的地址，而且使用的是mapv

  • 我们上面两个例子都是用mapvgl，因为mapv已经停止维护了，而且使用canvas渲染，会出现卡顿

  • 使用边绑定算法优化的中心飞线图，需要准备点数据和边数据

    <!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><script type="text/javascript"src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script><script src="https://mapv.baidu.com/gl/examples/static/common.js"></script><script type="text/javascript" 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><script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.53/dist/mapvgl.threelayers.min.js"></script><style type="text/css">html, body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}#map_container {width: 100%;height: 100%;}</style>
</head>
<body>
<div id="map_container"></div>
<script type="text/javascript">var map = initBMap()var data = initData()setData(data)// 初始化百度地图function initBMap() {var map = initMap({tilt: 0,center: [108.154518, 36.643346],zoom: 5,style: darkStyle})return map}function initData() {var randomCount = 800var node_data = [{// 这里存的是target，也就是0号元素x: 108.154518,y: 36.643346}]var edge_data = [{source: 1,  // 1号元素飞向0号元素target: 0}]var cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春', '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州', '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口']// 构造数据for (var i = 1; i < randomCount; i++) {var cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)])//  推进去一个node_data，对应一个edge_data，因为终点是确定的node_data.push({x: cityCenter.lng - 5 + Math.random() * 10,y: cityCenter.lat - 5 + Math.random() * 10})edge_data.push({source: parseInt(i * Math.random()),    // 起始点随机target: 0   // 始终是0，目标点不变})}// 边绑定算法，将点和边的数据放进去var fbundling = mapv.utilForceEdgeBundling().nodes(node_data).edges(edge_data)var results = fbundling()var data = []var timeData = []// 绘制飞线for (var i = 0; i < results.length; i++) {var line = results[i]var coordinates = []for (var j = 0; j < line.length; j++) {coordinates.push([line[j].x, line[j].y])timeData.push({geometry: {type: 'LineString',coordinates: [line[j].x, line[j].y]},count: 1,time: j})}data.push({geometry: {type: 'LineString',coordinates: coordinates}})}return {pointData: timeData,lineData: data}}function setData({ pointData, lineData }) {console.log(pointData)var view = new mapvgl.View({ map })var lineLayer = new mapvgl.LineLayer({color: 'rgba(55, 50, 250, 0.3)',blend: 'lighter'  // 线汇聚后出现白色的效果})view.addLayer(lineLayer)lineLayer.setData(lineData)var linePointLayer = new mapvgl.LinePointLayer({size: 8,speed: 20,color: 'rgba(255, 255, 0, 0.6)',animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_SMOOTH,shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE,blend: 'lighter'})view.addLayer(linePointLayer)linePointLayer.setData(lineData)}
</script></body>
</html>

3D建筑

  • 使用mapvgl的ShapeLayer绘制3D图形

    • 原理就是利用Polygon绘制多边形，然后给出高度，整出类似3D的立体建筑
  • 代码结构，上面的案例也是如此，可以参考官方的代码，也是类似的结构
  • 看注释，这里要用百度提供的API转换为墨卡托坐标（把地球展平），点的数据是重庆的，也可以网上找找其他城市 
    <!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: 80,heading: -45.3,center: [106.540547,29.564858],zoom: 17});// 准备数据源function initData() {fetch('https://www.youbaobao.xyz/datav-res/examples/chongqing.json').then(res => res.json()).then(res => {var data = res;var polygons = [];  // 存放所有的面（多边形围成）var len = data.length;for (var i = 0; i < len; i++) {var line = data[i];var polygon = [];// 转换成墨卡托坐标var pt = [line[1] * 512, line[2] * 512];// 坐标数据是两个，所以+2for (var j = 3; j < line.length; j += 2) {pt[0] += line[j] / 100 / 2;pt[1] += line[j + 1] / 100 / 2;polygon.push([pt[0], pt[1]]);}polygons.push({geometry: {type: 'Polygon',coordinates: [polygon]},// 一定要设置高度properties: {height: line[0] / 2}});}setData(polygons);});}function setData(data) {console.log(data);var view = new mapvgl.View({map: map});// 可以看官网var shaperLayer = new mapvgl.ShapeLayer({color: 'rgb(0, 255, 255)',style: 'normal',// opacity: 1.0, // 透明度riseTime: 2000, // 楼房升起动画enablePicked: true, // 支持选中// riseTime: 1000,opacity: 0.3, // 透明度selectedIndex: -1, // 选中项selectedColor: '#ee1111', // 选中项颜色autoSelect: true, // 根据鼠标位置来自动设置选中项onClick: (e) => { // 添加点击事件console.log(e);}});view.addLayer(shaperLayer);shaperLayer.setData(data);}initData();</script>
</body>
</html>

数据可视化项目（二）相关推荐

  1. 数据可视化项目落地复盘

    近期落地了工作中的数据可视化项目,今天原创复盘下这中间的历程. 在复盘前,首先一个问题:数据可视化到底是不是一个需求? 提出这个问题的原因: 数据可视化只是让数据更直观,是数据的另一种展现形式.这种形 ...

  2. 学习笔记之数据可视化（二）—— 页面布局（下）

    续上一章 2.7 地图区域(.map) 2.7.1 实现步骤: 2.8 用户统计模块 2.8.1 布局: 2.8.2 柱状图 2.9 订单模块 2.9.1 订单区域布局 2.9.2 订单区域(orde ...

  3. 学习笔记之数据可视化（二）——页面布局（中）

    续上一章 2.6 监控区域布局 2.6.1 布局结构解析: 2.6.2 样式描述: 2.6.3 HTML结构及CSS样式代码 2.6.3 ### 监控区域-效果 2.6.7 点位区域(point) 2 ...

  4. 学习笔记之数据可视化（二）——页面布局（上）

    ~续上一章 2. 项目页面布局 2.1 基础布局 2.1.1 PC端屏幕宽度适配设置 2.1.2 主体容器viewport背景图片 2.1.3 HTML结构 2.1.4 css样式代码 2.2 边框图 ...

  5. Hadoop+hive+flask+echarts大数据可视化项目之hive环境搭建与系统数据的分析思路

    Hadoop+hive+flask+echarts大数据可视化项目(四) --------------hive环境搭建与系统数据的分析思路---------------- 关注过Hadoop+hive ...

  6. Hadoop+hive+flask+echarts大数据可视化项目之系统数据整合和hadoop环境搭建

    Hadoop+hive+flask+echarts大数据可视化项目(二) --------------系统数据整合和hadoop环境搭建---------------- 关注Hadoop+Hive+F ...

  7. Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果

    Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...

  8. ECharts数据可视化项目-大屏数据可视化【持续更新中】

    ECharts数据可视化项目-大屏数据可视化[持续更新中] 文章目录 ECharts数据可视化项目-大屏数据可视化[持续更新中] 一. 数据可视化ECharts使用 二.技术栈 三.数据可视化 四.可 ...

  9. 基于java web和echarts的数据可视化项目

    EchartDemo 项目介绍 基于java web和echarts的数据可视化项目 主要分析浙江省各市区的gdp和固定资产投资.以及房产数据,数据源浙江省经济社会发展统计,数据经过整理后插入数据库中 ...

  10. 数据可视化项目【三】数据切换效果模块

    系列文章目录 第一章:数据可视化项目基础配置 第二章:数据可视化项目Echarts图表模块 第三章:数据可视化项目数据切换效果模块 文章目录 系列文章目录 监控区域-效果 切换功能: 动画功能: 销售 ...

最新文章

  1. 2002高教社杯---A车灯线光源的优化设计
  2. ArcGIS_系列中文教程下载
  3. vbs 等于_西门子触摸屏VBS编程quot;陷阱quot;之VBS不支持多线程
  4. 求数字序列中的第n位对应的数字
  5. 混合App开发，HBuilder开发移动App
  6. C++函数的分文件编写
  7. PHRefreshTriggerView
  8. Postman安装教程及汉化
  9. 学习linux方向,学习linux方向
  10. 一个人的职业生涯之旅 —— 应届生求职、面试、Offer、跳槽（发展瓶颈、薪资倒挂、职业倦怠、骑驴找马、简历优化）问题分享
  11. ASML终于认识到它的未来在哪里，进一步向中国市场靠拢
  12. MCS51 程序存储器(ROM)
  13. 盘点Hadoop生态圈：13个让大象飞起来的开源工具
  14. 2019的百度网盘下载速度太慢老是限速怎么解决？
  15. 18.通过按键切换LED颜色
  16. Excel表格如何快速隔行填充指定颜色
  17. Mantis基本功能介绍
  18. [力扣c++实现] 221. 最大正方形
  19. 中国移动首测6G，确保中国在移动通信技术上的领先优势
  20. 物联网时代人才培养的大环境因素和面临的严峻挑战

热门文章

  1. Vue 数组删除和修改元素后页面立即刷新
  2. 怎么让上下两排对齐_《excel表中怎么使同一格内的上下两行对齐》 excel两表格数据对齐...
  3. Kruskal算法：将森林合并成树
  4. 海关外贸企业大数据风控平台
  5. 手机投屏到电脑 -- 小黑超细日常教程
  6. java中的匿名内部类总结
  7. GitHub的Java面试项目
  8. （一）ArcGIS JS 发布动态地图服务
  9. 使用ArcGIS制作专题等值线图
  10. Mac卸载jdk和java