js对象
ex_device_batch_gis.js
//地理区域扩展类 function ExGisMap(devices) { GisMap.call(this, devices); //继承父类的属性 } ExGisMap.prototype = new GisMap(); //继承父类方法 /** * 对齐 * 以最大x或者最大y的坐标为基准 * @param deviceMap 框选的点,map对象 * @param order * @returns {*} */ ExGisMap.prototype.align = function (deviceMap, order) { var attrs = ["x", "y"]; if (deviceMap == null || deviceMap.length <= 1) { return; } if ($.inArray(order, attrs) < 0) { return; } var change = order == "x" ? "y" : "x"; var baseCoodinate = {};//基准坐标 //设置基准坐标 deviceMap.each(function (code, value, index) { if ($.isEmptyObject(baseCoodinate)) { baseCoodinate = value; } else { baseCoodinate = value[order] > baseCoodinate[order] ? value : baseCoodinate; } }); //对齐 deviceMap.each(function (code, value, index) { value[change] = baseCoodinate[change]; }); return deviceMap; }; /** * 等距离排序 * 根据x或者y * @param deviceMap * @param order * @returns {*} */ ExGisMap.prototype.equalDistance = function (deviceMap, order) { var attrs = ["x", "y"]; if (deviceMap == null || deviceMap.length <= 2) { return; } if ($.inArray(order, attrs) < 0) { return; } //等距 var length = deviceMap.size(); var start = {}, end = {}; start.key = deviceMap.keys[0]; start.value = deviceMap.data[start.key]; end.key = deviceMap.keys[length - 1]; end.value = deviceMap.data[end.key]; var avg = (start.value[order] - end.value[order]) / (length - 1); deviceMap.each(function (code, value, index) { if (index != 0 && index != length - 1) { value[order] = start.value[order] - index * avg; } }); return deviceMap; }; /** * 冒泡排序 * 从大到小 * @param deviceMap * @param order * @returns {*} */ ExGisMap.prototype.sort = function (deviceMap, order) { var len = deviceMap.size(), tempKey; if (len > 1) { for (var i = 0; i < len; i++) { for (var j = i + 1; j < len; j++) { if (deviceMap.data[deviceMap.keys[i]][order] < deviceMap.data[deviceMap.keys[j]][order]) { //调换key的位置 tempKey = deviceMap.keys[j]; deviceMap.keys[j] = deviceMap.keys[i]; deviceMap.keys[i] = tempKey; } } } } return deviceMap; }; /** * 重定位 * @param deviceMap */ ExGisMap.prototype.houseMoving = function (deviceMap) { var _this = this; deviceMap.each(function (code, value, index) { var lonLat = new OpenLayers.LonLat(value.x, value.y); var pixelFromLonLat = _this.map.getPixelFromLonLat(lonLat); value['marker'].moveTo(pixelFromLonLat); var $parent = $("input[value='" + code + "']").parents("li"); $parent.find("input[name='coordinateX']").val(value.x); $parent.find("input[name='coordinateY']").val(value.y); }); }; /** * 将框选的makers转换成map * @param selectMarkers * @returns {Map} */ ExGisMap.prototype.convert2Map = function (selectMarkers) { if(typeof selectMarkers == "undefined" || selectMarkers.length==0){ return; } var selectMap = new Map(); for (var i = 0; i < selectMarkers.length; i++) { var item = selectMarkers[i]; var key = item.code; var value = this.devices.get(key); selectMap.put(key, value); } return selectMap; }; /** * 绑定事件 */ ExGisMap.prototype.bindEvent = function(){ var _this = this; /** * 设备定位 */ $(".device-location").click(function(e){ var gisMap = _this; //工具栏状态 resetGisTools(e,gisMap); $(e.currentTarget).addClass("gis-hover"); $(".tool-mask").show(); //gis图 gisMap.selecter.deactivate(); gisMap.map.events.unregister("click", gisMap.map, onMapClick); gisMap.map.events.register("click", gisMap.map, onMapClick); gisMap.navigation.activate(); }); /** * 元素框选 */ $(".frame-select").click(function(e){ var gisMap = _this; //工具栏状态 resetGisTools(e,gisMap); $(e.currentTarget).addClass("gis-hover"); $(".tool-mask").hide(); $(e.currentTarget).siblings(".gis-layout").addClass("gis-active"); //gis图 gisMap.map.events.unregister("click", gisMap.map, onMapClick); gisMap.navigation.deactivate(); gisMap.selecter.activate(); }); function resetGisTools(e,gisMap){ $(e.currentTarget).parents("ul").find("li").removeClass("gis-hover gis-active"); gisMap.selecter.unselectAll(); } //垂直排序 $(".layout-vertical").click(function(){ var gisMap = _this; var deviceMap = gisMap.convert2Map(gisMap.selecter.markers); gisMap.align(deviceMap,"y"); gisMap.sort(deviceMap,"y"); gisMap.houseMoving(deviceMap,"y") }); //垂直等距排序 $(".layout-vertical-ed").click(function(){ var gisMap = _this; var deviceMap = gisMap.convert2Map(gisMap.selecter.markers); gisMap.align(deviceMap,"y"); gisMap.sort(deviceMap,"y"); gisMap.equalDistance(deviceMap,"y"); gisMap.houseMoving(deviceMap,"y") }); //水平排序 $(".layout-horizontal").click(function(){ var gisMap = _this; var deviceMap = gisMap.convert2Map(gisMap.selecter.markers); gisMap.align(deviceMap,"x"); gisMap.sort(deviceMap,"x"); gisMap.houseMoving(deviceMap,"x") }); //水平等距排序 $(".layout-horizontal-ed").click(function(){ var gisMap = _this; var deviceMap = gisMap.convert2Map(gisMap.selecter.markers); gisMap.align(deviceMap,"x"); gisMap.sort(deviceMap,"x"); gisMap.equalDistance(deviceMap,"x"); gisMap.houseMoving(deviceMap,"x") }); };
device_batch_gis.js
/** * 设备GIS批量定位 * Created by zhengjingguo on 2016/8/10. */ var gisMap; /** * JS Map对象 * @constructor 无参构造函数 */ function Map() { /** 存放键的数组(遍历用到) */ this.keys = new Array(); /** 存放数据 */ this.data = new Object(); /** * 放入一个键值对 * @param {String} key * @param {Object} value */ this.put = function (key, value) { if (this.data[key] == null) { this.keys.push(key); } this.data[key] = value; }; /** * 获取某键对应的值 * @param {String} key * @return {Object} value */ this.get = function (key) { return this.data[key]; }; /** * 删除一个键值对 * @param {String} key */ this.remove = function (key) { this.keys.remove(key); this.data[key] = null; }; /** * 遍历Map,执行处理函数 * * @param {Function} 回调函数 function(key,value,index){..} */ this.each = function (fn) { if (typeof fn != 'function') { return; } var len = this.keys.length; for (var i = 0; i < len; i++) { var k = this.keys[i]; fn(k, this.data[k], i); } }; /** * 获取键值数组(类似Java的entrySet()) * @return 键值对象{key,value}的数组 */ this.entrys = function () { var len = this.keys.length; var entrys = new Array(len); for (var i = 0; i < len; i++) { entrys[i] = { key: this.keys[i], value: this.data[this.keys[i]] }; } return entrys; }; /** * 判断Map是否为空 */ this.isEmpty = function () { return this.keys.length == 0; }; /** * 获取键值对数量 */ this.size = function () { return this.keys.length; }; /** * 重写toString */ this.toString = function () { var s = "{"; for (var i = 0; i < this.keys.length; i++, s += ',') { var k = this.keys[i]; s += k + "=" + this.data[k]; } s += "}"; return s; }; } /** * GIS对象 * @constructor */ function GisMap(devices) { this.devices = devices; /** * Openlayers map对象 */ this.map; /** * Openlayers遮罩对象 */ this.markers; /** * 拖拽对象 */ this.navigation; /** * 框选control */ this.selecter; /** * * @param opt */ this.init = function (opt) { var geography = opt.geography; var _this = this; // 请求GIS数据 $.ajax({ url: opt.getGeoUrl, data: { geoId: geography }, type: 'POST', dataType: 'json', async: false }).done(function (data) { var wmsUrl = data.geoUrl + "wms"; var wfsUrl = data.geoUrl + "wfs"; var projection = data.projection; var maxExtent = data.maxExtent; var layer = data.layers[0]; // 地图边界 var mapExtent = new OpenLayers.Bounds(maxExtent[0], maxExtent[1], maxExtent[2], maxExtent[3]); // 控件数组 var panZoomBarPosition = new OpenLayers.Pixel(25, 100);//鱼骨头的位置(右,顶) _this.navigation = new OpenLayers.Control.Navigation(); var controls = [new OpenLayers.Control.PanZoomBar({ panIcons: false, position: panZoomBarPosition }), new OpenLayers.Control.MousePosition(), _this.navigation, new OpenLayers.Control.ZoomBox()]; // 加载GIS if (data.isCampus || data.level <= 3) { // 园区地图 var tileSize = new OpenLayers.Size(256, 256); var aerialsUrl = '../../../app/modules/gis/maptile/_alllayers/'; var mapResolutions = [ 0.00000118973050291514, 0.00000059486525145757001, 0.00000029743262572878501, 0.00000014872631286878501 ]; var agsTileOrigin = new OpenLayers.LonLat(-400, 400); var baseLayer = new OpenLayers.Layer.ESRICache('background', aerialsUrl, { tileOrigin: agsTileOrigin, resolutions: mapResolutions, sphericalMercator: true, maxExtent: mapExtent, isBaseLayer: true, projection: 'EPSG:4326', zoomOffset: 0 }); // Vector Style var hotStyle = new OpenLayers.StyleMap({ "default": { strokeWidth: 0, strokeOpacity: 1, strokeColor: "#000000", fillColor: "#666666", fillOpacity: 0.1 }, "select": { strokeWidth: 0, strokeOpacity: 1, strokeColor: "#ffdc00", fillColor: "#ffdc00", fillOpacity: 0.5 } }); var campusTipLayer = new OpenLayers.Layer.WMS(layer, wmsUrl, { layers: layer, transparent: true }, { opacity: 1, singleTile: true }); var wfsParams = { service: 'WFS', version: '1.1.0', request: 'GetFeature', typeName: 'iBMS:' + layer, maxFeatures: '50', srsName: projection, outputFormat: 'text/javascript', format_options: 'callback:parseResponse' }; _this.map = new OpenLayers.Map('map', { maxExtent: mapExtent, layers: [baseLayer, campusTipLayer], controls: controls, minScale: 375 }); var campusLayer = null; // jsonp request wfs $.ajax({ url: wfsUrl, data: $.param(wfsParams), type: 'GET', jsonpCallback: 'parseResponse', dataType: 'jsonp', async: false }).done(function (data) { campusLayer = new OpenLayers.Layer.Vector("campus", { eventListeners: { 'featureselected': function (evt) { }, 'featureunselected': function (evt) { } }, styleMap: hotStyle }); campusLayer.addFeatures(new OpenLayers.Format.GeoJSON({}).read(data), {}); var selector = new OpenLayers.Control.SelectFeature( campusLayer, { hover: true, autoActivate: true }); controls.push(selector); _this.map.addLayer(campusLayer); _this.map.addControl(selector); }); } else { // 室内楼层 var layers = [new OpenLayers.Layer.Image( '空', OpenLayers.Util.getImageLocation("blank.gif"), mapExtent, new OpenLayers.Size(12, 12), {isBaseLayer: true} ), new OpenLayers.Layer.WMS(layer, wmsUrl, { layers: layer, transparent: true }, { opacity: 1, singleTile: true })]; controls.push(new OpenLayers.Control.OverviewMap({ layers: [layers[0].clone(), layers[1].clone()], maximized: true })); _this.map = new OpenLayers.Map("map", { projection: projection, maxExtent: mapExtent, layers: layers, controls: controls }); } // 添加遮罩物层 _this.markers = new OpenLayers.Layer.Markers("markers"); _this.map.addLayer(_this.markers); _this.selecter = new OpenLayers.Control.SelectMarker(_this.markers, {}); _this.map.addControl(_this.selecter); // 注册GIS点击事件 _this.map.events.register("click", _this.map, onMapClick); _this.map.zoomToMaxExtent(); }); }; /** * 销毁地图 */ this.destroy = function () { if (this.map != null) { for (var i = this.map.controls.length - 1; i >= 0; i--) { this.map.removeControl(this.map.controls[i]); } this.markers = null; for (i = this.map.layers.length - 1; i >= 0; i--) { this.map.removeLayer(this.map.layers[i], false); } this.map.destroy(); } }; /** * 添加遮罩物 * @param x X坐标 * @param y Y坐标 * @param code * @returns {*} */ this.addMarker = function (x, y, code) { var lonLat = new OpenLayers.LonLat(x, y); var sz = new OpenLayers.Size(16, 18); //尺寸大小 var icon = new OpenLayers.Icon(OpenLayers.Util.getImageLocation('flag.png'), sz, null, function (size) { //return new OpenLayers.Pixel(-(size.w / 2), -size.h); return new OpenLayers.Pixel(-1, -size.h); }); var marker = new OpenLayers.Marker(lonLat, icon); marker.code = code; this.markers.addMarker(marker); return marker; }; this.addSpecialMarker = function (x, y,code) { var lonLat = new OpenLayers.LonLat(x, y); var sz = new OpenLayers.Size(10, 22); //尺寸大小 var icon = new OpenLayers.Icon(OpenLayers.Util.getImageLocation('lollipop.png'), sz, null, function (size) { return new OpenLayers.Pixel(-(size.w / 2), -size.h); }); var marker = new OpenLayers.Marker(lonLat, icon); marker.code = code; this.markers.addMarker(marker); return marker; } this.addAllMarkers = function () { var array = devices.entrys(); for (var i = 0; i < array.length; i++) { var code = array[i].key; var val = array[i].value; if (val.x != '' && val.y != '') { val['marker'] = this.addMarker(val.x, val.y ,code); val['gold'] = false; } } }; } /** * 地图点击事件 * @param e */ function onMapClick(e) { var lonLat = gisMap.map.getLonLatFromPixel(e.xy); var $currentDrawer = $(".gis-location-info-drawer-focus"); var code = $currentDrawer.find("input[name='code']").val(); $currentDrawer.find("input[name='coordinateX']").val(lonLat.lon); $currentDrawer.find("input[name='coordinateY']").val(lonLat.lat); $currentDrawer.find("span[class='i-gis-not-location']").hide(); $currentDrawer.find("span[class='i-gis-location']").show(); var devices = gisMap.devices; var device = devices.get(code); device.x = lonLat.lon; device.y = lonLat.lat; if(device['marker']) { device['marker'].destroy(); gisMap.markers.removeMarker(device['marker']); } device['marker'] = gisMap.addSpecialMarker(device.x, device.y,code); device['gold'] = true; if ($currentDrawer.next().length == 1) { setTimeout(function () { activeDevice($currentDrawer.next()); $(".gis-location-info-drawer-focus a")[0].scrollIntoView(); }, 1); } } function activeDevice($currentDrawer) { $currentDrawer.siblings("li").removeClass("gis-location-info-drawer-focus"); $currentDrawer.addClass("gis-location-info-drawer-focus"); var cur_code_val = $currentDrawer.find("input[name='code']").val(); var cur_coordinateX_val = $currentDrawer.find("input[name='coordinateX']").val(); var cur_coordinateY_val = $currentDrawer.find("input[name='coordinateY']").val(); // 将特殊标记转换为普通标记 var devices = gisMap.devices; var array = devices.entrys(); for(var i = 0; i < array.length; i++) { var device = array[i].value; var code = array[i].key; if(device['gold']) { device['marker'].destroy(); gisMap.markers.removeMarker(device['marker']); device['marker'] = gisMap.addMarker(device.x, device.y,code); device['gold'] = false; } } //如果是已经选过位置的设备,还需要在地图上显示旗子 if (cur_coordinateX_val != "" && cur_coordinateY_val != "") { device = devices.get(cur_code_val); if (device['marker']) { device['marker'].destroy(); gisMap.markers.removeMarker(device['marker']); } device['marker'] = gisMap.addSpecialMarker(cur_coordinateX_val, cur_coordinateY_val ,cur_code_val); device['gold'] = true; } }
main.js(工作台)
$(document).ready(function () { window.bodyHeight = $("body > .container-fluid").height($(window).height() - $("body > .container-fluid").offset().top - $("#footer").height()); $("#app-config-table").height(window.bodyHeight - $("#app-config-table").offset().top); main.initEvent(); }); _.templateSettings = { evaluate: /{([\s\S]+?)}/g, interpolate: /{=([\s\S]+?)}/g, escape: /{-([\s\S]+?)}/g }; var main = { initEvent: function () { this.bindEvent(); this.bindColorPaper(); this.addItem(); treeSelect.init(); dialogHandle.init(); portletGrid.init(); validator.init(); this.initDialogSelect(); window.initDialogSelect = this.initDialogSelect; window.resetOnDialogOpen = this.resetOnDialogOpen; }, bindEvent: function () { var _this = this; /** * 副标题详情类别切换 */ $(document).off().on("change", "#subTitleType", function () { if ($(this).find("option:selected").val() == 1) { $(".js-subTitleEnergy").show(500); $(".js-subTitleText").hide(500); } else { $(".js-subTitleEnergy").hide(500); $(".js-subTitleText").show(500); } }); /** * 绑定dialog弹出的事件 */ $(document).on("show.bs.modal", "#addAppConfig", function () { _this.resetOnDialogOpen(); $("#addAppConfig .modal-body").height($(window).height() - 110 - 40); }); /** * 绑定新增按钮事件 */ $(document).on("click", "#add-app-btn", function () { $('#addAppConfig').find(".modal-title").text("新增portlet"); $('#addAppConfig').find("#portletType").removeProp("disabled"); $('#addAppConfig').find("#pt-addSave").show(); $('#addAppConfig').modal('show'); $(".listItem").removeClass("hide"); $('.dropdown-toggle').dropdown(); $(".colorPaper").css("background-color", "#ccc"); /*色板选择置为默认灰#ccc*/ window.initDialogSelect(); validator.resetForms(); }); $(document).on("click", "#del-app-btn", function () { var selectItems = $('#app-config-table').bootstrapTable("getSelections"); if (selectItems.length == 0) { alert("请至少选择一条记录!"); return false; } var ids = ""; for (var i = 0, l = selectItems.length; i < l; i++) { var item = selectItems[i]; if (ids == "") { ids = item.id; } else { ids = ids + "," + item.id; } } portletGrid.removePortlet(ids); }); /** * portlet的类型切换事件 */ $(document).on('change', "#portletType", function () { _this.resetOnDialogOpen(); }); $(document).on("change", "#tagId", function (e) { //if($(e.target).val()!=0){ var addItems = $('.addItem');//.trigger("click"); $.each(addItems, function (i, addItem) { var $table = $(addItem).parents("table"); $table.find("tr[class='chartItem']").remove(); $table.find("tr[class='listItem']").remove(); $(addItem).trigger("click"); }); // } }); /** * 图表类型切换 */ $(document).on('change', "#chartType", function () { if ($(this).find("option:selected").val() == 1) { $("#chartGroup2").hide(500); } else { $("#chartGroup2").show(500); } }); }, /** * 所有select事件切换的面板重置 */ resetOnDialogOpen: function () { var selectVal = $("#portletType").find("option:selected").val(); if (selectVal == 3) { $(".js-subTitleSet").hide(500); $(".js-portletListCfg").hide(100); $(".js-portletChartCfg").hide(500); $(".js-noticeDesc").hide(500); $(".js-projectDesc").show(500); } else if (selectVal == 7) { $(".js-subTitleSet").hide(500); $(".js-portletListCfg").hide(100); $(".js-portletChartCfg").hide(500); $(".js-projectDesc").hide(500); $(".js-noticeDesc").show(500); } else if (selectVal == 1) { $(".js-portletChartCfg").hide(100); $(".js-portletListCfg").show(500); $(".js-noticeDesc").hide(500); $(".js-subTitleSet").show(500); $(".js-projectDesc").hide(500); } else if (selectVal == 2) { $(".js-portletListCfg").hide(100); $(".js-noticeDesc").hide(500); $(".js-portletChartCfg").show(500); $(".js-subTitleSet").show(500); $(".js-projectDesc").hide(500); this.bindColorPaper(); } else { $(".js-subTitleSet").hide(500); $(".js-noticeDesc").hide(500); $(".js-portletListCfg").hide(100); $(".js-portletChartCfg").hide(500); $(".js-projectDesc").hide(500); } var subTitleTypeVal = $("#subTitleType").find("option:selected").val(); if (subTitleTypeVal == 1) { $(".js-subTitleEnergy").show(500); $(".js-subTitleText").hide(500); } else { $(".js-subTitleEnergy").hide(500); $(".js-subTitleText").show(500); } var chartTypeVal = $("#chartType").find("option:selected").val(); if (chartTypeVal == 1) { $("#chartGroup2").hide(500); } else { $("#chartGroup2").show(500); } $(".modal-body .dropdown").removeClass("open"); }, /** * input绑定color面板 */ bindColorPaper: function () { $(".colorPaper").off().bigColorpicker(function (el, color) { $(el).css("backgroundColor", color); $(el).siblings("input:text").val(color); validator.validateColors(); }); /*$("input:text[name=color]").bigColorpicker(function(el,color){ $(el).val(color); $(el).siblings("span").css("backgroundColor",color); });*/ }, addItem: function () { var _this = this; var listItemTpl = _.template($("#listItemTpl").text()); var chartItemTpl = _.template($("#chartItemTpl").text()); /** * 绑定添加item按钮 */ $(document).on("click", ".addItem", function () { var dataTypeName = $(this).attr("data-type"); var index, treeIdName, curEls; var itemLimit = 0; if (dataTypeName == 'listStatistics') { itemLimit = 20;//列表限制20条 curEls = $(this).parent().parent().siblings(".listItem"); if ($(this).parent().parent().siblings(".listItem:hidden").length == 1) { return $(this).parent().parent().siblings(".listItem:hidden").show(); } index = parseInt($(curEls[curEls.length - 1]).find("span.badge.flagId").text()) + 1; if (isNaN(index)) {//change tagId时用到 index = 1; } if (index > itemLimit) { alert("对不起,您至多添加" + itemLimit + "条统计"); return false; } treeIdName = dataTypeName + index; $(this).parent().parent().before(listItemTpl({ id: index, treeIdName: treeIdName, statisticsType: window.statisticsType })); } else { itemLimit = 15;//图表限制10条 curEls = $(this).parent().parent().siblings(".chartItem"); index = parseInt($(curEls[curEls.length - 1]).find("span.badge.flagId").text()) + 1; if (isNaN(index)) {//change tagId时用到 index = 1; } if (index > itemLimit) { alert("对不起,您至多能在本组中添加" + itemLimit + "条统计"); return false; } treeIdName = dataTypeName + index; $(this).parent().parent().before(chartItemTpl({id: index, treeIdName: treeIdName})); } _this.bindColorPaper(); validator.updateValidator(); $('.dropdown-toggle').dropdown(); $(".modal-body").scrollTop($(".modal-body")[0].scrollHeight); }); /** * * 绑定删除item按钮 */ $(document).on("click", ".delItem", function () { var $tr = $(this).parent().parent().siblings("tr"); if ($tr.length <= 1 && $tr.parents("#portletChartCfg").length==1) { alert("请至少保留一条统计!"); return ; } var $table = $(this).parents("table"); $(this).parent().parent().remove(); var $items = $table.find("tr[draggable]"); for (var i = 0, l = $items.length; i < l; i++) { var $item = $items.eq(i); $item.find(".flagId").text(i + 1); } $(".modal-body").scrollTop($(".modal-body")[0].scrollHeight); }); }, initDialogSelect: function () { var _this = this; $.ajax({ type: 'GET', url: pt.ctx + '/admin/portlet/viewPortlet.do', dataType: 'json', success: function (data) { window.statisticsType = data.statisticsType; var dialogContentTpl = _.template(portletGrid.cfg.dialogContentHtml); $("#addAppConfig .modal-body").html(dialogContentTpl(data)); $('.dropdown-toggle').dropdown(); validator.bindEvent(); window.resetOnDialogOpen(); // dialogHandle.dialogReset(); } }); } };