0

我正在使用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'
    }
}

我不知道为什么投影不起作用。任何想法将不胜感激！

4

1 回答 1

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;
}

您可以在此处找到更多详细信息。

于 2013-09-19T02:13:51.627 回答