原生JAVASCRIPT实现地球模型MAP效果交互式WORLD INTERACTIVE

最新推荐文章于 2025-08-15 21:07:05 发布

路人甲嘉

最新推荐文章于 2025-08-15 21:07:05 发布

阅读量1.6k

点赞数

分类专栏：实例demo 文章标签： H5地球模型 html5 原生js 交互式

实例demo 专栏收录该内容

4 篇文章

订阅专栏

本文介绍用原生JavaScript实现交互式地球模型。涉及JavaScript中onmousemove、createElement及描点等基础知识，还给出了效果图和代码实现，原文可参考web前端中文站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生JavaScript实现的demo例子，web前端中文站在前面介绍不少的实例。今天，我们用原生js来实现地图领域的效果，交互式地球模型。

主要涉及到JavaScript中的onmousemove，createElement及描点等基础知识。

效果图

交互式地球模型

代码实现

<script type="text/javascript"> //www.lisa33xiaoq.net
var object = [];
var world = "001F8C0C400031F30E7FE000FF964FFFFF00FFB067FFFE001FF03FFFFA001FF07FFFFC003F806BFFF4001F8020FFF4001D007FFFF4000E80FFE7F0000600FFC6680001E07FC2180001F00FC0780001FC0F81730001FC0F80940000FC0F400F0020780F403F00007006001F00006000000640006000000080006000000000002000000000";
var xm  = -1000,
    ym  = -1000,
    xmb = 0,
    ymb = 0,
    nx  = 0,
    ny  = 0,
    sx,
    sy,
    sp,
    bv,
    bh,
    pt;
/* mouse events */
document.onmousemove = function(e){
	if (window.event) e = window.event;
	xm = (e.x || e.clientX) - nx;
	ym = (e.y || e.clientY) - ny;
	xm = Math.round(Math.round(xm/11)*11);
	ym = Math.round(Math.round(ym/11)*11);
}
function resize() {
	sx = sp.offsetLeft;
	sy = sp.offsetTop;
	nx = document.body.offsetWidth * .5 + sx;
	ny = document.body.offsetHeight * .5 + sy;
}
onresize = resize;
/* create pixel */
function CObj(x, y){
	var o = document.createElement("span");
	o.style.left = Math.round(x * 11)+"px";
	o.style.top  = Math.round(y * 11)+"px";
	sp.appendChild(o);
	o = document.createElement("span");
	sp.appendChild(o);
	this.obj  = o.style;
	this.x    = x;
	this.y    = y;
	this.x0   = x * 11;
	this.y0   = y * 11;
	this.anim = true;
} 
CObj.prototype.mainloop = function(){
 	var dx                 = xm - this.x0;
	var dy                 = ym - this.y0;
	var dist               = Math.sqrt(dx * dx + dy * dy);
	if (dist < 140) {
		/* globe */
		if(!this.anim){
			this.anim           = true;
			this.obj.background = (((this.x>16&&this.x<23&&this.y<8)&&!(this.x==22&&this.y==6))||(this.x==23&&this.y==3))?"#F80":"#FFF";
			this.obj.zIndex     = 5;
		}
		var M                   = Math.cos(.5 * Math.PI * dist / 140);
		this.obj.left           = Math.round(-sx -xm + this.x0 - dx * M)+"px";
		this.obj.top            = Math.round(-sy -ym + this.y0 - dy * M)+"px";
		this.obj.width          = this.obj.height = Math.round(M * 14)+"px";
	} else {
		if(this.anim){
			/* background */
			this.obj.left       = this.x0+"px";
			this.obj.top        = this.y0+"px";
			this.obj.width      = this.obj.height = "";
			this.obj.background = (((this.x>16&&this.x<23&&this.y<8)&&!(this.x==22&&this.y==6))||(this.x==23&&this.y==3))?"#C70":"#666";
			this.obj.zIndex     = 3;
			this.anim           = false;
		}
	}
}
function mainloop(){
	/* mainloop */
	if(xm!=xmb || ym!=ymb){
		bv.left = xm+"px";
		bh.top  = ym+"px";
		pt.left = xm+"px";
		pt.top  = ym+"px";
		for(i in object) object[i].mainloop();
	}
	xmb = xm;
	ymb = ym;
	setTimeout(mainloop, 16);
} 
onload = function(){
	/* pointers */
	bv = document.getElementById("bv").style;
	bh = document.getElementById("bh").style;
	pt = document.getElementById("pt").style;
	sp = document.getElementById("sp");
	/* decompress world */
	var bits = "";
	var o;
	for(var i=0, n=world.length; i<n; i+=2){
		o = parseInt(world.substring(i,i+2), 16).toString(2);
		bits += "00000000".substring(0, 8-o.length)+o;
	}
	/* create pixels */
	var k = 0;
	for(var y=0;y<22;y++){
		for(var x=0;x<48;x++){
			if(bits.charAt(k++)=="1")object.push(new CObj(x, y));
		}
	}
	/* run */
	resize();
	mainloop();
}
</script>

原文链接：web前端中文站 https://www.lisa33xiaoq.net/1283.html