基於百度地圖SDK和Elasticsearch GEO查詢的地理圍欄分析系統（3）-前端實現
轉載自：http://www.cnblogs.com/Auyuer/p/8086975.htmljavascript
MoonLight可視化訂單需求區域分析系統實現功能：css
在現實生活中，計算機和互聯網迅速發展，人們愈來愈趨向於網絡，因而咱們就有了各類各樣的系統，來幫助咱們更好地生活。好比對於打車來講，咱們也能夠經過網上叫車，那麼咱們就會產生大量的用戶訂單，特別是對於一些固定時間、固定地點，叫車用戶的訂單量會很是大，那麼咱們一樣也要很好的管理這些訂單。那麼咱們便要採起某些策略來統計分析，好比咱們可使用區域化的管理方式，根據ES中的數據進行圈選定位，將所圈選出的部分訂單再進行處理統計信息。那麼爲了可以更好地看到這些分析結果，咱們對此提出了可視化的訂單管理系統，結合ES索引，即可完成訂單的可視化數據分析。html
實現步驟：前端
爲了安全將全部數據以及url接口隱去java
- 首頁展現以下圖所示：
- 因爲咱們要在地圖上作必定區域的圈選操做，首先咱們應該引入百度地圖：
代碼以下：json
- 首先百度地圖有本身的API註冊祕鑰，使用以前登陸官方網站自行申請便可
- 引入百度地圖API註冊祕鑰、加載鼠標繪製工具、加載檢索信息窗口、加載熱力圖圖層等所須要的js （可查看百度地圖官網）
1 <!-- 百度地圖api註冊祕鑰 --> 2 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= "></script> 3 <!-- 加載鼠標繪製工具 --> 4 <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> 5 <!-- 加載檢索信息窗口 --> 6 <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script> 7 <!-- 加載熱力圖圖層 --> 8 <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
- 相關js代碼以下：
1 var map = new BMap.Map('map_canvas');// 建立地圖實例 2 var point = new BMap.Point(116.404, 39.915); // 天安門 3 map.centerAndZoom(point, 12);// 初始化地圖，設置中心點座標和地圖級別 4 map.enableScrollWheelZoom();// 容許drawingManager.open()滾輪縮放 -
建立地圖實例，設置地圖中心位置，在這裏咱們以天安門爲中心canvas
- 同時咱們容許鼠標滾輪縮放
- 頁面繪製功能
首頁左邊欄爲繪製功能區域以及熱力圖的開啓關閉控制按鈕區域：後端
繪製功能包括以下：畫點、畫圓、畫折線、畫多邊形、畫矩形，相應的控制右上角的繪製功能api
熱力圖的開啓和關閉：第一次點擊時向後臺發送請求，關閉按鈕爲紅色，開啓按鈕爲綠色，熱力圖主要分佈於北京市安全
- 圈選操做
圈選操做因爲主要有圓形圈選、矩形圈選、多邊形圈選和折線圈選幾種狀況，那麼對此咱們應該分狀況討論：
代碼以下：
1 var overlays = [];
2 //回調得到覆蓋物信息 overlay是覆蓋物的抽象基類
3 var overlaycomplete = function(e) {
4 overlays.push(e.overlay);
5 var result = "";
6 result = "<p>";
7 result += e.drawingMode + ":";
8 if (e.drawingMode == BMAP_DRAWING_MARKER) {
9 result += ' 座標：' + e.overlay.getPosition().lng + ',' + e.overlay.getPosition().lat;
10
11 //getPosition() 獲取標籤的經緯度座標 lng lat
12 if ($('isInfowindow').checked) {
13 searchInfoWindow.open(e.overlay);
14 }
15 }
16 if (e.drawingMode == BMAP_DRAWING_CIRCLE) {
//圓形圈選，得到經緯度和半徑 ， 而後拼接到跳轉向圖標展現頁面的url後面, 如 url_toPic所示，便可實現不一樣頁面之間的參數傳遞
17 result += ' 半徑：' + e.overlay.getRadius(); 18 result += ' 中心點：' + e.overlay.getCenter().lng + "," + e.overlay.getCenter().lat; 19 var circle_r = e.overlay.getRadius(); 20 var circle_lng = e.overlay.getCenter().lng; 21 var circle_lat = e.overlay.getCenter().lat; 22 var url_toPic = "url?point=" + circle_lat + "," + circle_lng + "&radius=" + circle_r; 23 24 /* 向後臺發送post請求 地理圍欄數據*/ 25 // 圈選以後會自動跳出一個彈窗，用於能夠自行保存相應的數據，自行設置名稱和分組，而地理圍欄geo和類型則是根據用戶全選狀況而自動添加。
26 // jQuery("#fence_name").val(name);
27 jQuery("#geo_data").css({
28 "display":"block"
29 }); //彈窗顯示
30 /*中間層*/
31 jQuery("#cover").css({
32 "display":"block"
33 }); //中間禁止點擊層顯示
34 var fence_circle_data;
35 fence_circle_data='{"circle":"'+circle_r+'","circle_lat":"'+circle_lat+'","circle_lng":"'+circle_lng+'"}';
36 //地理圍欄geo數據拼接和填充
37 jQuery("#fence_geo").val(fence_circle_data);
38 /*圓形1*/
39 40 jQuery("#fence_type").val("1");
41
42 //當點擊彈窗的保存按鈕時，則會將這次圈選信息保存起來，並存儲在地理圍欄中，方便後續查詢，而後自動跳轉到圖表展現頁面，圖表展現頁面主要是對訂單量、日盈裏和取消率的數據的具體展現
43 //從中，咱們可以看到整個月份的訂單量、日盈裏和取消率的折線趨向，同時下方表格中也將所展現的具體數據填入。若是在彈窗頁面出現時，用戶沒有填入名稱和分組，那麼咱們就會給其名稱設定爲當前的時間戳加上三位隨機數，而默認分組設爲default。
44 jQuery("#btn_yes").click(function(){
45 /*獲取當前時間戳*/
46 var data_time = new Date().getTime();
47 /*獲取0-1000之間的隨機數*/
48 var data_random = Math.ceil(Math.random()*1000);
49 /*拼接默認彈窗名稱*/
50 var name = "fence-"+data_time+data_random;
51 /*控制name group的默認傳參*/
52 var name_send;
53 var group_send ;
54 56 if(jQuery("#fence_name").val() != ""){
57 name_send = jQuery("#fence_name").val();
58 }else{
59 name_send = name;
60 };
61 if(jQuery("#fence_group").val() != ""){
62 group_send = jQuery("#fence_group").val();
63 }else{
64 group_send = "default";
65 }
66
67
68 var post_data =new Object;
69 post_data.name=name_send;
70 post_data.group=group_send;
71 post_data.type=jQuery("#fence_type").val();
72 post_data.geo=jQuery("#fence_geo").val();
73 var saveData = JSON.stringify(post_data);
74 75 send_post("url",saveData);
76 window.open(url_toPic,"_self");
77 }); //若是用戶點擊了取消按鈕沒有保存數據，那麼彈窗隱藏以後便會直接跳轉至圖表展現頁面而不會存儲本地圈選信息至地理圍欄數據中。
78 jQuery("#btn_no").click(function(){
79 jQuery("#geo_data").css({
80 "display":"none"
81 });
82 jQuery("#cover").css({
83 "display":"none"
84 });
85 window.open(url_toPic,"_self");
86 })
87 }
88
89 if (e.drawingMode == BMAP_DRAWING_POLYLINE || e.drawingMode == BMAP_DRAWING_POLYGON || e.drawingMode == BMAP_DRAWING_RECTANGLE) {
90 //在這裏爲折線、多邊形、矩形等多點圈選，將所畫出的點依次拼接到Url後面 方法同圓形圈選
91 166 });
167 176
177 }
178
179 };
- 保存地理圍欄數據彈窗：
- 圖表展現頁面爲echarts表格和折線圖 （爲了安全將實際數據隱去）
4.圖表展現頁面前端實現相關代碼以下：
1 //將所傳遞過來的url後的參數解析繪製圖表
2 /*獲取url參數*/
3 function getUrlParam(){
4 /*拿到url地址*/
5 var url=window.location.search;
6 /*截取?後的全部數據*/
7 var params = url.substring(url.indexOf("?")+1);
8 /*若是url中有弧度的數據*/
9 var str='radius';
10 var json_data;
11 /*獲取圓形圈選的經緯度和弧度*/
12 if(url.indexOf(str)!=-1){
13 var paramArr=params.split("&");
14 var param_first=paramArr[0].split("=");
15 var param_lng_lat=param_first[1].split(",");
16 var circle_lat = param_lng_lat[0];
17 var circle_lng = param_lng_lat[1];
18 var param_second = paramArr[1].split("=");
19 var circle_r = param_second[1];
20
21 /*請求後端接口*/
22 json_data=send_get("url?point=" + circle_lat + "," + circle_lng + "&radius=" + circle_r);
23 24 }else{
25 /*截取url中等號右邊的參數*/
26 var paramSqual=params.split("=");
27 var paramSqual_lng_lat;
28 var url_getSqual;
29 url_getSqual="url?";
30 /*參數列表爲用;分割開的經緯度數據*/
31 var paramSqual_Arr = paramSqual[1].split(";");
32 for(var i=0;i<paramSqual_Arr.length;i++){
33 paramSqual_lng_lat=paramSqual_Arr[i].split(",");
34 url_getSqual+="point"+i+"="+paramSqual_lng_lat[0]+','+paramSqual_lng_lat[1]+'&';
37 }
38 url_getSqual=url_getSqual.substring(0,url_getSqual.length-1);
39 json_data=send_get(url_getSqual);
40 41 }
相關圖表echarts代碼展現以下：
以訂單量爲例，其餘折線圖代碼相似。 具體使用方法建議查看Echarts官方網站
1 /*渲染圖表*/
2
3 /*日訂單量圖表展現區*/
4 var chartName_total = echarts.init(document.getElementById("chart_total"));
5 var adata_total=json_data.data;
6 var option_total = {
7 title: {
8 text: '訂單量分析'
9 },
10 tooltip: {
11 trigger: 'axis'
12 },
13 legend: {
14 data:['訂單量']
15 },
16 grid: {
17 left: '3%',
18 right: '4%',
19 bottom: '3%',
20 containLabel: true
21 },
22 toolbox: {
23 feature: {
24 saveAsImage: {}
25 }
26 },
27 xAxis: {
28 type: 'category',
29 boundaryGap: false,
30 data:adata_total["xAxis"]
31 },
32 yAxis: {
33 type: 'value'
34 },
35 series: [
36 {
37 name: '訂單數量',
38 type: 'line',
39 stack: '總量',
40 data: adata_total["total"]
41 }
42 ]
43 };
44 chartName_total.setOption(option_total);
表格中的數據展現代碼： 也可以使用其餘方式渲染
/*表格中的數據*/
var tableData =json_data.data.detail;
var tableSource="<table id='example' class='table table-striped table-bordered'>"
+ "<thead><tr><th>日期</th> <th>訂單總量</th> <th>日盈利</th> <th>取消率</th></tr></thead><tbody>";
for(var j=0;j<tableData.length;j++){
tableSource+="<tr><th style='font-weight:normal'>"
+tableData[j].date
+"</th><th style='font-weight:normal'>"
+tableData[j].total
+"</th><th style='font-weight:normal'>"
+tableData[j].profit
+"</th><th style='font-weight:normal'>"
+tableData[j].cancelRatio;
}
tableSource +="</tbody><tfoot><tr> <th>日期</th> <th>訂單總量</th> <th>日盈利</th> <th>取消率</th> </tr> </tfoot></table>";
$("#container").append(tableSource);
5.地理圍欄數據存儲頁面
全部被圈選的數據都會在這裏進行存儲，當咱們點擊查看按鈕時，則可再次查看相應地理圍欄信息數據的圖表展現，而點擊刪除而且確認刪除以後，則會直接將此條數據刪除。
查詢按鈕便可根據相應的條件篩選而取得符合條件的數據。
（1）查看和刪除按鈕的代碼以下：
1 //刪除和查看數據代碼
2 //點擊刪除按鈕時，將該行數據刪除，而且調用後端接口，刪除後端數據
3 function delete_data(){
4 $(".btn_delete").click(function(){
5 if(confirm("是否確認刪除？")){
6 $(this).parents("tr").remove();
7 var delete_id=$(this).parents("tr").children("th.delete_id").text(); //先找到父元素，再找父元素中須要的子元素
8 var url_delete;
9 url_delete="url?id=";
10 url_delete+=delete_id;
11 var delete_data=send_get(url_delete);
12 alert(delete_data.message);
13 }else{
14 return false;
15 }
16 });
17
18 //點擊查看按鈕時，將url拼接對應經緯度數據等，而後跳轉到圖表展現頁面而且進行利用所傳遞的參數進行圖表繪製，圓形圈選須要的是中心點和半徑，而其餘都是將各個點的經緯度依次拼接便可。
19 $(".btn_look").click(function(){
20 var jsonStr=$(this).parents("tr").children("th.tabData_geo").text();
21 console.log($(this).parents("tr").children("th.tabData_geo").text());
22 var json=$.parseJSON(String(jsonStr));
23 console.log(json);
24 var look_url;
25 var num=0;
26 var jsonType=$(this).parents("tr").children("th#fence_type").text();
27 if(jsonType == "環形") {
28 look_url= "url?point=" + json.circle_lat + "," + json.circle_lng + "&radius=" + json.circle;
29 window.open(look_url,"_self")
30 }else {
31 look_url= "url?point=";
32 for(var i=0;i<json.length;i++){
33 for(var j in json[i]) {
34 num++;
35 look_url+=json[i][j];
36 if(num%2==0) {
37 look_url+=";";
38 }else {
39 look_url+=",";
40 }
41 }
42 } //根據本身的須要拼接字符串url
43 look_url=look_url.substring(0,look_url.length-1);
44 window.open(look_url , "_self")
45 }
46 });
47 }
（2）表格繪製部分代碼：
1 //該表格繪製部分分爲不一樣狀況，好比咱們剛一打開頁面時，
2 //要向後端默認傳遞頁碼爲1，而所拿到的數據是所有數據。
3 //而當咱們點擊了查詢按鈕以後，所拿到的數據多少又會發生變化
4 //向後端傳遞的字段爲page_json ,代碼中便可看到具體的內容
5 function tabData_show(){
6
7 var json_data;
8 var page_json = {
9 "name": null,
10 "group": null,
11 "type": null,
12 "startTime": null,
13 "endTime": null,
14 "pageSize": 10||null,
15 "pageNum": 1||null
16 };
17 page_json = JSON.stringify(page_json);
18 json_data = send_post("url",page_json);
19 var tabData = json_data.data.data;
20
21 var totle_Page = Math.ceil(json_data.data.total/10);
22 var now_Page = json_data.data.nowPage;
23 var page_Limit = Math.min(9 , totle_Page);
24 //nowPage=now_Page;
25 //maxPage=totle_Page;
26 page(now_Page,totle_Page , page_Limit);
27 /*地理圍欄表格*/
28 ……
29 //接下來根據數據自行渲染表格便可
}
（3）查詢部分代碼：
1 /*search按鈕點擊時的搜索功能*/
2 //查詢按鈕點擊的時候，沒有添加過濾條件時默認返回全部數據進行渲染
3 //而若是有過濾條件時則根據篩選條件返回相應的數據
4 $(".search").click(function () {
5 $("#page-item a.page-link").remove();
6 var search_type;
7 if($("#btn_search_type").val() == "環形") {
8 search_type = 1;
9 }else if($("#btn_search_type").val() == "矩形") {
10 search_type = 2;
11 }else{
12 search_type = 3;
13 }
14 var search_json = {
15 "name": $("#btn_search_name").val() || null,
16 "group": $("#btn_search_group").val() || null,
17 "type": search_type || null,
18 "startTime": $("#btn_search_start").val() || null,
19 "endTime": $("#btn_search_end").val() || null,
20 "pageSize": 10 || null,
21 "pageNum": 1 || null
22 };
23 search_json = JSON.stringify(search_json);
24
25 var data_Json = send_post("url", search_json);
26 var dataJson = data_Json.data.data;
27 var totle_search = Math.ceil(data_Json.data.total / 10);
28 var search_Page = data_Json.data.nowPage;
29 var search_Limit = Math.min(9, totle_search);
30 page(search_Page, totle_search, search_Limit);
31
32 //而後再根據新拿到的不一樣數據渲染表格
49 });
到此 地理圍欄的前端實現方法基本結束，後續不斷改進中。
相關文章
- 1. 基於百度地圖SDK和Elasticsearch GEO查詢的地理圍欄分析系統（2）-查詢實現
- 2. 基於百度地圖SDK和Elasticsearch GEO查詢的地理圍欄分析系統（1）-數據準備
- 3. 地理圍欄算法解析（Geo-fencing）
- 4. Android百度地圖(五):百度地圖鷹眼sdk監控進出地理圍欄(區域)
- 5. swift 百度地圖加載與百度地圖電子圍欄加載
- 6. android百度地圖開發——地圖sdk之基礎地圖
- 7. 百度地圖SDK地圖學習——實現定位功能
- 8. 百度地圖SDK使用
- 9. 使用百度地圖SDK
- 10. Xamarin.Android Binding-----百度地圖SDK
- 更多相關文章...
- • IP地址的格式和分類 - TCP/IP教程
- • 物理地址（MAC地址）是什麼？ - TCP/IP教程
- • ☆基於Java Instrument的Agent實現
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 基於百度地圖SDK和Elasticsearch GEO查詢的地理圍欄分析系統（2）-查詢實現
- 2. 基於百度地圖SDK和Elasticsearch GEO查詢的地理圍欄分析系統（1）-數據準備
- 3. 地理圍欄算法解析（Geo-fencing）
- 4. Android百度地圖(五):百度地圖鷹眼sdk監控進出地理圍欄(區域)
- 5. swift 百度地圖加載與百度地圖電子圍欄加載
- 6. android百度地圖開發——地圖sdk之基礎地圖
- 7. 百度地圖SDK地圖學習——實現定位功能
- 8. 百度地圖SDK使用
- 9. 使用百度地圖SDK
- 10. Xamarin.Android Binding-----百度地圖SDK