百度地图可视化
2021-08-04 本文已影响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>
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'
})
