完整版openlayer的例子及中文註釋（完整中文版）
//@sourceURL=PersonLocation.jsvar window_temp = { onbeforeunload: null, DEBUG_MODE: false, MAPLIST: null, MAPLIST_CACHE: {}, MAP: null, MAP_LAYERS: null, LAYER: ['basic', 'area', 'device', 'person', 'single', 'building'], MAP_CTRLS: null, CTRLS: ['scale'], CURRID: null, FOCUSONCE: false, MAPINIT: false, MAPMODE: 0, HIGHLIGHT_LAYER: null, CURRMAP_DATA: null, CURRPERMAPID: null, SCALE: 0, UNIT: 0, HISTORY_LAYER: null, HISTORY_LAYER_CTL: null,};$(function () { window_temp.onbeforeunload = function (event) { cancelSocketHandler(); switchMapMode(0);// 還原到正常狀態 避免切換頁面後出問題 } initOlPlugin(); //window_temp.DEBUG_MODE = false; // 地圖列表 用於切換地圖使用 //window_temp.MAPLIST ; //window_temp.MAPLIST_CACHE={}; //window_temp.MAP;// 地圖變量 //window_temp.MAP_LAYERS;// 圖層變量 //window_temp.LAYER=['basic','area','device','person','single'];// 基礎 區域 設備 人員 // 圖層 //window_temp.MAP_CTRLS;// 控制層 //window_temp.CTRLS=['scale'];// 'fullscr''overview','measure','mapselect' //window_temp.CURRID;// 當前追蹤人員id //window_temp.FOCUSONCE = false; //window_temp.MAPINIT = false; // 0-正常模式 1-單人實時追蹤模式 2-歷史軌跡播放模式 //window_temp.MAPMODE = 0; switchMapMode(0);// 還原到正常狀態 避免切換頁面後出問題 // 註冊socket處理事件 initSocketHandler(); // 獲取地圖列表 initMapList(); initAllMapList(); //initBuildingAndChildMapList(); initSerchMapData(); loadMapData(null, true); //初始化隱藏tool initToolAndList(); //realdebugList(); //echart //initHighCharts(); //加x號 tool.searchInput('#searchIcon');});//進行人員和設備之間的的連線function initPersonConnectDevice(personData) { var datalist = personData.dataList if (datalist.length > 0) { for (var i = 0; i < datalist.length; i++) { if (datalist[i].id == window_temp.CURRID) { monitorPersonTrace(datalist[i]); } } }}function initDsss(dataList) { $('#realdebugList').bootstrapTable({ height: parseInt(getClientHeight() - 93), columns: [{ align: 'center', valign: 'middle', visible: false }, { field: 'fnSn', title: '信號源', align: 'center', valign: 'middle', }, { field: 'rssi', title: '信號強度', align: 'center', valign: 'middle', }, { field: 'areaType', title: '區域類型', align: 'center', valign: 'middle', }, { field: 'areaName', title: '區域名稱', align: 'center', valign: 'middle', }], data: dataList, clickToSelect: true, pagination: false, onClickRow: function (row, element) { var feature = window_temp.MAP_LAYERS['line'].getSource().getFeatureById(row.fnSn); feature.getStyle().getStroke().setColor("yellow"); feature.getStyle().getStroke().setWidth(5); window_temp.MAP_LAYERS['line'].changed(); } });}function initToolAndList() { $('.ol-control.layertool').hide(); $('.ol-control.person').hide();}//右側輸入框顯示查詢列表function realdebugList(data) { if (data && data.rssis.length > 0) { var dataList = []; if (realdebugList != null || data != undefined) { var deviesId = data.id; var happenTime = data.happenTime; $('#devisId').text(deviesId); $('#happenTime').text(happenTime); dataList = data.rssis; } initDsss(dataList); }}//echartvar chartObj;var xMaxTime = 10000;var maxSizePoint = 20;function putDataToCharts(data) { if (data && data.rssis.length > 0) { var x = (new Date(data.happenTime)).getTime(); var chartSeries = chartObj.series; for (var i = 0; i < chartSeries.length; i++) { if (chartSeries[i].data[chartSeries[i].data.length - 1].x >= x) { return; } for (var j = 0; j < data.rssis.length; j++) { if (chartSeries[i].name == data.rssis[j].fnSn) { chartSeries[i].addPoint([x, data.rssis[j].rssi], false, true); break; } } if (chartSeries[i].data.length > 0 && (chartSeries[i].data[chartSeries[i].data.length - 1].x + xMaxTime < x)) { chartSeries[i].remove(); i = i - 1; } } for (var i = 0; i < data.rssis.length; i++) { find = false; for (var j = 0; j < chartSeries.length; j++) { if (data.rssis[i].fnSn == chartSeries[j].name) { find = true; break; } } if (find == false) { addSeries(x, data.rssis[i]); } } chartObj.redraw(); }}function addSeries(x, series) { chartObj.addSeries({ name: series.fnSn, data: (function() { // generate an array of random data var data3 = []; for (var i = -1*(maxSizePoint -1); i < 0; i++) { data3.push({ x: x + i * 1000, y: null }); } data3.push({ x:x, y:series.rssi }); return data3; })() });}function initHighCharts() { Highcharts.setOptions({ global: { useUTC: false } }); $('#container').highcharts({ chart: { type: 'line', animation: Highcharts.svg, // don't animate in old IE events: { load: function () { chartObj = this; } } }, title: { text: '移動設備RSSI動態走勢圖' }, xAxis: { type: 'datetime', tickPixelInterval: 100 }, yAxis: { title: { text: 'RSSI信號強度(DBM)' }, opposite: true, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 0); } }, legend: { enabled: true }, exporting: { enabled: false }, credits: { enabled: false } }); //chartObj.setSize($("#container").width(), getHeight());}//function getHeight() {// return $(window).height() - $('h1').outerHeight(true) - 300;//}function initOlPlugin() { /** * 圖層控制控件 */ ol.control.layerTool = function (opt) { var options = opt || {}; var me = this; me.closeClass = "unshow"; me.layer = opt.layer;// me.element_ = goog.dom.createDom('DIV','layertool ol-unselectable ol-control tool' ); me.element_ = document.createElement('div'); me.element_.className = 'layertool ol-unselectable ol-control tool'; me.remove = function () { $(me.element_).remove(); } ol.control.Control.call(me, { element: me.element_, target: options.target }); me.display = function (show) { if (show) { $(me.element_).find("button").removeClass(me.closeClass); me.layer.setVisible(true); } else { $(me.element_).find("button").addClass(me.closeClass); me.layer.setVisible(false); window_temp.MAP.removeOverlay(); } } }; ol.inherits(ol.control.layerTool, ol.control.Control); /* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 地圖切換工具↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */ ol.control.mapSelectTool = function (opt_options) { var options = opt_options || {}; var ele = document.createElement("div"); ele.className = "mapselectbutton"; ele.id = "mapselectbutton"; ele.title = ''; this.changeName = function (name) { if (window_temp.MAPLIST && window_temp.MAPLIST.length > 1) { $(ele).html(name + " <i class='glyphicon glyphicon-menu-down' style='margin-left:20px;'></i>") .attr("title", name); $("#mapquickSearch").val(""); $("#currentMapName").text(name); } else { $(ele).html(name).attr("title", name); } } $(ele).on('click', function () { if ($('#mapselect').is(":hidden")) { $('#mapselect').slideDown({speed: 'fast'}); $('#showMap').show(); $(".hisqueclose").on('click', function () { $(ele).click(); });//綁定關閉按鈕事件 } else { $('#mapselect').slideUp({speed: 'fast'}); $('#showMap').hide(); } }); $(ele).on('blur', function () { $('#mapselect').slideUp(); }); //var element = goog.dom.createDom('DIV','mapselecttool ol-unselectable' ,[ele]); var element = document.createElement('div'); element.className = 'mapselecttool ol-unselectable'; element.appendChild(ele); this.reelementmove = function () { $(element).remove(); } ol.control.Control.call(this, { element: element, target: options.target }); }; ol.inherits(ol.control.mapSelectTool, ol.control.Control);}// 模式切換處理函數function switchMapMode(mode) { var keyMode; keyMode = window_temp.MAPMODE * 10 + mode * 1; switch (keyMode) { case 0:// 正常模式 到正常模式 hidePopup(); hidePopup('areapopup'); if (window_temp.HIGHLIGHT_LAYER) {// 高亮圖層初始化 window_temp.HIGHLIGHT_LAYER.unlight(); } break; case 1:// 正常模式 進單人追蹤模式 //window_temp.MAP_LAYERS['person'].display(true); window_temp.FOCUSONCE = true; if (window_temp.HIGHLIGHT_LAYER) {// 高亮圖層初始化 window_temp.HIGHLIGHT_LAYER.unlight(); } break; case 11:// 切換追蹤 window_temp.FOCUSONCE = true; if (window_temp.HIGHLIGHT_LAYER) {// 高亮圖層初始化 window_temp.HIGHLIGHT_LAYER.unlight(); } break; case 10:// 單人追蹤 返回正常模式 window_temp.MAP_LAYERS['single'].layer.getSource().getSource().clear(); window_temp.CURRID = null; hidePopup(); // pullEvent('{type:1010}'); if (window_temp.HIGHLIGHT_LAYER) {// 高亮圖層初始化 window_temp.HIGHLIGHT_LAYER.unlight(); } break; case 2:// 正常模式進 軌跡播放模式 // pullEvent('{type:1002}'); break; case 20:// 軌跡播放 返回正常模式 // pullEvent('{type:1001,param:'+$("#currentMapId").val()+'}');//' // '{type:10012}' break; } window_temp.MAPMODE = mode;}/** * 單我的員追蹤 */var datamapidfunction monitorPersonTrace(data) { datamapid=data.mapId var currMapId = $('#currentMapId').val(); if(data.mapId !=currMapId){ //window_temp.MAP_LAYERS['line'].getSource().clear(); switchMap(data.mapId); $('#showEchartAndList').show() $('.searchClear').show() } window_temp.MAP_LAYERS['line'].getSource().clear(); var rersonDaX = data.x; var rersonDaY = data.y; var deviceData = data.rssis; //畫人員 var pointfeature = new ol.Feature(new ol.geom.Point([rersonDaX, rersonDaY])); pointfeature.setStyle( new ol.style.Style({ image: new ol.style.Circle({ radius: 4, stroke: new ol.style.Stroke({ color: '#fff' }), fill: new ol.style.Fill({ color: '#12ff02' }) }) }) ) window_temp.MAP_LAYERS['line'].getSource().addFeature(pointfeature); //定義數組：不一樣信號強度顯示不一樣的顏色 function getStyleByLevel(rssi) { var colors = ["#00FF00", "#FFFF00", "#FF0000", "#0000EE"];//高 中 低 默認 var range = [-100, -50, 50, 100];//,-40,-20,0,20]; var ind = _.findIndex(range, function (item) { return rssi <= item; }); if (ind == -1) { ind = 0; } //var width = Math.abs((100 + rssi)) / 25; return new ol.style.Style({ stroke: new ol.style.Stroke({color: colors[ind], width: 3}), text: new ol.style.Text({ text: rssi + "", stroke: new ol.style.Stroke({width: 1, color: 'rgba(255, 255, 255, 1)'}), font: "16px sans-serif", fill: new ol.style.Fill({color: 'rgba(255, 255, 255, 1)'}), stroke: new ol.style.Stroke({ color: "#fff", width: 3 }), }) }); } //循環劃線 for (var i = 0; i < deviceData.length; i++) { var feature = new ol.Feature({ geometry: new ol.geom.LineString([[deviceData[i].longitude, deviceData[i].latitude], [rersonDaX, rersonDaY]]) }); feature.set('featureType', 'line'); var rssiArr = []; rssiArr.push(data.rssis[i].rssi) feature.setStyle(getStyleByLevel(rssiArr)) feature.setId(data.rssis[i].fnSn); //var lineName = data.rssis[i].rssi; //feature.set('lineName', lineName); window_temp.MAP_LAYERS['line'].getSource().addFeature(feature); } realdebugList(data); putDataToCharts(data);}/** * 處理後臺推送消息 人員定位信息 */function monitorPositionData(data) { if (window_temp.MAPMODE == 1) { if (data.id == window_temp.CURRID) { monitorPersonTrace(data); } } if (!$(".layertool.person>button").hasClass("unshow")) {// 未隱藏 if (data && data.mapId == $("#currentMapId").val() && window_temp.MAP_LAYERS && window_temp.MAP_LAYERS['person']) { var feature = window_temp.MAP_LAYERS['person'].layer.getSource().getSource().getFeatureById(data.id); if (feature) { window_temp.MAP_LAYERS['person'].layer.getSource().getSource().removeFeature(feature); } if (data.locationType == 2) { return; } var person = new ol.Feature(new ol.geom.Point([data.x, data.y])); person.setId(data.id); // person.setStyle(new ol.style.Style({image:new // ol.style.Icon({src:'../../../resources/image/phone_online.png'})})); person.setProperties(data); window_temp.MAP_LAYERS['person'].layer.getSource().getSource().addFeature(person); } }}function clearPositionData(data) { if (data && data.mapId == $("#currentMapId").val()) { // 清除人員圖層 if (window_temp.MAP_LAYERS && window_temp.MAP_LAYERS['person']) { var feature = window_temp.MAP_LAYERS['person'].layer.getSource().getSource().getFeatureById(data.id); if (feature) { window_temp.MAP_LAYERS['person'].layer.getSource().getSource().removeFeature(feature); } } // 清除單人跟蹤圖層 if (data.id == window_temp.CURRID) { data.status = -1; monitorPersonTrace(data); } }}function mapStaticsInfo(data) { if (data[$("#currentMapId").val()]) { monitorTotalInfo(data[$("#currentMapId").val()].type); mapAreaStaticsInfo(data[$("#currentMapId").val()].area); }}/** * 處理後臺推送消息 統計信息 */function monitorTotalInfo(data) { if (data) { $(".statistic .all").html(data.all.length).data("persons", data.all); $(".statistic .normalArea").html(data.normalArea.length).data("persons", data.normalArea); $(".statistic .powerArea").html(data.powerArea.length).data("persons", data.powerArea); $(".statistic .restrictArea").html(data.restrictArea.length).data("persons", data.restrictArea); }}/** * 區域人數統計實時響應函數 */function mapAreaStaticsInfo(data) { if (window_temp.MAPMODE == 2) {// 歷史軌跡播放 } else { if (data) {// 區域統計信息 for (var key in data) { var feature = getFeatureById('area', key); //$(".statistic").data(key,data[key]); if (feature) {// 存在指定的區域 var zoom = window_temp.MAP.getView().getZoom();// window_temp.MAP.get("suitzoom") var disptxt = ''; // if( zoom >= window_temp.MAP.get("suitzoom")){ if (data[key]) { disptxt = data[key].length + "人"; } else { disptxt = "0人"; } // } feature.set('person', data[key]); feature.getStyle().getText().text_ = disptxt; } } if (window_temp.MAP_LAYERS && window_temp.MAP_LAYERS['area']) { window_temp.MAP_LAYERS['area'].layer.changed();// 刷新區域圖層 } } }}/** * 建築人數統計實時響應函數 */function buildingInfo(data) { if (window_temp.MAPMODE == 2) {// 歷史軌跡播放 } else { if (data && data[$("#currentMapId").val()]) {// 建築統計信息 var buildingData = data[$("#currentMapId").val()]; for (var key in buildingData) { var feature = getFeatureById('building', key); //$(".statistic").data(key,data[key]); if (feature) {// 存在指定的區域 var zoom = window_temp.MAP.getView().getZoom();// window_temp.MAP.get("suitzoom") var disptxt = ''; if (zoom >= window_temp.MAP.get("suitzoom")) { if (buildingData[key]) { var buildMapData = buildingData[key]; var total = 0; for (var ky in buildMapData) { total = total + buildMapData[ky].count; } disptxt = total + "人"; } else { disptxt = "0人"; } } feature.set('building', buildingData[key]); //feature.getStyle().getText().text_ = disptxt; } } if (window_temp.MAP_LAYERS && window_temp.MAP_LAYERS['building']) { window_temp.MAP_LAYERS['building'].layer.changed();// 刷新區域圖層 } } }}/** * 高亮元素 */var highLightLayer = function (opts) { var me = this; me.intval; me.featureStyle; me.opts_ = opts || {}; me.switchFlag = false; me.style = me.opts_.style; me.source = new ol.source.Vector({wrapX: false}); me.currid; me.currFeature; me.lightStyle = { 'stroke': '#FFFFFF', 'fill': 'rgba(255,255,255,0.4)' } me.layer = new ol.layer.Vector({// 圖層引用 source: me.source }); me.highLightFeature = function (feature, id, speed) { if (me.currid != id) { me.unlight(); me.currid = id; } else { if (me.intval) { return; } } if (feature) { me.currFeature = feature; me.featureStyle = {} me.featureStyle['stroke'] = me.currFeature.getStyle().getStroke().getColor(); if (me.currFeature.getStyle().getFill()) { me.featureStyle['fill'] = me.currFeature.getStyle().getFill().getColor(); } me.layer.setVisible(true); me.intval = setInterval(function () { me.layer.getSource().clear(); if (me.switchFlag = !me.switchFlag) { me.currFeature.getStyle().getStroke().setColor(me.lightStyle['stroke']); if (me.currFeature.getStyle().getFill()) me.currFeature.getStyle().getFill().setColor(me.lightStyle['fill']); } else { me.currFeature.getStyle().getStroke().setColor(me.featureStyle['stroke']); if (me.currFeature.getStyle().getFill()) me.currFeature.getStyle().getFill().setColor(me.featureStyle['fill']); } me.layer.getSource().addFeatures([me.currFeature]); }, speed || 200); } } me.unlight = function () { if (me.currFeature) { me.currFeature.getStyle().getStroke().setColor(me.featureStyle['stroke']); if (me.currFeature.getStyle().getFill()) me.currFeature.getStyle().getFill().setColor(me.featureStyle['fill']); } me.currFeature = null; me.featureStyle = null; me.layer.setVisible(false); me.layer.getSource().clear(); me.switchFlag = false; clearInterval(me.intval); me.intval = null; }}/** * 高亮顯示區域 */function highlight(type, id, speed) { if (!window_temp.HIGHLIGHT_LAYER) { window_temp.HIGHLIGHT_LAYER = new highLightLayer(); window_temp.MAP.addLayer(window_temp.HIGHLIGHT_LAYER.layer); } if (id) { var feature = getFeatureById(type, id); if (feature) { window_temp.HIGHLIGHT_LAYER.highLightFeature(feature, id, speed); if (window_temp.FOCUSONCE) { window_temp.FOCUSONCE = !window_temp.FOCUSONCE; focusTo(feature.getGeometry().getFirstCoordinate(), -1); } } else { window_temp.HIGHLIGHT_LAYER.unlight(); } } else { window_temp.HIGHLIGHT_LAYER.unlight(); }}/** * 獲取指定圖層 指定id元素 layer 包括緩存的 area-設備圖層 person-人員定位圖層 device-設備圖層 basic-基礎圖層 * val查詢值 key查詢鍵 返回openlayer 對象feature */function getFeatureById(layer, val, key) { if (window_temp.MAP_LAYERS && window_temp.MAP_LAYERS[layer]) { var features = window_temp.MAP_LAYERS[layer].layer.getSource().getFeatures(); if (!val) { return features; } else { for (var i in features) { if (features[i].get(key || "id") == val) { return features[i]; } else if (layer == 'person' && features[i].get("features")) { var subFeatures = features[i].get("features"); for (var k in subFeatures) { if (subFeatures[k].get(key || "id") == val) { return subFeatures[k]; } } } } } }}/** * 獲取地圖列表 */function initMapList() { $.ajax({ url: getBaseURL() + 'personlocation/findAllMap', async: false, // 同步 type: 'GET', // 請求類型 cache: false, // 不緩存 dataType: 'json', success: function (data) { if (data && data.length > 0) { window_temp.MAPLIST = data; var html = ''; var mapid, mapname; var currentMapId = $("#currentMapId").val(); if (currentMapId && currentMapId != '' && currentMapId != 'null') {// 頁面初始化指定顯示mapid mapid = currentMapId; } else {// 未指定限制默認列表第一個地圖 mapid = data[0].id; mapname = data[0].name; $("#currentMapId").val(mapid); } for (var i in data) { if (data[i].id && data[i].id == mapid) { mapname = data[i].name; $("#currentMapName").text(mapname); } html += '<li class="selectmap " title="' + data[i].name + '" onclick="switchMap(\'' + data[i].id + '\',\'' + data[i].name + '\')">' + data[i].name + ' </li>'; } $('#maplist').html(html); } else { /*BootstrapDialog.show({title: '系統提示',message: '未發現可加載的地圖數據', buttons: [{ label: '肯定', action: function(dialogItself){ dialogItself.close(); } }]});*/ showInfo("未發現可加載的地圖數據!", null, null); } }, error: function (e) { /*BootstrapDialog.show({title: '系統提示',message: '數據加載異常', buttons: [{ label: '肯定', action: function(dialogItself){ dialogItself.close(); } }]});*/ showInfo("數據加載異常!", null, null); } }); // initMapSelect();}/** * 獲取地圖列表 */function initAllMapList() { $.ajax({ url: getBaseURL() + 'personlocation/findAlldMapAndFirstWord', async: false, // 同步 type: 'GET', // 請求類型 cache: false, // 不緩存 dataType: 'json', success: function (data) { if (data.message) { var firstWordList = data.firstWordList; var mapList = data.mapList; //拼接地圖首字 if (firstWordList && firstWordList.length > 0) { var firsthtml = ''; for (var i in firstWordList) { firsthtml += '<a style="PADDING-BOTTOM: 1px; MARGIN: 4px 4px;display: inline-block;" href="javascript:scrollToLocation(\'' + firstWordList[i].toLocaleUpperCase() + '\')">' + firstWordList[i].toLocaleUpperCase() + '</a>'; } $('#firstWord').html(firsthtml); } //拼接地圖列表 if (mapList && mapList.length > 0) { var maphtml = '<table>'; var lastFirstWord = ''; var lastBuildName = ''; for (var j in mapList) { if (mapList[j].name.slice(0, 1).toLocaleUpperCase() != lastFirstWord) { lastFirstWord = mapList[j].name.slice(0, 1).toLocaleUpperCase(); lastBuildName = mapList[j].name; if (maphtml != '<table>') { maphtml += "</td></tr>"; } maphtml += "<tr><td style='vertical-align: top; padding: 0 14px 0 7px; font-size: 15px;'>" + lastFirstWord + "</td>"; maphtml += "<td style='white-space: nowrap;vertical-align: top; padding-top: 3px; padding-right: 8px;'>" + mapList[j].name + ":</td><td style='padding-top: 3px; vertical-align: top;'>"; maphtml += getMapHrefHtml(mapList[j]); } else { if (mapList[j].name != lastBuildName) { lastBuildName = mapList[j].name; maphtml += "</td></tr>"; maphtml += "<tr><td style='vertical-align: top; padding: 0 14px 0 7px; font-size: 15px;'></td>"; maphtml += "<td style='white-space: nowrap;vertical-align: top; padding-top: 3px; padding-right: 8px;'>" + mapList[j].name + ":</td><td style='padding-top: 3px; vertical-align: top;'>"; maphtml += getMapHrefHtml(mapList[j]); } else { maphtml += getMapHrefHtml(mapList[j]); } } } if (maphtml != '<table>') { maphtml += "</td></tr></table>"; } else { maphtml += "</table>"; } $('#buildingMap').html(maphtml); } } }, error: function (e) { /*BootstrapDialog.show({title: '系統提示',message: '數據加載異常', buttons: [{ label: '肯定', action: function(dialogItself){ dialogItself.close(); } }]});*/ showInfo("數據加載異常!", null, null); } });}function getMapHrefHtml(map) { if (map.name) { return "<a style='line-height: 18px;display: inline-block;margin-right: 9px;' href='javascript:switchMap(" + map.id + ","" + map.name + "")' >" + map.name + "</a>"; } else { return ''; }}/** * 加載初始化指定地圖 */function loadMapData(mapid) { var mapid = mapid || $("#currentMapId").val(); if (!mapid || '' == mapid || 'null' == mapid) { // alert("未發現地圖數據!"); return false; } hidePopup('areapopup'); if (!window_temp.MAPLIST_CACHE[mapid]) { var loadFlag = false; // 請求全部地圖數據Map、LAYER、ELEMENT $.ajax({ url: getBaseURL() + 'personlocation/findMapData/' + mapid, async: false, // 同步 type: 'GET', // 請求類型 cache: false, // 不緩存 dataType: 'json', success: function (data) { // 解析數據 if (data && data.data) {// 經過緩存表取得的數據 data = data.data; } window_temp.CURRMAP_DATA = data; var currentMapName = data.map.name; $("#currentMapName").text(currentMapName); if (data && data['map'] && data['layer']) { initMap(data);// 初始化地圖 loadFlag = true; window_temp.MAPLIST_CACHE[mapid] = data; } else { /*BootstrapDialog.show({title: '系統提示',message: '地圖數據不存在或加載不完整', buttons: [{ label: '肯定', action: function(dialogItself){ dialogItself.close(); } }]});*/ showInfo("地圖數據不存在或加載不完整!", null, null); } }, error: function (e) { /*BootstrapDialog.show({title: '系統提示',message: '數據加載異常', buttons: [{ label: '肯定', action: function(dialogItself){ dialogItself.close(); } }]});*/ showInfo("數據加載異常!", null, null); window_temp.CURRMAP_DATA = null; } }); } else { initMap(window_temp.MAPLIST_CACHE[mapid]);// 初始化地圖 loadFlag = true; } return loadFlag;}function initMap(data) { mapData = data['map'];// 基本信息 layerData = data['layer'];// 圖層信息 fnsData = data['fns'];// 設備圖層的FN信息 -單拎出來了 buildingData = data['building']; // 初始化openlayer地圖 initOlMap(mapData); // 初始化業務圖層LAYER,ELEMENT // wxh initPersonLayer(); initSingleLayer(); initAreaLayer(layerData); initDeviceLayer(fnsData, mapData); initBuildingLayer(buildingData); //建立一個線圖層 var lineLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [] }) }); window_temp.MAP_LAYERS['line'] = lineLayer; lineLayer.setZIndex(6); window_temp.MAP.addLayer(lineLayer); // 初始化地圖控件 initMapTool(); // toolRefresh(); window_temp.MAP_CTRLS['mapselect'].changeName(mapData.name); if (window_temp.MAP_LAYERS['device'] != undefined) { window_temp.MAP_LAYERS['device'].display(false); } $(".ol-attribution").remove();}function initAreaLayer(layerData, map) { if (layerData && layerData.length > 0) { var pointLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [] }) }); window_temp.MAP.addLayer(pointLayer); for (var i = 0; i < layerData.length; i++) { var ele = layerData[i]; var areaFeature; if (ele.shapeType == "Circle") { var center = JSON.parse(ele.coordinate.split("@")[0]); var radius = ele.coordinate.split("@")[1] * 1; areaFeature = new ol.Feature({ geometry: new ol.geom.Circle(center, radius, "XY") }); } else { areaFeature = new ol.Feature({ geometry: new ol.geom.Polygon([JSON.parse(ele.coordinate)]) }); } areaFeature.setStyle(JDMapVar.getAreaStyle(ele.areaTypeId)); areaFeature.setProperties(ele); areaFeature.set('featureType', 'area'); pointLayer.getSource().addFeature(areaFeature); } var tool = addLayer(pointLayer, {name: "區域圖層"});// 將圖層顯示/隱藏熱歸入控制 window_temp.MAP.addControl(tool); } else { console.log("device data is null"); }}function initDeviceLayer(data, map) { //var lineArr = []; if (data && data.length > 0) { var deviceLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [] }) }); window_temp.MAP.addLayer(deviceLayer); for (var i in data) { var feature = new ol.Feature(new ol.geom.Point([data[i].longitude, data[i].latitude])); feature.setStyle( // new ol.style.Style({ image:new // ol.style.Icon({src:'../resources/image/FN_btn.png'}) }) function (resolution) { // var zoom = // window_temp.SPIRIT_CURROMAP.getMap().getView().getZoom();//window_temp.MAP.get("suitzoom") var zoom = window_temp.MAP.getView().getZoom();// window_temp.MAP.get("suitzoom") if (zoom >= window_temp.MAP.get("suitzoom")) {// window_temp.SPIRIT_CURROMAP.getMap().get("suitzoom")){ return [new ol.style.Style({image: new ol.style.Icon({src: getBaseURL() + 'resources/image/mic_station_btn.png'})})]; } else { return [new ol.style.Style({ image: new ol.style.Circle({ radius: 3, stroke: new ol.style.Stroke({color: '#fff'}), fill: new ol.style.Fill({color: '#00f'}) }) })]; } } ); feature.setProperties(data[i]); feature.set('featureType', 'device'); deviceLayer.getSource().addFeature(feature); // window_temp.SPIRIT_CURROMAP.getLayer('device').getSource().addFeature(feature); } //var feature1 = new ol.Feature({ // geometry:new ol.geom.LineString(lineArr) //}); //deviceLayer.getSource().addFeature(feature1); //var tool = addLayer(deviceLayer, {name: "設備圖層"});// 將圖層顯示/隱藏熱歸入控制 //window_temp.MAP.addControl(tool); }}function initBuildingLayer(data) { if (data && data.length > 0) { var buildingLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [] }) }); window_temp.MAP.addLayer(buildingLayer); for (var i in data) { var feature = new ol.Feature(new ol.geom.Point([data[i].mapX, data[i].mapY])); feature.setStyle(// new ol.style.Style({image:new ol.style.Icon({src:getBaseURL()+'resources/image/building.png'}),// text:new ol.style.Text({text:"0人", font: "16px sans-serif", stroke: new ol.style.Stroke({width: 1})})// }) function (resolution) { var zoom = window_temp.MAP.getView().getZoom();// window.MAP.get("suitzoom") if (zoom >= window_temp.MAP.get("suitzoom")) { return [new ol.style.Style({ image: new ol.style.Icon({src: getBaseURL() + 'resources/image/building.png'}), text: new ol.style.Text({ text: /*"0人"*/"", font: "16px sans-serif", stroke: new ol.style.Stroke({width: 1}) }) })]; } else { return [new ol.style.Style({ image: new ol.style.Circle({ radius: 5, stroke: new ol.style.Stroke({color: '#fff'}), fill: new ol.style.Fill({color: '#ff0000'}) }), text: new ol.style.Text({ text: "", font: "16px sans-serif" }) })]; } } ); feature.setProperties(data[i]); feature.set('featureType', 'building'); buildingLayer.getSource().addFeature(feature); // window_temp.SPIRIT_CURROMAP.getLayer('device').getSource().addFeature(feature); } var tool = addLayer(buildingLayer, {name: "建築圖層"});// 將圖層顯示/隱藏熱歸入控制 window_temp.MAP.addControl(tool); }}/** * 初始化地圖核心組件 */function initOlMap(mapdata) { var projection = new ol.proj.Projection({ code: 'EPSG:4326',// ||mapdata.code, extent: [mapdata.minX, mapdata.minY, mapdata.maxX, mapdata.maxY], units: mapdata.unit }); var view = new ol.View({ center: [mapdata.cx, mapdata.cy], projection: projection, zoom: mapdata.zoom, maxZoom: mapdata.maxZoom, minZoom: mapdata.minZoom, zoomFactor: 1.2 }); /* $("#map").html(''); */ window_temp.SCALE = mapdata.scale; window_temp.UNIT = mapdata.unit; if (window_temp.MAP) { window_temp.MAPINIT = true; // 已存在 clearMap();// 清空現有圖層 window_temp.MAP.setView(view); thisSvgResover(mapdata, view); window_temp.MAP.changed(); } else {// 不存在新建立 window_temp.MAP = new ol.Map({ target: 'map', view: view, interactions: ol.interaction.defaults().extend([ new ol.interaction.DragRotateAndZoom() ]), }); thisSvgResover(mapdata, view); } window_temp.MAP.setProperties({ "suitzoom": mapdata.zoom || 5, "recenter": [mapdata.cx || mapdata.minX + ((mapdata.maxX - mapdata.minX) / 2), mapdata.cy || mapdata.minY + ((mapdata.maxY - mapdata.minY) / 2)] });}function thisSvgResover(data, view) { var layer = new ol.layer.Image({ source: new ol.source.ImageStatic({ url: getBaseURL() + "module/uploads/" + data.mapUrl, projection: view.getProjection(), imageExtent: [data.minX, data.minY, data.maxX, data.maxY] }) }); layer.setZIndex(0); // wxh var tool = addLayer(layer, {name: "basic"});// 將圖層顯示/隱藏熱歸入控制 window_temp.MAP.addLayer(layer);}// 清除地圖圖層 控制器數據 中止定位信息處理function clearMap() { for (var i in window_temp.LAYER) {// 刪除圖層 if (window_temp.MAP_LAYERS[window_temp.LAYER[i]]) { window_temp.MAP.removeLayer(window_temp.MAP_LAYERS[window_temp.LAYER[i]].layer); window_temp.MAP_LAYERS[window_temp.LAYER[i]].remove(); } } for (var i in window_temp.CTRLS) {// 刪除圖層 window_temp.MAP.removeControl(window_temp.MAP_CTRLS[window_temp.CTRLS[i]]); } // window_temp.MAP_CTRLS['mapselect'].remove(); window_temp.MAP_LAYERS = null;// 圖層置空 // window_temp.MAP_CTRLS = null;//地圖控制器置空}// 獲取當前區域人員列表function currSearchList(id) { var datas = ['all']; var array = []; if (id) { datas = [id]; } else { var result = null; $.ajax({ url: getBaseURL() + 'personlocation/onlinePerson', async: false, // 同步 type: 'POST', // 請求類型 cache: false, // 緩存 dataType: 'json', success: function (data) { result = data; window_temp.PERSON_DATA = data; if (!data || data.length == 0) { /*BootstrapDialog.show({ title: '系統提示', message: '當前無在線人員!', buttons: [{ label: '肯定', action: function(dialogItself){ dialogItself.close(); $(".quickSearch").removeClass("canclear"); hidePopup(); if(window_temp.MAPMODE!=0){ switchMapMode(0); } $("#personquickSearch").val(null); } }] });*/ showInfo("當前無在線人員!", null, null); $(".quickSearch").removeClass("canclear"); hidePopup(); if (window_temp.MAPMODE != 0) { switchMapMode(0); } $("#personquickSearch").val(null); } }, error: function (e) { console.error('在線人員信息加載失敗-' + e.description); } }); return result; // return data = $("#all").data("persons"); } var content = ''; for (var k in datas) { var data = $("#" + datas[k]).data("persons"); if (data && data.length > 0) { for (var i in data) { content += "<li class='" + datas[k] + "-front' x='" + data[i].x + "' y='" + data[i].y + "' nameAlphabet='" + data[i].nameAlphabet + "' id='" + data[i].id + "'>" + "<i class='glyphicon glyphicon-map-marker'></i> " + data[i].name + "(" + data[i].id + ")" + data[i].officeName + "</li>"; } } } return content;}// 統計信息事件綁定function listPersonArea(id) { $(".personlist") .val(id) .removeClass("normal") .removeClass("power") .removeClass("restrict") .addClass(id); var data = $("#" + id).data("persons"); var content = "<ul >"; var data = currSearchList(id); if (data != '') { content += data; } else { content += '<span>此區域沒有人員</span>'; } content += '</ul>'; $(".personinfo").html(content);}// 在指定位置顯示popup提示信息// location popup顯示在地圖的座標位置// content 內容// popid 標識// dispPos 顯示在元素的相對位置function showPopup(loc, content, popid, dispPos) { popid = popid || "popup"; var popup = window_temp.MAP.getOverlayById(popid); if (!popup) { var ele = document.createElement("div"); ele.className = "popup"; ele.id = popid; popup = new ol.Overlay({ element: ele, positioning: dispPos || 'bottom-left', stopEvent: true, id: popid }); window_temp.MAP.addOverlay(popup); } popup.setPosition(loc); popup.setVisible(true); var element = $('#' + popid) if (content) { $(element).html(content); } if ($(element).html()) { $(element).show();// slideDown('fast'); }}// 隱藏指定的popupfunction hidePopup(popid, keepContent) { popid = popid || "popup"; if (window_temp.MAP) { var popup = window_temp.MAP.getOverlayById(popid); if (popup) { popup.setVisible(false); $("#" + popid).hide() if (!keepContent) { $("#" + popid).html(null); } } }}/** * 聚焦地圖指定位置 按指定縮放比例 */function focusTo(location, zoomTo) { var zoom = zoomTo || (window_temp.MAP.get("suitzoom") * 1); var duration = 500; var pan = ol.animation.pan({ duration: duration, source: /** @type {ol.Coordinate} */ (window_temp.MAP.getView().getCenter()), }); var zooma = ol.animation.zoom({ duration: duration, resolution: 1 * window_temp.MAP.getView().getResolution() }); if (-1 == zoom) { zoom = window_temp.MAP.get("suitzoom") * 1; window_temp.MAP.beforeRender(pan); } else { window_temp.MAP.beforeRender(zooma, pan); } window_temp.MAP.getView().setCenter(location); window_temp.MAP.getView().setZoom(zoom);}// 工具條顯示隱藏按鈕function toolToggle() { if ($(this).hasClass("arrow_up")) { $(this).removeClass("arrow_up"); $(this).addClass("arrow_down"); $(".ol-control, .maptool, .tool").each(function (e) { if (!$(this).hasClass("arrow_down") && !$(this).hasClass("person") && !$(this).hasClass("area") && !$(this).hasClass("device") && !$(this).hasClass("building")) { $(this).addClass("hide"); } }); $('.ol-control.layertool').hide(); $('.ol-control.person').hide(); } else { $(this).removeClass("arrow_down"); $(this).addClass("arrow_up"); $(".ol-control, .maptool, .tool").each(function (e) { $(this).show().removeClass("hide"); }); window_temp.MAP_CTRLS.measure.renderOver = true; }}// 地圖放大按鈕事件function toolMapZoomIn() { var view = window_temp.MAP.getView(); var zoom = view.getZoom(); view.setZoom(zoom + 1);}// 地圖縮小按鈕事件function toolMapZoomOut() { var view = window_temp.MAP.getView(); var zoom = view.getZoom(); view.setZoom(zoom - 1);}// 還原地圖位置和縮放比例function toolRefresh() { var center = window_temp.MAP.get("recenter"); var zoom = window_temp.MAP.get("suitzoom"); var duration = 1500; var start = +new Date(); var pan = ol.animation.pan({ duration: duration, source: /** @type {ol.Coordinate} */ (window_temp.MAP.getView().getCenter()), start: start }); var bounce = ol.animation.bounce({ duration: duration, resolution: 1.1 * window_temp.MAP.getView().getResolution(), start: start }); var zooma = ol.animation.zoom({ duration: duration, resolution: 1 * window_temp.MAP.getView().getResolution(), start: start }); window_temp.MAP.beforeRender(bounce, pan, zooma); window_temp.MAP.getView().setCenter(center); window_temp.MAP.getView().setZoom(zoom);}// 保存地圖縮放比例和中心位置佈局function toolLayout() { var params = { mapid: $("#currentMapId").val(), zoom: window_temp.MAP.getView().getZoom(), center: window_temp.MAP.getView().getCenter() }; $.ajax({ url: getBaseURL() + 'personlocation/maplayout', async: true, // 異步 type: 'POST', // 請求類型 cache: false, // 緩存 contentType: 'application/json', data: JSON.stringify(params), success: function (data) { // BootstrapDialog.show({title: '系統提示',message: '數據已保存'}); if (window_temp.MAPLIST_CACHE && window_temp.MAPLIST_CACHE[$("#currentMapId").val()]) { var center = window_temp.MAP.getView().getCenter(); var zoom = window_temp.MAP.getView().getZoom(); window_temp.MAPLIST_CACHE[$("#currentMapId").val()].map.cx = center[0]; window_temp.MAPLIST_CACHE[$("#currentMapId").val()].map.cy = center[1]; window_temp.MAPLIST_CACHE[$("#currentMapId").val()].map.zoom = zoom; } /*BootstrapDialog.show({ title: '系統提示', message: '數據已保存!', buttons: [{ label: '肯定', action: function(dialogItself){ dialogItself.close(); } }] });*/ showInfo("數據已保存!", null, null); return; }, error: function (e) { // BootstrapDialog.show({title: '系統提示',message: '數據保存失敗'}); /*BootstrapDialog.show({ title: '系統提示', message: '數據保存失敗!', buttons: [{ label: '肯定', action: function(dialogItself){ dialogItself.close(); } }] });*/ showInfo("數據保存失敗!", null, null); return; } }); window_temp.MAP.setProperties({"suitzoom": params.zoom || 10}); window_temp.MAP.setProperties({"recenter": params.center || [0, 0]});}//初始化所查詢的全部地圖數據function initSerchMapData() { mapQuickSearch('mapquickSearch', '/sncp/mapManager/selectAllMap', {}, mapNameSearchSelected);}function mapNameSearchSelected(item) { var id = item.split('(')[0]; var name = item.split("(")[1].split(")")[0]; switchMap(id, name);}function mapQuickSearch(controlerId, url, params, callback) { mapSearch = new QuickSearch({ initEle: false, input: $("#" + controlerId)[0], dataurl: url, dataparams: params, hintSize: 20, hintUpdater: function (item) {// 選中後輸入框內容 item = JSON.parse(item); var data = item.id + "(" + item.name + ")"; return data; }, hintDisplayText: function (item) {// 列表顯示格式 try { item = JSON.parse(item); var modal = "(" + item.name + ")"; return modal; } catch (e) { return item; } }, hintAfterSelect: function (item) {// 選擇項目後回調函數 callback(item); } }).show();}function scrollToLocation(id) { var mainContainer = $('#buildingMap'), scrollToContainer = mainContainer.find('td:contains("' + id + '")');//滾動到<div id="buildingMap">中Id名爲id的最後一個span處 mainContainer.animate({ scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop() }, 1000);//2秒滑動到指定位置}function quickSearch() { $(".statistic >span").removeClass("active"); $(".personlist").hide().val(''); $(".perlistclose").unbind('click'); $("#personquickSearch").typeahead({// 姓名手機號姓名拼音自動提示 source: function (query, process) { var results = _.map(currSearchList(), function (item) { return JSON.stringify(item); }); process(results); }, autoSelect: true, items: 10,// 選擇列表最多顯示條目數 updater: function (item) {// 選中後輸入框內容 item = JSON.parse(item); return item.name + "(" + item.id + ")"; }, displayText: function (item) {// 列表顯示格式 try { item = JSON.parse(item); return item.name + "(" + item.id + "," + item.nameAlphabet + ")"; } catch (e) { return item; } }, afterSelect: function (item) {// 選擇項目後回調函數 if (item) { var val = item.split('(')[1].replace(")", ''); window_temp.CURRID = val; /*if (val != window_temp.CURRID) {// 追蹤換人 window_temp.CURRID = val; switchMapMode(1); }*/ } } }); $("#personquickSearch").on('click', function (e) {// 清除追蹤 if (e.offsetX > 180) { $(".quickSearch").removeClass("canclear"); e.preventDefault(); hidePopup(); if (window_temp.MAPMODE != 0) { switchMapMode(0); } $(this).val(null); } }).on('change', function (e) { if ($(this).val() == '' || $(this).val() == null) { e.preventDefault(); hidePopup(); if (window_temp.MAPMODE != 0) { switchMapMode(0); } window_temp.CURRID = null; window_temp.MAP_LAYERS['line'].getSource().clear(); $('#devisId').text(""); $('#happenTime').text(""); $(".quickSearch").removeClass("canclear"); $('#showEchartAndList').hide(); $('#realdebugList').bootstrapTable('destroy'); } else { $(".quickSearch").addClass("canclear"); $('#showEchartAndList').show(); initHighCharts(); $('.searchClear').show() } }).on('mousemove', function (e) { if (e.offsetX > 180) { $(this).css("cursor", "pointer"); } else { $(this).css("cursor", "auto"); } }).on('blur', function () { //$('#showEchartAndList').hide(); }); $('.searchImg').on('click', function () { $('#showEchartAndList').hide(); })}function initMapTool() { if (!window_temp.MAPINIT) { // 添加自定義業務操做工具欄 var btns = [ // 工具條顯示隱藏控制鈕 { id: "toolbar-tool", tagName: 'li', className: 'arrow_down ctl', title: "工具欄", trigger: 'click', callback: toolToggle }, // 地圖放大按鈕 {id: "toolbar-zoomin", className: 'zoomin tool', title: '放大', trigger: 'click', callback: toolMapZoomIn}, // 地圖縮小按鈕 {id: "toolbar-zoomout", className: 'zoomout tool', title: '縮小', trigger: 'click', callback: toolMapZoomOut}, // 地圖還原位置和縮放比例 {id: "toobar-refresh", className: 'refresh tool', title: '還原', trigger: 'click', callback: toolRefresh}, /*// 地圖位置和縮放比例保存 {id:"toobar-layout",className:'layout tool',title:'地圖視圖保存',trigger:'click',callback:toolLayout},*/ // 歷史軌跡控制按鈕 { id: "toolbar-history", className: 'history tool', title: '軌跡回放', trigger: 'click', callback: toolHistoryPlay } ]; for (var i in btns) { addBusinessTool({btns: btns[i]});// btns:btns } // 統計信息點擊事件綁定 $(".statistic >span").each(function () { $(this).on("click", function () { var id = $(this).attr("id"); var listid = $(".personlist").val(); var active = $(this).hasClass("active"); if (id == listid) { if (active) { $(this).removeClass("active"); $(".personlist").hide().val(''); $(".perlistclose").unbind('click'); hidePopup(); } } else {// 不一樣區域 $(".searchBtn").removeClass("active"); /* $("#personquickSearch").animate({width:'-180px'}, "300"); */ /* $(".quickSearch").hide(); */ var data = $(this).data("persons"); if (!active) { $(this).addClass("active"); } $(".personlist").show(); $(".perlistclose").on('click', function () { $(".personlist").hide(); $(".personlist >.personinfo").html(''); }) listPersonArea(id); } }); }) // 快速搜索按鈕綁定事件 $(".quickSearch").on('mouseover', quickSearch); } // 添加地圖操做控件：導航、比例、測距、鷹眼 addControls(); $(".maptool.overview.tool>button").attr("title", "縮略圖"); $(".maptool.measure.tool>button").attr("title", "測距"); if (!window_temp.MAPINIT) { $(".maptool>button").each(function () { if (!$(this).hasClass("zoomin") && !$(this).hasClass("zoomout") && !$(this).hasClass("layout") && !$(this).hasClass("refresh")) { $(this).on('click', function () { if ($(this).hasClass("active")) { $(this).removeClass("active"); } else { $(this).addClass("active"); } }); } }); $(".maptool.tool").each(function (e) { $(this).hide(); }); $(".ol-zoom, .ol-zoomslider").remove(); // 添加地圖元素事件 addMapElementEvent(); }}/** * 初始化基礎圖層和基礎業務圖層 */function initOneLayer(data) {// 繪製一個圖層 if (data.type === 'fns') { var features = convertToFeature(data); if (window_temp.MAP_LAYERS['device']) { if (features) { window_temp.MAP_LAYERS['device'].layer.getSource().addFeatures(features); } } } else { var features = convertToFeature(data); var layer = new ol.layer.Vector({source: new ol.source.Vector({})}); layer.getSource().addFeatures(features); // layer.setProperties({"layerType":data}) window_temp.MAP.addLayer(layer); var tool = addLayer(layer, data);// 將圖層顯示/隱藏熱歸入控制 window_temp.MAP.addControl(tool); /* * if(data.type==2){//業務圖層 if(data.name!='校訂圖層'){ var tool = * addLayer(layer, data);//將圖層顯示/隱藏熱歸入控制 window_temp.MAP.addControl(tool); } * }else if(data.type==1){//基礎圖層 var tool = addLayer(layer, * {name:"basic"});//將圖層顯示/隱藏熱歸入控制 } */ }}/** * 初始化人員定位圖層 */function initPersonLayer() { var styleCache = {}; var personlayer = new ol.layer.Vector({ source: new ol.source.Cluster({ distance: 10, source: new ol.source.Vector({}) }), style: function (feature, resolution) { var size = feature.get('features').length; var style = styleCache[size]; if (!style) { if (size == 1) { style = [new ol.style.Style({ image: new ol.style.Circle({ radius: 10, stroke: new ol.style.Stroke({ color: '#fff' }), fill: new ol.style.Fill({ color: '#7FFF00' }) }) })]; } else { style = [new ol.style.Style({ image: new ol.style.Circle({ radius: 10, stroke: new ol.style.Stroke({ color: '#fff' }), fill: new ol.style.Fill({ color: '#3399CC' }) }), text: new ol.style.Text({ text: size.toString(), fill: new ol.style.Fill({ color: '#fff' }) }) })]; } } else { if (size == 1) { var zoom = window_temp.MAP.getView().getZoom();// window_temp.MAP.get("suitzoom") if (zoom >= window_temp.MAP.get("suitzoom")) { style = [new ol.style.Style({image: new ol.style.Icon({src: '/sncp/resources/image/person_single.png'})})]; } else { style = [new ol.style.Style({ image: new ol.style.Circle({ radius: 5, stroke: new ol.style.Stroke({ color: '#fff' }), fill: new ol.style.Fill({ color: '#7FFF00' }) }) })]; } } } styleCache[size] = style; return style; } }); window_temp.MAP.addLayer(personlayer); var tool = addLayer(personlayer, {name: '人員圖層'});// 將圖層顯示/隱藏熱歸入控制 window_temp.MAP.addControl(tool);}/** * 初始化單人跟蹤圖層 */function initSingleLayer() { var styleCache = {}; var singlelayer = new ol.layer.Vector({ source: new ol.source.Cluster({ distance: 10, source: new ol.source.Vector({}) }), style: function (feature, resolution) { var size = feature.get('features').length; var style = styleCache[size]; if (!style) { if (size == 1) { style = [new ol.style.Style({ image: new ol.style.Circle({ radius: 10, stroke: new ol.style.Stroke({ color: '#fff' }), fill: new ol.style.Fill({ color: '#7FFF00' }) }) })]; } else { style = [new ol.style.Style({ image: new ol.style.Circle({ radius: 10, stroke: new ol.style.Stroke({ color: '#fff' }), fill: new ol.style.Fill({ color: '#3399CC' }) }), text: new ol.style.Text({ text: size.toString(), fill: new ol.style.Fill({ color: '#fff' }) }) })]; } } else { if (size == 1) { var zoom = window_temp.MAP.getView().getZoom();// window_temp.MAP.get("suitzoom") if (zoom >= window_temp.MAP.get("suitzoom")) { style = [new ol.style.Style({image: new ol.style.Icon({src: '/sncp/resources/image/person_single.png'})})]; } else { style = [new ol.style.Style({ image: new ol.style.Circle({ radius: 5, stroke: new ol.style.Stroke({ color: '#fff' }), fill: new ol.style.Fill({ color: '#7FFF00' }) }) })]; } } } styleCache[size] = style; return style; } }); window_temp.MAP.addLayer(singlelayer); addLayer(singlelayer, {name: 'single'});}/** * 私有處理元素數據爲openlayers元素 */function convertToFeature(data) { var features = new Array(); var busiType = data.type;// 圖層業務類型 if (busiType === 'fns') { /* * data = data.data; if(data){ var feature ;//元素臨時變量 for(var i in data){ * feature = new ol.Feature(new ol.geom.Point([data[i].x,data[i].y])); * feature.setStyle( //new ol.style.Style({ image:new * ol.style.Icon({src:'../resources/image/FN_btn.png'}) }) * function(resolution){ var zoom = * window_temp.MAP.getView().getZoom();//window_temp.MAP.get("suitzoom") if( zoom >= * window_temp.MAP.get("suitzoom")){ return [new ol.style.Style({image:new * ol.style.Icon({src:'../resources/image/FN_btn.png'})})]; }else{ * return [new ol.style.Style({ image: new ol.style.Circle({ radius: 3, * stroke: new ol.style.Stroke({color: '#fff'}),fill: new * ol.style.Fill({color: '#00f'}) }) })]; } } ); * feature.setProperties(data[i]); feature.set('type','fn'); * features.push(feature); } } */ return features; } else { if (data.elements && data.elements.length > 0) { for (var i in data.elements) { var ele = data.elements[i]; var feature = new ol.Feature({ geometry: new ol.geom.Polygon([JSON.parse(ele.coordinate)]) }); // daFeature.setStyle(JDMapVar.getAreaStyle(data.areaTypeId,"0")); // daFeature.set("name",data.name); features.push(feature); /* * var ele = data.elements[i]; var eleType ; * if(busiType==2){//業務圖層元素 * if(ele.busiObj&&ele.busiObj.busiType){ eleType = * ele.busiObj.busiType; }else{ console.log("data error"); } * }else if(busiType==1){//基礎圖層元素 eleType =ele.type;//1-點 } var * type = busiType*10+eleType;//業務圖層類型和元素類型 var feature * ;//元素臨時變量 switch(type){ //業務元素類 case 21://區域 feature = new * ol.Feature(new * ol.geom.Polygon(convert(ele.coordinate,'Polygon'))); var * colors = ['#f35958','#eeb559','#53cda8']; var rgbcor = * ['rgba(243,89,88,0.3)','rgba(238,181,89,0.3)','rgba(83,205,168,0.3)'];//限制區,功率區,非限制區 * feature.setStyle( new ol.style.Style({ stroke: new * ol.style.Stroke({color:colors[ele.busiObj.type*1-1], * width:2}), fill: new ol.style.Fill({color: * rgbcor[ele.busiObj.type*1-1]}), text: new ol.style.Text({ * text:"0人", offsetY:28, scale:1.4, fill: new ol.style.Fill({ * color: "#fff"//colors[ele.busiObj.type*1-1] }), stroke: new * ol.style.Stroke({color:"#fff",//colors[ele.busiObj.type*1-1] * width:1}), }) })); break; case 22://標誌物 feature = new * ol.Feature(new * ol.geom.Point(convert(ele.coordinate,'Point'))); break; case * 23://CC feature = new ol.Feature(new * ol.geom.Point(convert(ele.coordinate,'Point'))); * //feature.setStyle(new ol.style.Style({image:new * ol.style.Icon({src:'../resources/image/cc.png'})})); * feature.setStyle(function(resolution){ var zoom = * window_temp.MAP.getView().getZoom();//window_temp.MAP.get("suitzoom") * if( zoom >= window_temp.MAP.get("suitzoom")){ return [new * ol.style.Style({image:new * ol.style.Icon({src:'../resources/image/CC_btn.png'})})]; * }else{ return [new ol.style.Style({ image: new * ol.style.Circle({ radius: 6, stroke: new * ol.style.Stroke({color: '#fff'}),fill: new * ol.style.Fill({color: '#fff'}) }) })]; } }); break; case * 24://LINE feature = new ol.Feature(new * ol.geom.LineString(convert(ele.coordinate,'LineString'),'XY')) ; * feature.setStyle(new ol.style.Style({ stroke: new * ol.style.Stroke({ color: '#FFFFFF',//'rgba(220,200,220,0.8)' * width:2 }) })); break; case 25://微基站 feature = new * ol.Feature(new * ol.geom.Point(convert(ele.coordinate,'Point'))); * feature.setStyle(function(resolution){ var zoom = * window_temp.MAP.getView().getZoom();//window_temp.MAP.get("suitzoom") * if( zoom >= window_temp.MAP.get("suitzoom")){ return [new * ol.style.Style({image:new * ol.style.Icon({src:'../resources/image/mic_station_btn.png'})})]; * }else{ return [new ol.style.Style({ image: new * ol.style.Circle({ radius: 4, stroke: new * ol.style.Stroke({color: '#fff',width:2}),fill: new * ol.style.Fill({color: '#0ff'}) }) })]; } }); break; //基礎圖層元素 * case 11://點 feature = new ol.Feature(new * ol.geom.Point(convert(ele.coordinate,'Point'))); break; case * 12://線 feature = new ol.Feature(new * ol.geom.LineString(convert(ele.coordinate,'LineString'),'XY')); * feature.setStyle(new ol.style.Style({ stroke: new * ol.style.Stroke({ color: '#5e9ce2'//'rgba(220,200,220,0.8)' }) * })); break; case 13://多邊形 break; * * default: break; } if(feature){ if(busiType==2){//業務元素 添加業務屬性 * feature.setProperties(ele.busiObj); } features.push(feature); } */ } } return features; }}/** * 轉換座標 */function convert(coodinates, type) { var result = []; for (var pos in coodinates) { result.push([coodinates[pos].x, coodinates[pos].y]); } if (type == 'Polygon') { return [result]; } else if (type == "LineString") { return result; } else if (type == "Point") { return result[0]; }}/** * 添加地圖基礎控件 */function addControls() { if (!window_temp.MAP_CTRLS) { window_temp.MAP_CTRLS = {}; } /* * //縮放滑塊控制器 var zoomslider = new ol.control.ZoomSlider(); * window_temp.MAP.addControl(zoomslider); */ // 比例尺控制器 var scaleControl = new ol.control.Scale({scale: window_temp.SCALE, unit: window_temp.UNIT}); window_temp.MAP.addControl(scaleControl); window_temp.MAP_CTRLS['scale'] = scaleControl; if (!window_temp.MAPINIT) { // 地圖選擇控制器 mapselectControl = new ol.control.mapSelectTool(); window_temp.MAP.addControl(mapselectControl); window_temp.MAP_CTRLS['mapselect'] = mapselectControl; //window_temp.MAP.getLayers()[0]. //url: getBaseURL()+"module/uploads/"+data.mapUrl, //imageExtent: [data.minX,data.minY,data.maxX,data.maxY] /*var layer_temp = new ol.layer.Layer({ source:new ol.source.ImageStatic({ projection:window_temp.MAP.getView().getProjection(), url: getBaseURL()+"module/uploads/", imageExtent: [1,1,1,1] }), zIndex:1 });*/ // 縮略圖控制器（1.1開放）// console.log(window_temp.MAP_LAYERS['basic'].layer);// var overviewmapControl =new ol.control.OverviewMap({// className: 'maptool overview tool ol-overviewmap ol-custom-overviewmap',// '',// layers: [window_temp.MAP_LAYERS['area'].layer],//[window_temp.MAP_LAYERS['basic'].layer],// window_temp.MAP.getLayers(),// collapseLabel: ' ',// '\u00BB',// label: ' ',// '\u00AB',// collapsed: true// });// window_temp.MAP.addControl(overviewmapControl);// window_temp.MAP_CTRLS['overview']=overviewmapControl; // 測量控制器 var measureControl = new ol.control.Measure({ tipLabel: '測距', scale: window_temp.SCALE, unit: window_temp.UNIT, className: 'maptool measure tool', label: ' ', collapseLabel: ' ', openLabel: ' ', zIndex: 6 }); window_temp.MAP.addControl(measureControl); window_temp.MAP_CTRLS.measure = measureControl; measureControl.renderOver = false; } else { window_temp.MAP_CTRLS.measure.scale_ = window_temp.SCALE; window_temp.MAP_CTRLS.measure.unit_ = window_temp.UNIT; window_temp.MAP_CTRLS.measure.renderOver = false;// window_temp.MAP_CTRLS.overview.ovmap_.getLayers().forEach(function(e,a,i){// window_temp.MAP_CTRLS.overview.ovmap_.removeLayer(e);// })// window_temp.MAP_CTRLS.overview.ovmap_.addLayer(window_temp.MAP_LAYERS['basic'].layer);// window_temp.MAP_CTRLS.overview.changed(); } /* * var drawControl = new ol.control.Draw({tipLabel: '區域查詢', * callback:areaSearch,className:'maptool area tool',label:' * ',collapseLabel:' ',openLabel:' '}); window_temp.MAP.addControl(drawControl); */ /* * //全屏控制器 var fullscreenControl = new ol.control.FullScreen({tipLabel: * '全屏',className:'maptool fullscr tool',label:' ',collapseLabel:' * ',openLabel:' '}); window_temp.MAP.addControl(fullscreenControl); */ if (window_temp.DEBUG_MODE) { if (!window_temp.MOUSE_CTRL) { window_temp.MOUSE_CTRL = new ol.control.MousePosition({ coordinateFormat: function (coordinate) { return ol.coordinate.format(coordinate, "X:{x},Y:{y},Zoom:" + window_temp.MAP.getView().getZoom() , 2); }, className: 'custom-mouse-position', target: document.getElementById("locinfo"), undefinedHTML: '' }); window_temp.MAP.addControl(window_temp.MOUSE_CTRL); } }}/** * 切換地圖 */function switchMap(id, value) { if (id != $('#currentMapId').val()) { $('#currentMapId').val(id); window_temp.LOCAL_MAP_LAYERS = {}; if (window_temp.MAPMODE == 1) { $(".quickSearch").removeClass("canclear"); switchMapMode(0); $("#personquickSearch").val(""); } hidePopup(); window_temp.MAP_LAYERS['person'].layer.getSource().getSource().clear(); //切換地圖隱藏線 window_temp.MAP_LAYERS['line'].getSource().clear(); window_temp.CURRID = null; $('#showEchartAndList').hide() $('#devisId').text(""); $('#happenTime').text(""); $('#realdebugList').bootstrapTable('destroy'); if($('#personquickSearch').val() !=undefined){ $('.searchImg').show() }else { $('.searchImg').hide() } if (!$('#currentMapId').val() || id!=datamapid) { $('#personquickSearch').val(null) $('#showEchartAndList').hide() $('.searchImg').hide() } loadMapData(id, true); /*initOlPlugin(); initMapTool();*/ } $("#mapquickSearch").val(""); $('#mapselect').hide(); $('.ol-control.layertool').hide()}/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 地圖選擇工具↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ *//* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 地圖業務控制工具↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ *//** * 添加地圖業務工具欄 */function addBusinessTool(opt) { businessTool = function (opt_options) { var options = opt_options || {};// var element = goog.dom.createDom('DIV',// 'maptool ol-unselectable ol-control '+opt_options.btns.className); var element = document.createElement('div'); element.className = 'maptool ol-unselectable ol-control ' + opt_options.btns.className; var button = createToolbarBtn(options.btns); element.appendChild(button); ol.control.Control.call(this, { element: element, target: options.target }); }; ol.inherits(businessTool, ol.control.Control); window_temp.MAP.addControl(new businessTool(opt));}function createToolbarBtn(data) { var ele = document.createElement("button"); ele.className = data.className; ele.id = data.id; ele.title = data.title; // ele.innerHTML=''; $(ele).on(data.trigger, data.callback); return ele;}/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 地圖業務控制工具↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ *//** * 添加地圖元素tip */function addMapElementEvent() { window_temp.MAP.on('pointermove', function (evt) { if (evt.dragging || evt.type == 'click') { $("#mousepopup").hide(); return; } var feature = window_temp.MAP.forEachFeatureAtPixel(evt.pixel, function (feature, layer) { return feature; }); if (feature) { var content = '' if (feature.get("features")) { item = feature.get("features"); for (var i in item) { content += item[i].get("id") + "-" + item[i].get("name") + " "; if (i > 0 && ((i * 1) + 1) % 5 == 0) { content += "</br>"; } } } else { if ('area' == feature.get("featureType")) { content = feature.get("name"); } else if ('line' == feature.get("featureType")) { content = feature.get("lineName"); } else if ('device' == feature.get("featureType")) { content = feature.get("ip") + '-' + feature.get("deviceId") + '-' + feature.get("wtpSerialNum"); } else if ('building' == feature.get("featureType")) { var data = feature.get("building"); var count = 0; if (data) { for (var i in data) { count = count + data[i].count; } } content = feature.get("name") + '-' + count + '人'; } } if (content != '') { var coordinate = evt.coordinate; coordinate[0] = coordinate[0] + 5; coordinate[1] = coordinate[1] + 5; showPopup(coordinate, content, 'mousepopup'); } else { hidePopup('mousepopup'); } } else { $("#mousepopup").hide().html(null); } }); window_temp.MAP.on('click', function (e) { if (e.dragging) { return; } var feature = window_temp.MAP.forEachFeatureAtPixel(e.pixel, function (feature, layer) { return feature; }); if (feature) { if (feature.get("featureType") == 'area') { hidePopup('buildpopup'); var data = feature.get("person");//$(".statistic").data(feature.get("id")); if (data) { var item = data; var content = ''; for (var i in item) { content += item[i].name + '(' + item[i].id + ') '; if (i > 0 && ((i * 1) + 1) % 5 == 0) { content += "</br>"; } } if (content) { var coordinate = e.coordinate; coordinate[0] = coordinate[0] + 5; coordinate[1] = coordinate[1] + 5; showPopup(coordinate, content, 'mousepopup'); //showPopup(feature.getGeometry().getInteriorPoint().getCoordinates(),content,'areapopup'); } } } else if (feature.get("featureType") == 'building') { hidePopup('areapopup'); var data = feature.get("building"); if (data) { var content = ''; for (var i in data) { content += '<a style="cursor: pointer;" onclick="selectBuildingFloor(' + data[i].id + ')">' + data[i].name + '：' + data[i].count + '人</a></br>'; } content = '<div>' + content + '</div>'; if (content) { showPopup(e.coordinate, content, 'buildpopup'); } } } } else { hidePopup('areapopup'); hidePopup('buildpopup'); } });}function selectBuildingFloor(mapid) { hidePopup('buildpopup'); switchMap(mapid);}/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 圖層顯示控制工具↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */function addLayer(layer, data, layertype) { var typeClass = ''; var tool = new ol.control.layerTool({layer: layer}); if (data.name) { if (data.name == '設備圖層') { typeClass = 'device'; layer.setZIndex(2); } else if (data.name == '區域圖層') { typeClass = 'area' layer.setZIndex(1); } else if (data.name == '人員圖層') { typeClass = 'person' layer.setZIndex(4); } else if (data.name == '建築圖層') { typeClass = 'building' layer.setZIndex(3); } else if (data.name == 'basic') { typeClass = "basic"; layer.setZIndex(0); } else if (data.name == 'single') { typeClass = "single"; layer.setZIndex(5); } if (typeClass != 'basic') {// 基礎圖層不進行顯示控制 $(tool.element_).addClass(typeClass);// var button = goog.dom.createDom('button',{'type': 'button','title': data.name,className:'layertool '+typeClass} , ' '); var button = document.createElement('button');//goog.dom.createDom('button',{'type': 'button','title': data.name,className:'layertool '+typeClass} , ' '); button.className = 'layertool ' + typeClass; button.type = "button"; button.title = data.name; button.addEventListener('click', function () { tool.display($(this).hasClass(tool.closeClass)); }, false); $(tool.element_).append(button); } if (!window_temp.MAP_LAYERS) { window_temp.MAP_LAYERS = {}; } } window_temp.MAP_LAYERS[typeClass] = tool; return tool;};/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 定位數據接收及處理 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */// 初始化handler註冊function initSocketHandler() { window.parent.JDMC.subscribe('NUCLEAR', window.parent.JDMC.MessageType.JD_REQUEST_RSSI, initPersonConnectDevice); window.parent.JDMC.subscribe('NUCLEAR', window.parent.JDMC.MessageType.JD_REQUEST_LOCATION_OFF, clearPositionData);}function cancelSocketHandler() { window.parent.JDMC.unsubscribe('NUCLEAR', window.parent.JDMC.MessageType.JD_REQUEST_RSSI); window.parent.JDMC.unsubscribe('NUCLEAR', window.parent.JDMC.MessageType.JD_REQUEST_LOCATION_OFF);}/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 定位接收及處理 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */var segmentLen = 1;function splitTrace(startx, starty, endx, endy) { var points = []; var distance = Math.sqrt((startx - endx) * (startx - endx) + (starty - endy) * (starty - endy)); var segmentCount = Math.floor(distance / segmentLen); if (segmentCount < 1) { return points; } var segmentX = segmentLen * Math.abs(startx - endx) / distance; var segmentY = segmentLen * Math.abs(starty - endy) / distance; for (var i = 1; i < segmentCount + 1; i++) { var point = {}; (startx < endx) ? point.x = startx + segmentX * i : point.x = startx - segmentX * i; (starty < endy) ? point.y = starty + segmentY * i : point.y = starty - segmentY * i; points.push(point); } return points;}//從新計算表格高度$(window).resize(function () { $('#realdebugList').bootstrapTable('resetView', {height: parseInt(getClientHeight() - 93)});})
相關文章
- 1. 最完整PHP.INI中文版
- 2. 最完整的php.ini中文註釋
- 3. jssip中文開發文檔（完整版）
- 4. [轉載]最完整PHP.INI中文版
- 5. CIT 中文筆記完整版
- 6. jssip音視頻及短信開發demo（中文註釋完整版）
- 7. Weui 文件上傳完整版示例
- 8. Java中的IO整理完整版（一）
- 9. springboot 整合nacos 配置及註冊中心完整版
- 10. CSS居中完整版
- 更多相關文章...
- • PHP 完整表單實例 - PHP教程
- • MySQL的版本以及版本號 - MySQL教程
- • Scala 中文亂碼解決
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
相關文章