介绍一下前端开发思路，百度鹰眼轨迹管理平台是用ES6、React、Reflux开发的。自己开发的简单轨迹管理平台Demo是使用Backbone和marionette开发的。下面截图介绍一下前端思路。
我们将js代码按照MVC层次结构组织在下面若干个文件中。
前端html代码如下：
代码语言：html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鹰眼轨迹</title>
<meta name="keywords" content="地图鹰眼,鹰眼,轨迹,大数据位置,位置智能" />
<meta name="description" content="打造最专业的位置轨迹大数据服务平台。" />
<link rel="shortcut icon" href="static/images/earth.ico">
<link href="static/css/track.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="static/css/fontawesome/css/font-awesome.min.css" type="text/css">
<link href="static/css/jquery.datetimepicker.css" rel="stylesheet" type="text/css">
<link href="static/css/pagination.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your ak"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<script type="text/javascript" src="static/lib/jquery.min.js"></script>
<script type="text/javascript" src="static/lib/jquery.datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="static/lib/jquery-dateFormat.js" charset="UTF-8"></script>
<script type="text/javascript" src="static/lib/jquery.pagination.js" charset="UTF-8"></script>
<script type="text/javascript" src="static/lib/underscore.js"></script>
<script type="text/javascript" src="static/lib/backbone.js" charset="UTF-8"></script>
<script type="text/javascript" src="static/lib/backbone.marionette.js" charset="UTF-8"></script>
<script type="text/html" id="header-tmpl">
<div class="title">
<p>
<span class="name">车辆示例平台 (<span class="circle"></span><span id="state">0/4</span>)</span>
<span class="ctrl">
<i class="fa fa-chevron-up"></i>
</span>
</p>
</div>
<div id="track-btn" class="type-ctr active" data-tag="0">
<a href="javascript:void(0)">实时监控</a>
</div>
<div id="track-btn-2" class="type-ctr" data-tag="1">
<a href="javascript:void(0)">历史轨迹</a>
</div>
</script>
<script type="text/html" id="locatorItem-tmpl">
<input type="checkbox" class="cbtest" <%if(isShow)%> checked <%else;%> id="locator_<%=locator_id%>">
<label for="locator_<%=locator_id%>" class="check-box"></label>
<span class="state <%=locator_status%>" title="<%if(locator_status=='on')%>在线<%else%>离线<%;%>"></span>
<span><%=locator_name%></span>
</script>
<script type="text/html" id="trackItem-tmpl">
<input type="checkbox" class="cbtest" <%if(isShow)%> checked <%else;%> id="track_<%=track_locatorID%>">
<label for="track_<%=track_locatorID%>" class="check-box"></label>
<span class="sel-track-name"><%=track_locatorName%></span>
<span class="pro-bar" style="width: 90px;background-color:<%=showColor%>">
<span class="bar"></span>
</span>
<span class="process play" title="回放轨迹" data-id="517118819">
<i class="fa fa-play"></i>
</span>
</script>
<script type="text/html" id="locatorList-tmpl">
<input type="text" placeholder="请输入关键字" id="searchKey">
<span class="search-i">
<i class="fa fa-search"></i>
</span>
<a href="javascript:void(0)" class="btn online">在线</a>
<a href="javascript:void(0)" class="btn filter">已选</a>
<a href="javascript:void(0)" class="btn clean">所有</a>
<div id="tracklist-panel">
<ul class="tracks-ul" id="locatorList">
</ul>
</div>
<ul id="tracks-pager-ul" class="pagination"></ul>
</script>
<script type="text/html" id="trackList-tmpl">
<div class="date-panel">
<span>
<input type="checkbox" id="cbxDateSelectType">
<label id="lblDateSelectType" for="cbxDateSelectType" class="check-box" style=" margin-top: 12px; margin-right: 10px;"></label>
<span>日期范围</span>
</span>
<div class="date" id="div_date1">
<span class="date-title" id="date"></span>
<span class="sele"><i class="fa fa-sort-desc"></i></span>
</div>
</div>
<div class="date-panel" id="date-panel2" style="display: none;">
<span style=" margin-left: 65px;">到</span>
<div class="date" id="div_date2">
<span class="date-title" id="date">2016-09-20</span>
<span class="sele"><i class="fa fa-sort-desc"></i></span>
</div>
</div>
<input type="text" placeholder="请输入关键字" id="searchKey_2">
<span class="search-i">
<i class="fa fa-search"></i>
</span>
<a href="javascript:void(0)" class="btn filter">已选</a>
<a href="javascript:void(0)" class="btn clean">所有</a>
<div class="tracks-panel" id="tracks-panel">
<ul class="seled-tracks-ul" id="trackList">
</ul>
</div>
<ul id="tracks-pager-ul-2" class="pagination"></ul>
</script>
</head>
<body>
<div id="mapContainer">
</div>
<div id="header">
</div>
<div id="data-box" data-toggle="off" >
<div class="panel-mask">
<img src="static/images/loading-1.gif" height="82" width="82">
</div>
<div class="panel" id="locator-box">
</div>
<div id="track-box" >
</div>
<div class="tip">
</div>
</div>
<div class="map-ctrl zoom-out" title="地图放大">
<span><i class="fa fa-plus-circle"></i></span>
</div>
<div class="map-ctrl zoom-in" title="地图缩小">
<span><i class="fa fa-minus-circle"></i></span>
</div>
<script type="text/javascript">
var map = new BMap.Map("mapContainer", {
// 关闭底图可点功能
enableMapClick: false
});
function mapInit() {
var point = new BMap.Point(113.624247, 34.75387);
map.centerAndZoom(point, 12);
}
mapInit();
// 设置酷黑个性化地图
map.setMapStyle({
styleJson: [{
featureType: "land",
elementType: "geometry",
stylers: {
color: "#212121"
}
}, {
featureType: "building",
elementType: "geometry",
stylers: {
color: "#2b2b2b"
}
}, {
featureType: "highway",
elementType: "all",
stylers: {
lightness: -42,
saturation: -91
}
}, {
featureType: "arterial",
elementType: "geometry",
stylers: {
lightness: -77,
saturation: -94
}
}, {
featureType: "green",
elementType: "geometry",
stylers: {
color: "#1b1b1b"
}
}, {
featureType: "water",
elementType: "geometry",
stylers: {
color: "#181818"
}
}, {
featureType: "subway",
elementType: "geometry.stroke",
stylers: {
color: "#181818"
}
}, {
featureType: "railway",
elementType: "geometry",
stylers: {
lightness: -52,
visibility: "off"
}
}, {
featureType: "railway",
elementType: "all",
stylers: {
visibility: "off"
}
}, {
featureType: "subway",
elementType: "all",
stylers: {
visibility: "off"
}
}, {
featureType: "all",
elementType: "labels.text.stroke",
stylers: {
color: "#313131"
}
}, {
featureType: "all",
elementType: "labels.text.fill",
stylers: {
color: "#8b8787"
}
}, {
featureType: "manmade",
elementType: "geometry",
stylers: {
color: "#1b1b1b"
}
}, {
featureType: "local",
elementType: "geometry",
stylers: {
lightness: -75,
saturation: -91
}
}, {
featureType: "subway",
elementType: "geometry",
stylers: {
lightness: -65
}
}, {
featureType: "railway",
elementType: "all",
stylers: {
lightness: -40
}
}, {
featureType: "poi",
elementType: "all",
stylers: {
visibility: "off"
}
}, {
featureType: "highway",
elementType: "labels.icon",
stylers: {
visibility: "off"
}
}]
});
// 设置个性化地图 最大缩放级别 18
map.setMaxZoom(18);
map.enableScrollWheelZoom();
$('.map-ctrl.zoom-out').click(function(){map.zoomIn();});
$('.map-ctrl.zoom-in').click(function(){map.zoomOut();});
</script>
<script src="static/js/TrackMVC.js"></script>
<script src="static/js/TrackMVC.Locators.js"></script>
<script src="static/js/TrackMVC.Tracks.js"></script>
<script src="static/js/TrackMVC.Layout.js"></script>
<script src="static/js/TrackMVC.MapLocators.js"></script>
<script src="static/js/TrackMVC.MapTracks.js"></script>
<script src="static/js/TrackMVC.LocatorList.Views.js"></script>
<script src="static/js/TrackMVC.TrackList.Views.js"></script>
<script src="static/js/TrackMVC.LocatorTrackList.js"></script>
<script>
$(function(){
// Start the TrackMVC app (defined in js/TrackMVC.js)
TrackMVC.start();
});
</script>
</body>
</html>
下文将介绍本平台如何使用backbone框架开发各模块功能的js代码
