Смещение позиционирования

Question

Я строю простую 3D-карту с использованием three.js, на которой нужно нанести несколько позиций города.

Вы можете увидеть мой прогресс до сих пор http://e.harrynorthover.com/map/, наведите курсор мыши на булавки, чтобы увидеть, какой город это должно быть.

Я использую метод "Прямоугольной проекции", но проблема в том, что я не могу заставить его правильно расположить города.

Мой код для проекции:

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

Я в недоумении, почему проекция не работает. Любые идеи будут высоко ценится!

Answer 1

Давным-давно мне пришлось решать эту же проблему.

Вот код, который я в итоге сделал. Это в 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;
}

Вы можете найти более подробную информацию здесь.