我正在使用three.js构建一个简单的3D地图,需要在其上绘制一些城市位置。
到目前为止,你可以看到我的进展http://e.harrynorthover.com/map/,将鼠标移到别针上,看看它应该是什么样的城市。
我正在使用Equirectangular投影方法,但我遇到的问题是我似乎无法正确定位城市。
我的投影代码是:
RunGenerator.Utils.prototype.equirectangularPosition = function(lat, lng)
{
var newX = ((lng + 180) * (RunGenerator.Utils.MAP_WIDTH / 360));
var newY = (((lat * -1) + 90) * (RunGenerator.Utils.MAP_HEIGHT / 180));
return {
x:newX,
y:newY
};
}
我创建3D地图的代码是:
RunGenerator.prototype.createMap = function()
{
var that = this;
var mapGeometry,
mapTexture,
mapMaterial,
mapMaterial2,
mapTexture2,
mat;
mapGeometry = new THREE.PlaneGeometry( 1024, 794, 10, 10 );
mat = new THREE.Matrix4();
mapMaterial = new THREE.MeshLambertMaterial( { map:this.mapTexture[0], transparent: true, color:0xFFFFFF } );
mapMaterial2 = new THREE.MeshLambertMaterial( { map:this.mapTexture[1], transparent: true, color:0xFFFFFF, wireframe:false, opacity:.5 } );
this.map = new THREE.Mesh( mapGeometry, mapMaterial );
var map2 = new THREE.Mesh( mapGeometry, mapMaterial2 );
map2.position.z = -5;
//this.map.position.x = -30;
//this.map.position.y = 80;
this.map.position.z = 0;
this.map.scale.x = this.map.scale.y = this.map.scale.z = 1;
//mat.makeTranslation( 0, 100, 0 );
//mapGeometry.applyMatrix( mat );
//this.map.rotation.z = 90;
this.map.add(map2);
this.scene.add(this.map);
};
我的数据:
{
name: 'Southampton',
waypoint: {
latitude: '50.9039500',
longitude: '-1.4042800'
}
},
{
name: 'LA',
waypoint: {
latitude: '34.0522300',
longitude: '-118.2436800'
}
}
我不知道投影为什么不起作用。任何想法将不胜感激!
答案 0 :(得分:0)
很久以前我不得不解决同样的问题。
这是我最终做的代码。它在AS3中,但应该很容易移植:
private function getMercatorPoint(lat : Number, lon : Number, mapwidth : uint, mapheight : uint) : Point
{
return new Point(((lon+180) / 360) * mapwidth, ((90-GudermannianInv(lat)) / 180) * mapheight);
}
private function GudermannianInv(lat : Number) : Number
{
var sign : Number = Math.sin(lat) > 0 ? 1 : -1;
var sin : Number = Math.sin(lat * 0.0174532925 * sign);
return sign * (Math.log((1 + sin) / (1 - sin)) / 2) * 28.6478898;
}
您可以找到更多详情here。