Skyline 网页的二维三维联动实现

skyline在web中和百度地图的二维三维联动效果。请在IE中浏览。

参考Dome

html代码

css代码

body, html {
    width: 99.9%;
    height: 99.8%;
}
#allmap {
    width: 50%;
    height: 100%;
    overflow: hidden;
    margin:0;
    float:left;
}
#Te1 {
    width: 50%;
    height: 100%;
    overflow: hidden;
    margin:0;
}

js实现代码

/*
 说明：skyline和百度地图联动的效果
 开发者：http://skyline.duapp.com
 时间：2013.10.8
 备注：版权所有请勿删除《开发者》
*/
var sgworld;
var map;

function Init() {
    var flypath = "http://bcs.duapp.com/wordprees-bk/fly/wp0.FLY";
    sgworld = document.getElementById("globe1");
    sgworld.AttachEvent("OnLoadFinished", OnProjectLoadFinished);
    sgworld.AttachEvent("OnLButtonUp", OnLUp);
    sgworld.AttachEvent("OnMouseWheel", OnMWheel);
    //sgworld.AttachEvent("OnFrame", LinkOnFrame);
    sgworld.Project.Open(flypath);
}

function OnProjectLoadFinished() {
    var s = document.createElement("script");
    s.src = "http://api.map.baidu.com/api?v=2.0&ak=F7ee701c0475925cef48b45b8edc58f8&callback=initmap";
    document.body.appendChild(s);
    sgworld.Window.ShowControls(2);
}

function initmap() {
    map = new BMap.Map("allmap", {
        mapType: BMAP_HYBRID_MAP
    }); // 创建Map实例
    map.centerAndZoom("全国", 5); // 初始化地图,设置中心点坐标和地图级别。
    map.enableScrollWheelZoom(); //启用滚轮放大缩小
    map.addControl(new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        type: BMAP_NAVIGATION_CONTROL_SMALL
    }));
    //将联动绑定在拖拽事件上
    map.addEventListener("dragend", function () {
       MapLink();
    });
     //打开后触发
    map.addEventListener("load", function () {
        MapLink();
    });

}

function OnLUp() {
    LinkOnFrame();
}

function OnMWheel() {
    LinkOnFrame();
}

function MapLink()
{
 var bs2 = map.getBounds();
        var bssw2 = bs2.getSouthWest(); //可视区域左下角
        var bsne2 = bs2.getNorthEast(); //可视区域右上角 
        //操作三维联动-----------------------------------------------------------
        Linkage(bsne2.lng, bsne2.lat, bssw2.lng, bssw2.lat);
}

function LinkOnFrame() {
    var rect = sgworld.Window.Rect;
    var rt = sgworld.Window.PixelToWorld(0, rect.Height - 1, -1).Position;
    var lt = sgworld.Window.PixelToWorld(rect.Width - 1, 0, -1).Position;
    var pointArr = [new BMap.Point(lt.X, lt.Y), new BMap.Point(rt.X, rt.Y)]

    map.setViewport(pointArr, {
        enableAnimation: "true",
        margins: [0, 0, 0, 0],
        zoomFactor: 1
    });
}

function Linkage(x1, y1, x2, y2) {

    var dXCoord = (x1 + x2) / 2;
    var dYCoord = (y1 + y2) / 2;
    var dAltitude = sgworld.CoordServices.GetDistance(x1, y1, x2, y2);
    var eAltitudeTypeCode = 0; // AltitudeTypeCode.ATC_TERRAIN_RELATIVE;
    var dYaw = 0.0;
    var dPitch = -89;
    var dRoll = 0.0;
    var dDistance = sgworld.CoordServices.GetDistance(x1, y1, x2, y2);
    //alert(dDistance);
    var cPos = sgworld.Creator.CreatePosition(dXCoord, dYCoord, dAltitude, eAltitudeTypeCode, dYaw, dPitch, dRoll, dDistance);

    sgworld.Navigate.SetPosition(cPos);
}