百度地图可视化

作者: 易路先登 | 来源:发表于2021-08-04 11:54 被阅读0次

一、初识

1、获取开发者key
获取百度开发者AK的官方教程
获取之后可以去控制台查看自己的开发者Key
控制台--->应用管理--->我的应用即可查看到自己的开发者key
2、api地址
（1）、百度1.0api地址
 百度地图JSAPI WebGL v1.0类参考
（2）、百度2.0api地址
（3）、百度3.0api地址
（4）、坐标拾取器
3、示例
（1）、直接引入

地图示例

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
</style>  
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=开发者key">
//v2.0版本的引用方式：src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
</head>  
 
<body>  
<div id="container"></div> 
<script type="text/javascript"> 
// 创建地图实例  
var map = new BMap.Map("container");
// 创建点坐标
var point = new BMap.Point(116.404, 39.915);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
  
</script>  
</body>  
</html>

服务端代码

var express = require('express');
var app = express();

app.use(express.static('static'));

app.listen(5000);

console.log('服务器启动: 5000');

注意，如果本地静态页直接访问百度api会报一个跨域错误，如果把该文件作为静态资源放到服务器返回则不会报错。

隐藏左下角百度地图logo

左下角百度地图logo

添加对应样式即可，类名必须和Logo容器元素类名一致。

.anchorBL{
    display:none;
}

抹掉了百度地图logo

（2）、异步加载
意思是不让地图的加载影响主进程的渲染，当页面所有资源全部加载完成后再加载百度地图

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
    .anchorBL{
        display:none;
    }
</style>  
</head>  
 
<body>  
<div id="container"></div> 
<script type="text/javascript"> 
function init(){
    // 创建地图实例  
    var map = new BMap.Map("container");
    // 创建点坐标
    var point = new BMap.Point(116.404, 39.915);
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 15);
    // 鼠标滚轮放大缩小
    map.enableScrollWheelZoom(true);
}
window.onload = function(){
    var script = document.createElement('script')
    script.src = 'https://api.map.baidu.com/api?v=2.0&ak=开发者key&callback=init'
    document.body.appendChild(script)
}
</script>  
</body>  
</html>

（3）、3D地图
效果：

3D地图

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=开发者key"></script>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
    .anchorBL{
        display:none;
    }
</style>  
</head>
<body>
<div id="container"></div> 
<script type="text/javascript"> 
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("container");    // 创建Map实例
    var point = new BMapGL.Point(116.280190, 39.799191);
    map.centerAndZoom(point, 19);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
    map.setHeading(40);   // 设置地图旋转角度
    map.setTilt(70);       // 设置地图的倾斜角
</script>  
</body>  
</html>

（4）、控件
缩放

右上角缩放

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=iz9QPjUAe3tXx7CNgnY1t0afdAlwcHRQ"></script>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
    .anchorBL{
        display:none;
    }
</style>  
</head>
<body>
<div id="container"></div> 
<script type="text/javascript"> 
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("container",{
        minZoom:8,//最小缩放
        maxZoom:12,//最大缩放
        mapType:BMAP_NORMAL_MAP
    });    // 创建Map实例
    var point = new BMapGL.Point(116.280190, 39.799191);
    map.centerAndZoom(point, 5);  // 初始化地图,设置中心点坐标和地图级别
    map.setMapStyleV2({//自定义样式
        styleId:'5b0df1ed4f334469f88c4bf6edd992fc'
    })
    map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
    map.setHeading(0);   // 设置地图旋转角度
    map.setTilt(70);       // 设置地图的倾斜角
    var zoomCtrl = new BMapGL.ZoomControl({
        anchor:BMAP_ANCHOR_TOP_RIGHT,
        offset:new BMapGL.Size(100,10)//控制控件位置
    });
    map.addControl(zoomCtrl);
    //监测zoom开始变化
    map.addEventListener('zoomstart',function(){
        console.log(map.getZoom())
    })
    //监测zoom变化结束
    map.addEventListener('zoomend',function(){
        console.log(map.getZoom())
    })
    var scaleCtrl = new BMapGL.ScaleControl({
        anchor:BMAP_ANCHOR_TOP_LEFT,
        offset:new BMapGL.Size(10,10)
    })
    map.addControl(scaleCtrl);
</script>  
</body>  
</html>

常量	位置
BMAP_ANCHOR_TOP_RIGHT	右上
BMAP_ANCHOR_TOP_LEFT	左上
BMAP_ANCHOR_BOTTOM_RIGHT	右下
BMAP_ANCHOR_BOTTOM_LEFT	左上

当该控件在左下角的时候，不能正常显示，是因为使用了.anchorBL类将百度地图Logo等隐藏了，补救措施如下：

.anchorBL{
        display:none;
}
.BMap_stdMpZoom {
        display:block;
}

（5）、绘制图标

图标

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=开发者key"></script>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
    .anchorBL{
        display:none;
    }
    .BMap_stdMpZoom {
        display:block;
    }
</style>  
</head>
<body>
<div id="container"></div> 
<script type="text/javascript"> 
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("container",{
        mapType:BMAP_NORMAL_MAP
    });    // 创建Map实例
    var point = new BMapGL.Point(116.280190, 39.799191);
 // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(point, 12); 
    map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
    map.setMapStyleV2({//设置个性化样式
        styleId:'5b0df1ed4f334469f88c4bf6edd992fc'
    })
    //创建icon
    var myIcon = new BMapGL.Icon('./icon.jpeg',
    new BMapGL.Size(60,60),
    {
        anchor:new BMapGL.Size(60,60),
        imageOffset:new BMapGL.Size(0,0)
    })
    //创建marker
    var marker = new BMapGL.Marker(point,{icon:myIcon})
    //添加marker
    map.addOverlay(marker);
</script>  
</body>  
</html>

（6）、绘制线

绘制线

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=开发者key"></script>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
    .anchorBL{
        display:none;
    }
    .BMap_stdMpZoom {
        display:block;
    }
</style>  
</head>
<body>
<div id="container"></div> 
<script type="text/javascript"> 
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("container",{
        mapType:BMAP_NORMAL_MAP
    });    // 创建Map实例
    var point = new BMapGL.Point(116.280190, 39.799191);
    map.centerAndZoom(point, 12);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
    var polyline = new BMapGL.Polyline([
        new BMapGL.Point(116.399,39.800),
        new BMapGL.Point(116.405,39.820)
    ])
    map.addOverlay(polyline);
</script>  
</body>  
</html>

线的更多属性

var polyline = new BMapGL.Polyline([
        new BMapGL.Point(116.399,39.800),
        new BMapGL.Point(116.405,39.820),
        new BMapGL.Point(117.200,40.822)
    ],{
        strokeColor:'red',
        strokeWeight:4,
        strokeOpacity:0.5
    })
    map.addOverlay(polyline);

（7）、绘制多边形

多边形

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=开发者key"></script>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
    .anchorBL{
        display:none;
    }
    .BMap_stdMpZoom {
        display:block;
    }
</style>  
</head>
<body>
<div id="container"></div> 
<script type="text/javascript"> 
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("container",{
        mapType:BMAP_NORMAL_MAP
    });    // 创建Map实例
    var point = new BMapGL.Point(116.280190, 39.799191);
    map.centerAndZoom(point, 12);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
    var polylgon = new BMapGL.Polygon([
        new BMapGL.Point(116.399,39.800),
        new BMapGL.Point(116.405,39.820),
        new BMapGL.Point(117.200,40.822),
        new BMapGL.Point(116.200,40.600)
    ],{
        strokeColor:'red',
        strokeWeight:2,
        fillColor:'yellow'
    })
    map.addOverlay(polylgon);
</script>  
</body>  
</html>

（8）、绘制文本框

文本框

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=开发者密钥"></script>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
    .anchorBL{
        display:none;
    }
    .BMap_stdMpZoom {
        display:block;
    }
</style>  
</head>
<body>
<div id="container"></div> 
<script type="text/javascript"> 
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("container",{
        mapType:BMAP_NORMAL_MAP
    });    // 创建Map实例
    var point = new BMapGL.Point(116.280190, 39.799191);
    map.centerAndZoom(point, 12);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
    var label = new BMapGL.Label('欢迎学习数据可视化体系课',{
        position:point,
        offset:new BMapGL.Size(100,10)//调整文本框位置
    })
    label.setStyle({
        width:'100px',
        height:'20px',
        padding:'20px',
        color:'#fff',
        background:'red',
        overflow:'hidden'
    })
    label.addEventListener('click',function(e){
        alert(e.target.content)
    })
    label.addEventListener('mouseover',function(e){
        map.setMapType(BMAP_EARTH_MAP)
        map.setHeading(40);   // 设置地图旋转角度
        map.setTilt(70);       // 设置地图的倾斜角
        label.setStyle({
            background:'blue'
        })
    })
    label.addEventListener('mouseout',function(e){
        map.setMapType(BMAP_NORMAL_MAP)
        map.setHeading(0);   // 设置地图旋转角度
        map.setTilt(0);       // 设置地图的倾斜角
        label.setStyle({
            background:'red'
        })
    })
    map.addOverlay(label);
</script>  
</body>  
</html>

（9）、绘制信息框

信息框

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=iz9QPjUAe3tXx7CNgnY1t0afdAlwcHRQ"></script>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
    .anchorBL{
        display:none;
    }
    .BMap_stdMpZoom {
        display:block;
    }
</style>  
</head>
<body>
<div id="container"></div> 
<script type="text/javascript"> 
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("container",{
        mapType:BMAP_NORMAL_MAP
    });    // 创建Map实例
    var point = new BMapGL.Point(116.280190, 39.799191);
 // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(point, 12); 
    map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
    map.setMapStyleV2({//设置个性化样式
        styleId:'5b0df1ed4f334469f88c4bf6edd992fc'
    })
    //创建icon
    var myIcon = new BMapGL.Icon('./icon.jpeg',
    new BMapGL.Size(60,60),
    {
        anchor:new BMapGL.Size(60,60),
        imageOffset:new BMapGL.Size(0,0)
    })
    //创建marker
    var marker = new BMapGL.Marker(point,{icon:myIcon})
    marker.addEventListener('click',function(){
        var infoWindow = new BMapGL.InfoWindow('欢迎学习数据可视化体系课',{
            width:250,
            height:100,
            title:'说明'
        })
        map.openInfoWindow(infoWindow,point)
    })
    //添加marker
    map.addOverlay(marker);
</script>  
</body>  
</html>

（10）、调整提示框位置

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=开发者key"></script>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
    .anchorBL{
        display:none;
    }
    .BMap_stdMpZoom {
        display:block;
    }
</style>  
</head>
<body>
<div id="container"></div> 
<script type="text/javascript"> 
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("container",{
        mapType:BMAP_NORMAL_MAP
    });    // 创建Map实例
    var point = new BMapGL.Point(116.280190, 39.799191);
 // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(point, 12); 
    map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
    map.setMapStyleV2({//设置个性化样式
        styleId:'5b0df1ed4f334469f88c4bf6edd992fc'
    })
    //创建icon
    var myIcon = new BMapGL.Icon('./icon.jpeg',
    new BMapGL.Size(60,60),
    {
        anchor:new BMapGL.Size(60,60),
        imageOffset:new BMapGL.Size(0,0)
    })
    //创建marker
    var marker = new BMapGL.Marker(point,{icon:myIcon})
    marker.addEventListener('click',function(){
        var infoWindow = new BMapGL.InfoWindow('欢迎学习数据可视化体系课',{
            width:250,
            height:100,
            title:'说明',
            offset:new BMapGL.Size(100,100)
        })
        map.openInfoWindow(infoWindow,point)
    })
    //添加marker
    map.addOverlay(marker);
</script>  
</body>  
</html>

（11）、自定义信息框

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=可发着Key"></script>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
    .anchorBL{
        display:none;
    }
    .BMap_stdMpZoom {
        display:block;
    }
</style>  
</head>
<body>
<div id="container"></div> 
<script type="text/javascript"> 
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("container",{
        mapType:BMAP_NORMAL_MAP
    });    // 创建Map实例
    var point = new BMapGL.Point(116.280190, 39.799191);
 // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(point, 12); 
    map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
    map.setMapStyleV2({//设置个性化样式
        styleId:'5b0df1ed4f334469f88c4bf6edd992fc'
    })
    //创建icon
    var myIcon = new BMapGL.Icon('./icon.jpeg',
    new BMapGL.Size(60,60),
    {
        anchor:new BMapGL.Size(60,60),
        imageOffset:new BMapGL.Size(0,0)
    })
    //创建marker
    var marker = new BMapGL.Marker(point,{icon:myIcon})
    marker.addEventListener('click',function(){
        var content = '<div style="color:red">欢迎学习数据可视化体系课</div>'
        content+= '<div style="color:green;font-weight:bold;">百度地图教学</div>'
        var infoWindow = new BMapGL.InfoWindow(content,{
            width:250,
            height:100,
            title:'说明',
            offset:new BMapGL.Size(100,100)
        })
        map.openInfoWindow(infoWindow,point)
    })
    //添加marker
    map.addOverlay(marker);
</script>  
</body>  
</html>

（12）、动画viewanimation

动画

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=开发者key"></script>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
    .anchorBL{
        display:none;
    }
    .BMap_stdMpZoom {
        display:block;
    }
</style>  
</head>
<body>
<div id="container">
    
</div> 
<button id="start">start</button>
    <button id="cancel">cancel</button>
<script type="text/javascript"> 
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("container",{
        mapType:BMAP_NORMAL_MAP
    });   
    var point = new BMapGL.Point(116.404,39.915)
    map.centerAndZoom(point,20)
    map.enableScrollWheelZoom(true);
    var keyFrames = [{
        center:new BMapGL.Point(116.404,39.915),
        zoom:21,
        tilt:50,
        heading:0,
        percentage:0
    },{
        center:new BMapGL.Point(116.404,39.915),
        zoom:21,
        tilt:50,
        heading:100,
        percentage:0.5
    },{
        center:new BMapGL.Point(116.404,39.915),
        zoom:21,
        tilt:50,
        heading:200,
        percentage:1
    }]
    var opts = {
        delay:1000,
        duration:3000,
        interation:1
    };
    var animation = new BMapGL.ViewAnimation(keyFrames,opts);
    document.getElementById('start').addEventListener('click',function(e){
        map.startViewAnimation(animation)
    })
    document.getElementById('cancel').addEventListener('click',function(e){
        map.cancelViewAnimation(animation)
    })
</script>  
</body>  
</html>

（13）轨迹动画
库文件地址

轨迹动画

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=iz9QPjUAe3tXx7CNgnY1t0afdAlwcHRQ"></script>
<script>
    var BMapGLLib=window.BMapGLLib=BMapGLLib||{};(function(){var g=1;var f=55;var e=0;var a=10000;var i=0;var c=true;var d=1;var j=2;var k=3;var b=0;var h=BMapGLLib.TrackAnimation=function(n,l,m){this._map=n;this._polyline=l;this._totalPath=l.getPath();this._overallView=n.getViewport(l.getPath());this._status=j;this._opts={zoom:this._getZoom(),tilt:f,heading:e,duration:a,delay:i,overallView:c};this._initOpts(m);this._expandPath=this._addPath(l.getPath());this._pauseTime=0};h.prototype._getZoom=function(){return Math.min(this._overallView.zoom+g,this._map.getMaxZoom())};h.prototype._updateAniParams=function(){this._updatePathAni();this._updateViewAni();this._polyline.setPath(this._expandPath.slice(0,1))};h.prototype._updatePathAni=function(){this._expandPath=this._addPath(this._totalPath)};h.prototype._updateViewAni=function(){this._overallView=this._map.getViewport(this._totalPath);var q=this._totalPath.length;var p=[];var r=this._opts.overallView?this._opts.duration+2000:this._opts.duration;for(var l=0;l<q;l++){var o=this._totalPath[l];var n=this._pathPercents[l]*(this._opts.duration/r);p.push({center:new BMapGL.Point(o.lng,o.lat),zoom:this._opts.zoom,tilt:l===0?0:this._opts.tilt,heading:l===0?0:this._opts.heading,percentage:n})}if(this._opts.overallView){p.push({center:new BMapGL.Point(this._overallView.center.lng,this._overallView.center.lat),zoom:this._overallView.zoom-g,tilt:0,heading:0,percentage:1})}var m={duration:r,delay:0,interation:1};this._viewAni=new BMapGL.ViewAnimation(p,m)};h.prototype._addPath=function(u){var o=this._opts.duration/10;var m=u.length;var s=0;var t=[];var p=[];for(var q=1;q<m;q++){var l=this._map.getDistance(u[q-1],u[q]);t.push(l);s+=l}var n=[0];for(var q=1;q<m;q++){var r=(t[q-1]/s).toFixed(2);n[q]=n[q-1]+parseFloat(r,10);p=p.concat(this._getPath(u[q-1],u[q],r*o))}this._pathPercents=n;return p};h.prototype._getPath=function(q,n,o){var m=[];if(o===0){return m}for(var p=0;p<=o;p++){var l=new BMapGL.Point((n.lng-q.lng)/o*p+q.lng,(n.lat-q.lat)/o*p+q.lat);m.push(l)}return m};h.prototype._initOpts=function(l){for(var m in l){if(l.hasOwnProperty(m)){this._opts[m]=l[m]}}};h.prototype.start=function(){var l=this;setTimeout(function(){l._updateAniParams();l._map.removeOverlay(l._polyline);l._map.addOverlay(l._polyline);l._status=d;l._step(performance.now());l._map.startViewAnimation(l._viewAni)},this._opts.delay)};h.prototype.cancel=function(){this._clearRAF();this._status=j;b=0;this._pauseTime=0;this._map.cancelViewAnimation(this._viewAni);this._map.removeOverlay(this._polyline)};h.prototype.pause=function(){if(this._status===d){this._clearRAF();this._map.pauseViewAnimation(this._viewAni);this._status=k;this._isPausing=performance.now()}};h.prototype.continue=function(){if(this._status===k){this._pauseTime+=performance.now()-this._isPausing;this._isPausing=undefined;this._status=d;this._step(performance.now());this._map.continueViewAnimation(this._viewAni)}};h.prototype._step=function(n){if(this._status===j){b=0;return}if(!b){b=n}n=n-this._pauseTime;var m=(n-b)/this._opts.duration;var l=Math.round(this._expandPath.length*m);this._polyline.setPath(this._expandPath.slice(0,l));if(n<b+this._opts.duration){this._timer=window.requestAnimationFrame(this._step.bind(this))}else{b=0;this._status=j;this._pauseTime=0}};h.prototype._clearRAF=function(){if(this._timer){window.cancelAnimationFrame(this._timer)}};h.prototype.setZoom=function(l){this._opts.zoom=l};h.prototype.getZoom=function(l){return this._opts.zoom};h.prototype.setTilt=function(l){this._opts.tilt=l};h.prototype.getTilt=function(l){return this._opts.tilt};h.prototype.setDelay=function(l){this._opts.delay=l};h.prototype.getDelay=function(l){return this._opts.delay};h.prototype.setDuration=function(l){this._opts.duration=l};h.prototype.getDuration=function(l){return this._opts.duration};h.prototype.enableOverallView=function(){this._opts.overallView=true};h.prototype.disableOverallView=function(){this._opts.overallView=false};h.prototype.setPolyline=function(l){this._polyline=l;this._totalPath=l.getPath()};h.prototype.getPolyline=function(){return this._polyline}})();
</script>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
    .anchorBL{
        display:none;
    }
    .BMap_stdMpZoom {
        display:block;
    }
</style>  
</head>
<body>
<div id="container">
    
</div> 
<button id="start">start4</button>
    <button id="cancel">cancel</button>
<script type="text/javascript"> 
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("container",{
        mapType:BMAP_NORMAL_MAP
    });   
    var point = new BMapGL.Point(116.404,39.915)
    map.centerAndZoom(point,15)
    map.enableScrollWheelZoom(true);
    var points = [
        new BMapGL.Point(116.418017,39.914402),
        new BMapGL.Point(116.418751,40.058995),
        new BMapGL.Point(116.307899,40.057038)
    ]
    var lines = new BMapGL.Polyline(points);
    var opts = {
        delay:1000,
        duration:20000,
        tilt:30,
        overallView:true
    }
    console.log(BMapGLLib)
    var trackAnimation = new BMapGLLib.TrackAnimation(map,lines,opts);
    trackAnimation.start();
</script>  
</body>  
</html>

（14）、散点图

散点图

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=iz9QPjUAe3tXx7CNgnY1t0afdAlwcHRQ"></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>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #map_container{height:100%}  
    .anchorBL{
        display:none;
    }
    .BMap_stdMpZoom {
        display:block;
    }
</style>  
</head>
<body>
<div id="map_container">
    
</div> 
<button id="start">start4</button>
    <button id="cancel">cancel</button>
<script type="text/javascript"> 
    var map = initBMap();
    var data = initData();
    setData(map,data);
    //初始化百度地图
    function initBMap(){
        var cityCenter = mapv.utilCityCenter.getCenterByCityName('南京'); 
        var map = initMap({
            tilt:0,
            center:[cityCenter.lng,cityCenter.lat],
            zoom:10,
            style:snowStyle
        })
        return map
    }

    //准备数据源
    function initData(){
        var data = [];
        var cities = ['北京','天津','上海','重庆','石家庄','太原','呼和浩特',
'哈尔滨','长春','济南','南京','合肥','杭州','南昌','福州','郑州','武汉','长沙','广州','西安','银川','兰州','西宁','乌鲁木齐','成都','贵阳','昆明','拉萨','海口'];
        cities.forEach((item)=>{
            var cityCenter = mapv.utilCityCenter.getCenterByCityName(item);        
            data.push({
                geometry:{
                    type:'Point',
                    coordinates:[cityCenter.lng,cityCenter.lat]
                },
                properties:{
                    sales:Math.random()*100
                }
            })
        })
        console.log(data)
        return data;
    }
    
    //绘制数据源
    function setData(map,data){
        //1.生成mapvgl 视图 View
        var view = new mapvgl.View({ map });
        //2.初始化Intensity对象
        var intensity = new mapvgl.Intensity({
            min:0,
            max:100,
            minSize:5,
            maxSize:30,
            gradient:{
                0:'rgba(25,66,102,0.8)',
                0.3:'rgba(145,102,129,0.8)',
                0.7:'rgba(210,131,137,0.8)',
                1:'rgba(248,177,149,0.8)'
            }
        })
        //2.初始化 mapvgl 的PointLayer 对象
        var pointLayer = new mapvgl.PointLayer({
            size:function(data){
                return intensity.getSize(data.properties.sales);
            },
            color:function(data){
                return intensity.getColor(data.properties.sales);
            }
        });
        //3.将Point对象加入View中
        view.addLayer(pointLayer);
        //4.将data与Point进行绑定
        pointLayer.setData(data);
        //https://youbaobao.xyz/datav-docs/guide/guide/bmap-datav.html
    }

</script>  
</body>  
</html>

（15）、飞线动画
贝塞尔曲线官网api地址
 飞线图层官网

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=开发者key"></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.131/dist/mapvgl.min.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.131/dist/mapvgl.threelayers.min.js"></script>

飞线动画

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=iz9QPjUAe3tXx7CNgnY1t0afdAlwcHRQ"></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.131/dist/mapvgl.min.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.131/dist/mapvgl.threelayers.min.js"></script>
</script>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #map_container{height:100%}  
    .anchorBL{
        display:none;
    }
    .BMap_stdMpZoom {
        display:block;
    }
</style>  
</head>
<body>
<div id="map_container">
    
</div> 
<button id="start">start4</button>
    <button id="cancel">cancel</button>
<script type="text/javascript"> 
    var map = initBMap();
    var data = initData();
    setData(map,data);
    //初始化百度地图
    function initBMap(){
        var cityCenter = mapv.utilCityCenter.getCenterByCityName('上海'); 
        var map = initMap({
            tilt:60,
            center:[cityCenter.lng,cityCenter.lat],
            zoom:6,
            style:snowStyle
        })
        return map
    }

    //准备数据源
    function initData(){
        var data = [];
        var cities = ['北京','天津','上海','重庆','石家庄','太原','呼和浩特',
'哈尔滨','长春','济南','南京','合肥','杭州','南昌','福州','郑州','武汉','长沙','广州','西安','银川','兰州','西宁','乌鲁木齐','成都','贵阳','昆明','拉萨','海口'];
        var randomCount = 100;
        //生成贝塞尔曲线坐标集
        //1.实例化贝塞尔曲线对象
        var curve = new mapvgl.BezierCurve();
        while(randomCount--){
            //2.设置起点和终点坐标
            var start = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random()*cities.length)]);
            var end = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random()*cities.length)])
            curve.setOptions({
                start:[start.lng,start.lat],
                end:[end.lng,end.lat]
            })
            //3.生成贝塞尔曲线坐标集
            var curveData = curve.getPoints();
            data.push({
                geometry:{
                    type:'LineString',
                    coordinates:curveData
                }
            })
        }
        
        return data;
    }
    
    //绘制数据源
    function setData(map,data){
        //1.初始化图层
        var view = new mapvgl.View({ map })
        //2.初始化飞线对象
        var flyLine = new mapvgl.FlyLineLayer({
            color: 'rgba(50, 50, 200, 1)',
            textureColor: 'rgba(50, 50, 200, 1)',
            textureWidth: 1,
            textureLength: 30
        })
        //3.将飞线对象添加到图层中
        view.addLayer(flyLine)
        //4.将飞线对象与数据源进行绑定
        flyLine.setData(data)
    }
/*
vue响应式原理（回答的组件实现双向绑定）
vuex（基本api熟悉）
react没用过
*/
</script>  
</body>  
</html>

（16）、酷炫飞线动画
官网案例
mapv版

酷炫飞线动画

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

    <div id="map"></div>
    <canvas id="canvas"></canvas>

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=iz9QPjUAe3tXx7CNgnY1t0afdAlwcHRQ"></script>
    <script type="text/javascript" src="https://mapv.baidu.com/build/mapv.js"></script>

    <script type="text/javascript">

        // 百度地图API功能
        var map = new BMap.Map("map", {
            enableMapClick: false
        });    // 创建Map实例
        map.centerAndZoom(new BMap.Point(108.154518,36.643346), 5);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        // 地图自定义样式
        map.setMapStyle({
            styleJson: [{
                "featureType": "water",
                "elementType": "all",
                "stylers": {
                    "color": "#044161"
                }
            }, {
                "featureType": "land",
                "elementType": "all",
                "stylers": {
                    "color": "#091934"
                }
            }, {
                "featureType": "boundary",
                "elementType": "geometry",
                "stylers": {
                    "color": "#064f85"
                }
            }, {
                "featureType": "railway",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "highway",
                "elementType": "geometry",
                "stylers": {
                    "color": "#004981"
                }
            }, {
                "featureType": "highway",
                "elementType": "geometry.fill",
                "stylers": {
                    "color": "#005b96",
                    "lightness": 1
                }
            }, {
                "featureType": "highway",
                "elementType": "labels",
                "stylers": {
                    "visibility": "on"
                }
            }, {
                "featureType": "arterial",
                "elementType": "geometry",
                "stylers": {
                    "color": "#004981",
                    "lightness": -39
                }
            }, {
                "featureType": "arterial",
                "elementType": "geometry.fill",
                "stylers": {
                    "color": "#00508b"
                }
            }, {
                "featureType": "poi",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "green",
                "elementType": "all",
                "stylers": {
                    "color": "#056197",
                    "visibility": "off"
                }
            }, {
                "featureType": "subway",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "manmade",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "local",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "arterial",
                "elementType": "labels",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "boundary",
                "elementType": "geometry.fill",
                "stylers": {
                    "color": "#029fd4"
                }
            }, {
                "featureType": "building",
                "elementType": "all",
                "stylers": {
                    "color": "#1a5787"
                }
            }, {
                "featureType": "label",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "poi",
                "elementType": "labels.text.fill",
                "stylers": {
                    "color": "#ffffff"
                }
            }, {
                "featureType": "poi",
                "elementType": "labels.text.stroke",
                "stylers": {
                    "color": "#1e1c1c"
                }
            }, {
                "featureType": "administrative",
                "elementType": "labels",
                "stylers": {
                    "visibility": "off"
                }
            },{
                "featureType": "road",
                "elementType": "labels",
                "stylers": {
                    "visibility": "off"
                }
            }]
        });

        var randomCount = 500;

        var node_data = {
            "0":{"x":108.154518, "y":36.643346},
            "1":{"x":121.485124, "y":31.235317},
        };

        var edge_data = [
            {"source":"1", "target":"0"}
        ]

        var citys = ["北京","天津","上海","重庆","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","广州","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];

        // 构造数据
        for (var i = 1; i < randomCount; i++) {
            var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
            node_data[i] = {
                x: cityCenter.lng - 5 + Math.random() * 10,
                y: cityCenter.lat - 5 + Math.random() * 10,
            }
            edge_data.push(
                {"source": ~~(i * Math.random()), "target": '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: 'Point',
                        coordinates: [line[j].x, line[j].y]
                    },
                    count: 1,
                    time: j
                });
            }
            data.push({
                geometry: {
                    type: 'LineString',
                    coordinates: coordinates
                }
            });
        }

        var dataSet = new mapv.DataSet(data);

        var options = {
            strokeStyle: 'rgba(55, 50, 250, 0.3)',
            globalCompositeOperation: 'lighter',
            shadowColor: 'rgba(55, 50, 250, 0.5)',
            shadowBlur: 10,
            methods: {
                click: function (item) {
                }
            },
            lineWidth: 1.0,
            draw: 'simple'
        }

        var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);

        var dataSet = new mapv.DataSet(timeData);

        var options = {
            fillStyle: 'rgba(255, 250, 250, 0.9)',
            globalCompositeOperation: 'lighter',
            size: 1.5,
            animation: {
                type: 'time',
                stepsRange: {
                    start: 0,
                    end: 100
                },
                trails: 1,
                duration: 5,
            },
            draw: 'simple'
        }

        var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);

    </script>
    
</body>
</html>

mapvgl版

简单版万剑归宗！

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=iz9QPjUAe3tXx7CNgnY1t0afdAlwcHRQ"></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.131/dist/mapvgl.min.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.131/dist/mapvgl.threelayers.min.js"></script>
</script>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #map_container{height:100%}  
    .anchorBL{
        display:none;
    }
    .BMap_stdMpZoom {
        display:block;
    }
</style>  
</head>
<body>
<div id="map_container">
    
</div> 
<button id="start">start4</button>
    <button id="cancel">cancel</button>
<script type="text/javascript"> 
    var map = initBMap();
    var data = initData();
    setData(map,data);
    //初始化百度地图
    function initBMap(){
        var cityCenter = mapv.utilCityCenter.getCenterByCityName('北京'); 
        var map = initMap({
            tilt:0,
            center:[cityCenter.lng,cityCenter.lat],
            zoom:5,
            style:darkStyle 
        })
        return map
    }

    //准备数据源
    function initData(){
        var data = [];
        var cities = ['北京','天津','上海','重庆','石家庄','太原','呼和浩特',
'哈尔滨','长春','济南','南京','合肥','杭州','南昌','福州','郑州','武汉','长沙','广州','西安','银川','兰州','西宁','乌鲁木齐','成都','贵阳','昆明','拉萨','海口'];
        var endCity = mapv.utilCityCenter.getCenterByCityName('北京');
        var curve = new mapvgl.BezierCurve();
        var randomCount = 500;
        for(var i = 1;i < randomCount;i++){
            var startCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random()*cities.length)]);
            curve.setOptions({
                start:[startCity.lng - 5 + 10*Math.random(),startCity.lat - 5 + 10*Math.random()],
                end:[endCity.lng,endCity.lat]
            })
            var curveData = curve.getPoints();
            data.push({
                geometry:{
                    type:'LineString',
                    coordinates:curveData
                }
            })
        }
        
        return data;
    }
    
    //绘制数据源
    function setData(map,data){
        //1.初始化图层
        var view = new mapvgl.View({ map })
        var lineLayer = new mapvgl.LineLayer({
            color:'rgba(155,150,250,0.8)'
        })
        view.addLayer(lineLayer);
        lineLayer.setData(data);

        var linePointLayer = new mapvgl.LinePointLayer({
            size:5,
            speed:1,
            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(data)
    }
/*
vue响应式原理（回答的组件实现双向绑定）
vuex（基本api熟悉）
react没用过
*/
</script>  
</body>  
</html>

边绑定
mapvgl官方文档
 知乎专栏边绑定

边合并

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=iz9QPjUAe3tXx7CNgnY1t0afdAlwcHRQ"></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.131/dist/mapvgl.min.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.131/dist/mapvgl.threelayers.min.js"></script>
</script>
<style type="text/css">  
   html{height:100%}  
   body{height:100%;margin:0px;padding:0px}  
   #map_container{height:100%}  
   .anchorBL{
       display:none;
   }
   .BMap_stdMpZoom {
       display:block;
   }
</style>  
</head>
<body>
<div id="map_container">
   
</div> 
<button id="start">start4</button>
   <button id="cancel">cancel</button>
<script type="text/javascript"> 
   var map = initBMap();
   var data = initData();
   setData(map,data);
   //初始化百度地图
   function initBMap(){
       var cityCenter = mapv.utilCityCenter.getCenterByCityName('北京'); 
       var map = initMap({
           tilt:0,
           center:[cityCenter.lng,cityCenter.lat],
           zoom:5,
           style:darkStyle 
       })
       return map
   }

   //准备数据源
   function initData(){
       var data = [];
       var cities = ['北京','天津','上海','重庆','石家庄','太原','呼和浩特',
'哈尔滨','长春','济南','南京','合肥','杭州','南昌','福州','郑州','武汉','长沙','广州','西安','银川','兰州','西宁','乌鲁木齐','成都','贵阳','昆明','拉萨','海口'];
       var endCity = mapv.utilCityCenter.getCenterByCityName('北京');
       var nodeData = [{
           x:endCity.lng,
           y:endCity.lat
       }]
       var edgeData = []
       var randomCount = 500;
       for(var i = 0;i < randomCount;i++){
           var startCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random()*cities.length)]);
           nodeData.push({
               x:startCity.lng - 5 + Math.random()*10,
               y:startCity.lat - 5 + Math.random()*10
           });
           edgeData.push({
               source:i,
               target:0
           })
       }
       var bundling = mapv.utilForceEdgeBundling().nodes(nodeData).edges(edgeData);
       console.log(bundling)
       var results = bundling();
       for(var i = 0;i < results.length;i++){
           var line = results[i];
           if(i==1){
               console.log(line,'数据')
           }
           var coordinates = [];
           for(var j = 0; j < line.length;j++){
               coordinates.push([line[j].x,line[j].y]);
           }
           data.push({
               geometry:{
                   type:'LineString',
                   coordinates
               }
           })
       }
       return data;
   }
   
   //绘制数据源
   function setData(map,data){
       //1.初始化图层
       var view = new mapvgl.View({ map })
       var lineLayer = new mapvgl.LineLayer({
           color:'rgba(155,150,250,0.8)',
           blend:'lighter'
       })
       view.addLayer(lineLayer);
       lineLayer.setData(data);

       var linePointLayer = new mapvgl.LinePointLayer({
           size:5,
           speed:1,
           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(data)
   }
/*
vue响应式原理（回答的组件实现双向绑定）
vuex（基本api熟悉）
react没用过
*/
</script>  
</body>  
</html>

17、3D城市地图
立体覆盖物
 坐标转换

3d城市地图

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="referrer" content="never"> 
<title>Hello, World</title>  

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=iz9QPjUAe3tXx7CNgnY1t0afdAlwcHRQ"></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.131/dist/mapvgl.min.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.131/dist/mapvgl.threelayers.min.js"></script>
</script>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #map_container{height:100%}  
    .anchorBL{
        display:none;
    }
    .BMap_stdMpZoom {
        display:block;
    }
</style>  
</head>
<body>
<div id="map_container">
    
</div> 
<button id="start">start4</button>
    <button id="cancel">cancel</button>
<script type="text/javascript"> 
    //mapvgl官网地址 https://mapv.baidu.com/gl/docs/ShapeLayer.html
    //墨卡托投影
    //非百度坐标转百度坐标  https://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
    var map = initBMap();
    initData().then((data)=>{
        setData(map,data);
    });
    
    //初始化百度地图
    function initBMap(){
        var cityCenter = mapv.utilCityCenter.getCenterByCityName('重庆'); 
        //[106.540547,29.564858]
        var map = initMap({
            tilt:80,
            heading:-45.3,
            center:[106.540547,29.564858],
            zoom:17
        })
        return map
    }

    //准备数据源
    function initData(){
        return fetch('https://www.youbaobao.xyz/datav-res/examples/chongqing.json')
        .then(res=>res.json())
        .then(res=>{
            var polygons = [];
            var len = res.length;
            for(var i = 0;i < len;i++){
                var line = res[i];
                var polygon = [];
                var pt = [line[1]*512,line[2]*512];
                for(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
                    }
                })
            }
            return polygons;
        })
        
    }
    
    //绘制数据源
    function setData(map,data){
        //1.初始化图层
        var view = new mapvgl.View({map})
        var ShapeLayer = new mapvgl.ShapeLayer({
            color:'blue',
            opacity:1,
            style:'windowAnimation',
            riseTime:2000,
            enablePicked:true,
            selectedIndex:-1,
            selectedColor:'red',
            autoSelect:true,
            onClick:(e)=>{
                console.log(e);
            }
        })
        view.addLayer(ShapeLayer);
        ShapeLayer.setData(data);
    }
</script>  
</body>  
</html>

自定义地图样式

官网链接
步骤：
1、点击“地图模板”设置一个自定义样式
2、将该样式发布，得到一个id
3、

map.setMapStyleV2({//设置个性化样式
        styleId:'5b0df1ed4f334469f88c4bf6edd992fc'
})

百度地图可视化

一、初识

自定义地图样式

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读