js室内地图开发_使用JS+Three.js+Echart开发商场室内地图客流信息统计功能（下）...

(2)实时视频及全景漫游的实现：

首先创建实时视频的摄像头图片标注和全景漫游的360°图片标注，标注实现后可在地图上点击相应的图片标注从而显示实时视频画面或360°全景画面，画面可拖拽可放大缩小。

各楼层实时视频的摄像头图片标注：

//创建各楼层摄像头标注function showCameras() {    var url = 'data/test666/model/camera1.js';    //json数据，定义摄像头所在楼层和位置

var infos = [{

fnum: 1,

cameras: [{

x: 12683472.409512023,

y: 2557870.1781415385,

},

{

x: 12683450.258123305,

y: 2557858.104209115

},

{

x: 12683430.863774385,

y: 2557865.8999765064

}

]

}, {

fnum: 2,

cameras: [{

x: 12683472.409512023,

y: 2557870.1781415385,

},

{

x: 12683450.258123305,

y: 2557858.104209115

},

{

x: 12683430.863774385,

y: 2557865.8999765064

}

]

}, {

fnum: 3,

cameras: [{

x: 12683472.409512023,

y: 2557870.1781415385,

},

{

x: 12683450.258123305,

y: 2557858.104209115

},

{

x: 12683430.863774385,

y: 2557865.8999765064

}

]

}];    //创建三维模型标注  实时视频摄像头

var ang = 0;

infos.forEach(function (info) {        var floorLayer = map.getFloor(info.fnum);        var layer = floorLayer.getOrCreateLayerByName("cameras", esmap.ESLayerType.MODEL3D);        var _id = 1;

info.cameras.forEach(function (camera) {            var im = new esmap.ES3DMarker({

x: camera.x,

y: camera.y,

id: _id++,

name: "camera",

url: url,

size: 44,

angle: ang,

height: 3,

showLevel: 16,

spritify: true

});

ang += 30;

layer.addMarker(im);//一个楼层共用一个图层        });

layer && layer.show3D();

});

}

点击地图展示实时视频或全景漫游弹框(div)函数active()：

//地图点击标注后  临时创建div盒子  放全景图或实时视频function active(e, type) { // type: 1.pano; 0.videovar cc = $($(".drag")[0]).clone();    var wid = $(".drag").width();

$("body").append(cc);

cc[0].style.display = "block";    if (__xx 

__xx = wid;

}

cc[0].style.left = (__xx - wid - 20).toString() + "px";

cc[0].style.top = (__yy - 25 / 2).toString() + "px";    if (!type) {

cc.find('.content')[0].innerHTML = '';

cc.find('.title h2')[0].innerHTML = '实时视频';

createPopBox();

} else {

cc.find('.title h2')[0].innerHTML = '全景展示';

var box = document.createElement('div');

cc.find('.content').append(box);

box.className = 'psv-box';

oPano = new CreatePanorama({

container: box,

panorama: 'image/pano/' + e.id + '/',

six: 1

})

createPopBox(oPano);

}

}

展示的弹框可拖拽、大小可调整，功能实现如下函数：

/*可拖拽可放大缩小弹框*/function createPopBox(pano) { // pano: 0.视频，1.全景

/*-------------------------- +

获取id, class, tagName 函数

+-------------------------- */

var get = {

byId: function (id) {            return typeof id === "string" ? document.getElementById(id) : id;

},

byClass: function (sClass, oParent) {            var aClass = [];            var reClass = new RegExp("(^| )" + sClass + "( |$)");            va