<!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>
</head>
<body>
<div id="map_container"></div>
<script>
var map = initBMap();
var data = initData();
setData(map, data);
function initBMap(){
var cityCenter = mapv.utilCityCenter.getCenterByCityName('南京');
var map = initMap({
center: [cityCenter.lng, cityCenter.lat],
zoom: 8,
tilt: 0,
style: snowStyle
})
return map;
}
// 准备数据源
function initData() {
var data = [];
var random = 700;
var cities = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
];
while(random--) {
var cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);
data.push({
geometry: {
type: 'Point',
coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
},
properties: {
sales: Math.random() * 100
}
})
}
return data;
}
// 绘制数据源
function setData(map, data) {
console.log(data)
// 1. 生成mapvgl试图View
var view = new mapvgl.View({
map: map
});
// 2. 初始化mapvgl的PointLayer对象
var pointLayer = new mapvgl.PointLayer({
/* size: function(data) {
console.log(data)
},
color: function(data){
console.log(data)
} */
});
// 3. 将PointLayer对象加入View中
view.addLayer(pointLayer);
// 4. 将data与Point进行绑定
pointLayer.setData(data)
}
</script>
</body>
</html>
按视频和文档中的例子来做,data可以打印出不同的坐标,但覆盖的点就是无法显示。不管地图怎么缩放,都无法显示。而且,文档中的示例,我直接复制过来,也无法正常显示。请老师帮忙看下,会是什么原因?