百度地图可视化

一、初识

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

地图示例

服务端代码

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）、异步加载
意思是不让地图的加载影响主进程的渲染，当页面所有资源全部加载完成后再加载百度地图

（3）、3D地图
效果：

3D地图

（4）、控件
缩放

右上角缩放

常量	位置
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）、绘制图标

图标

（6）、绘制线

绘制线

线的更多属性

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）、绘制多边形

多边形

（8）、绘制文本框

文本框

（9）、绘制信息框

信息框

（10）、调整提示框位置

（11）、自定义信息框

（12）、动画viewanimation

动画

  

  
  
 
 
  


  



    
 
start
    cancel
  
  

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

轨迹动画

  

  
  
 
 
  



  



    
 
start4
    cancel
  
  

（14）、散点图

散点图

  

  
  
 
 
  





  



    
 
start4
    cancel
  
  

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

飞线动画

  

  
  
 
 
  







  



    
 
start4
    cancel
  
  

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

酷炫飞线动画

mapvgl版

简单版万剑归宗！

  

  
  
 
 
  







  



    
 
start4
    cancel
  
  

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

边合并

  

  
  
 
 
  







  



   
 
start4
   cancel
  
  

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

3d城市地图

  

  
  
 
 
  







  



    
 
start4
    cancel
  
  

自定义地图样式

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

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