本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
初始化卫星模式地球模块先旋转下，再出标注点
如上图，初始化是一个地球，然后再出现地图模块。
实现逻辑是，通过改变中心点来让地球先旋转再到对应的点，然后通过定时器来再次改变中心点，在改变放大的大小层级，来实现的
代码如下
先引入，使用的是百度地图的
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=密钥"></script>
初步渲染地图
getlistInAtlasAll(){
let that = this
that.mapMaskShow = true //这个是给地图添加的一个遮罩层的，优化初始化地图白屏的
this.$http.post("url")
.then((res) => {
if (res.data.code == 0) {
that.proListAll = res.data.data
if (res.data.data.length > 0) {
this.initMap(res.data.data,2)
setTimeout(function () {
that.mapSetTimeout() //初步渲染好地图之后，使用定时器进行改变地图中心点和放大
},2000)
// clearTimeOut()
} else {}
} else {
that.$message.error(res.data.msg);
}
});
},
mapSetTimeout(){
//这个this.map,是我再初始化地图的时候，赋值到data里面的，具体的可以看下下面的完整代码
this.map.centerAndZoom(new BMapGL.Point(103.837649,36.082404), 5) //中心点是中国地图的中心--兰州位置
},
然后我们的初始化的中心点是位于地球的中国地图的另一面的随便一个国家的经纬度，这个看你们个人的想法
bmap.centerAndZoom(new BMapGL.Point(-105.672462,35.512837), value);
使用地图渲染模块结束的回调来关闭地图的遮罩层
bmap.loadMapStyleFiles(() => {
// 这里写样式加载完成后的回调
that.mapMaskShow = false
})
如果没有必要不要加下面这两个属性，我就是拿了百度地图的编辑器里面的参数，然后发现渲染地图出来之后是歪的（吃了不看文档的亏，注意啦）
// bmap.setHeading(64.5);
// bmap.setTilt(73);
根据返回的数据添加标注点图标
let myIcon = ''
myIcon = new BMapGL.Icon(dw, new BMapGL.Size(30,30));
//dw 是我引入的一张图片
//import dw from '../../../assets/image/index/dw-3.png'
添加label和label的样式修改
var html = "<span>"+'名称：'+ projectList[i].name + '<br/>' +'状态：'+ projectList[i].status +"</span>"
// 使用html的模式
var label = new BMapGL.Label(html, { offset: new BMapGL.Size(13, -13) });
地图事件--修改label的样式--隐藏和显示--改变标注点的图标
marker.addEventListener("mouseover", function (e,i) {
var label = this.getLabel()
var status = e.target.customData.data.completeState
label.setStyle({ display: "block", borderColor: "rgb(11,34,44)",backgroundColor:"rgb(11,34,44)"});
// label.setStyle({ display: "block", borderColor: "#fe8418",backgroundColor:"#fe8418"});
// let icon = new BMap.Icon(MiconHover, new BMap.Size(60,119));
// this.setIcon(icon);
// this.setZIndex(999)
});
完整的地图代码
initMap(proList,value,info) {
let that = this;
that.mapMaskShow = true
let projectList = proList
let gpsX,gpsY
if (info) {
gpsX=info.gpsX
gpsY=info.gpsY
} else {
gpsX=projectList[0].gpsX
gpsY=projectList[0].gpsY
}
var bmap = new BMapGL.Map("allmap"); // 创建Map实例
if (projectList.length > 0) {
bmap.centerAndZoom(new BMapGL.Point(-105.672462,35.512837), value);
//这是一开始业务，直接展示返回数据的一个点做为中心点
// bmap.centerAndZoom(new BMapGL.Point(parseFloat(gpsX), parseFloat(gpsY)), value);
} else {
bmap.centerAndZoom(new BMapGL.Point(-105.672462,35.512837), value); // 初始化地图,设置中心点坐标和地图级别(默认背景)
}
bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
for (var i = 0; i < projectList.length; i++) {
let myIcon = ''
myIcon = new BMapGL.Icon(dw, new BMapGL.Size(30,30));
var point = new BMapGL.Point(parseFloat(projectList[i].gpsX), parseFloat(projectList[i].gpsY));
var marker = new BMapGL.Marker(point,{
icon: myIcon
})
var html = "<span>"+'项目名称：'+ projectList[i].sectionName + '<br/>' +'项目状态：'+ projectList[i].completeState +"</span>"
//
var label = new BMapGL.Label(html, { offset: new BMapGL.Size(13, -13) });
if (info) {
label.setStyle({
display: "block",
color: "#fff",
fontSize: "12px",
fontFamily: "微软雅黑",
backgroundColor: "#fe8418",
padding: "5px 10px",
borderWidth: 1,
borderColor: "#fe8418",
borderRadius: "6px",
borderLeft:'none',
zIndex:'-5'
});
} else {
label.setStyle({
display: "none",
color: "#fff",
fontSize: "12px",
fontFamily: "微软雅黑",
backgroundColor: "rgb(11,34,44)",
padding: "5px 10px",
borderWidth: 1,
borderColor: "rgb(11,34,44)",
borderRadius: "6px",
borderLeft:'none',
zIndex:'-5'
});
}
marker.setLabel(label);
marker.customData = { 'data': projectList[i] } // 添加标点数据
// this.markerList.push(marker)
bmap.addOverlay(marker); // 添加标点
marker.addEventListener("mouseover", function (e,i) {
var label = this.getLabel()
var status = e.target.customData.data.completeState
label.setStyle({ display: "block", borderColor: "rgb(11,34,44)",backgroundColor:"rgb(11,34,44)"});
// label.setStyle({ display: "block", borderColor: "#fe8418",backgroundColor:"#fe8418"});
// let icon = new BMap.Icon(MiconHover, new BMap.Size(60,119));
// this.setIcon(icon);
// this.setZIndex(999)
});
marker.addEventListener("mouseout", function (e) {
var label = this.getLabel()
label.setStyle({ display: "none",borderColor: "rgb(11,34,44)"});
// let icon = new BMap.Icon(Micon, new BMap.Size(60,119));
// this.setIcon(icon);
});
marker.addEventListener("click", function (e) {
var label = this.getLabel()
// label.setStyle({ display: "block", borderColor: "#fe8418"});
var status = e.target.customData.data.completeState
label.setStyle({ display: "block", borderColor: "rgb(11,34,44)",backgroundColor:"rgb(11,34,44)"});
});
}
bmap.loadMapStyleFiles(() => {
// 这里写样式加载完成后的回调
that.mapMaskShow = false
})
bmap.setMapType(BMAP_EARTH_MAP);
// bmap.setHeading(64.5);
// bmap.setTilt(73);
this.map = bmap
},
就这样，一个简单的有动画的地球模式就完成了
欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章
