/**
* Created by lenovo on 2016/4/13.
*/
//定义全局变量,缓存组织结构
var Ems = function () {
var map = null;
var readyToUploadPoints = new Array();
var drawOverlays = new Array();
var readyToUploadMarkers = new Array();
var points = [];
var vectorMarkers = [];
return {
//添加标识器
emsAddCallBack: function () {
$('#addModal').modal('show')
},
//删除标识器
emsDelCallBack: function () {
//绘制矩形区域:
if (drawOverlays.length == 0) {
alert("请先绘制区域");
return;
}
var pointArray = new Array();
var readyToDel = "";
for (var i = 0; i < drawOverlays.length; i++) {
var layer = drawOverlays[i];
var type = drawOverlays[i].oQ;
try {
for (var j = 0; j < window.markerData.length; j++) {
var emsBean = window.markerData[j];
var bdPoint = gpsBdUtils.gcj2bd(emsBean.latitude,emsBean.longitude);
var point = new BMap.Point(bdPoint.longitude, bdPoint.latitude);
// var point = new BMap.Point(emsBean.longitude, emsBean.latitude);
if (type == "Circle") {
if (BMapLib.GeoUtils.isPointInCircle(point, layer)) {
pointArray.push(point);
readyToDel = readyToDel + emsBean.id + ",";
}
} else {
if (BMapLib.GeoUtils.isPointInPolygon(point, layer)) {
pointArray.push(point);
readyToDel = readyToDel + emsBean.id + ",";
}
}
}
}
catch (e) {
alert(e);
}
if (pointArray.length <= 0) {
alert("选择区域没有要删除的点...");
for (var i in drawOverlays) {
map.removeOverlay(drawOverlays[i]);
}
return;
}
//删除操作：
$.ajax({
type: "get",
url: $('#context').val() + "/marker/delMarkerByIds.do",
dataType: "json",
cache: false,
data: {
"ids": readyToDel
},
success: function (r) {
if (r.success) {//请求成功
window.markerData = [];
location.href = $('#context').val() + "/content/ems/ems.jsp";
// Ems.initMap();
// map.clearOverlays();
// map.setViewport(pointArray);
}
},
error: function (d) {//请求出错
alert(d.responseText);
}
});
}
},
//保存标识器
emsSaveCallBack: function () {
//TODO LIST:上传
var uploadMaker = new Array();
var pointArray = new Array();
for (var i = 0; i < readyToUploadPoints.length; i++) {
var emsBean = readyToUploadPoints[i].Tag;
var lng = readyToUploadPoints[i].point.lng;
var lat = readyToUploadPoints[i].point.lat;
var gpsPoint = gpsBdUtils.bd2gcj(lat,lng);
emsBean.longitude = gpsPoint.longitude;
emsBean.latitude = gpsPoint.latitude;
if (!emsBean.depth) {
emsBean.depth = 0;
}
uploadMaker.push(emsBean);
var point = new BMap.Point(lng, lat);
pointArray.push(point);
}
$.ajax({
type: "get",
url: $('#context').val() + "/marker/batchSave.do",
dataType: "json",
cache: false,
data: {
markers: JSON.stringify(uploadMaker)
},
success: function (r) {
if (r.success) {//请求成功
window.markerData = [];
readyToUploadPoints = [];
map.setViewport(pointArray);
Ems.clearOverlays();
}
},
error: function (d) {//请求出错
alert(d.responseText);
}
});
},
emsUploadCallBack: function () {
// map.zoomTo(map.getZoom() + 2);
//TODO LIST:弹出对应的对话框
$('#uploadModal').modal('show')
},
emsExportCallBack: function () {
//TODO LIST:选择导出的文件
// map.zoomTo(map.getZoom() + 2);
location.href = $('#context').val() + "/marker/export.do";
},
clearOverlays: function () {
for (var i = 0; i < drawOverlays.length; i++) {
map.removeOverlay(drawOverlays[i]);
}
for (var i = 0; i < readyToUploadMarkers.length; i++) {
map.removeOverlay(readyToUploadMarkers[i]);
}
drawOverlays = [];
readyToUploadMarkers = [];
},
initMap: function () {
map = new BMap.Map("container"); // 创建地图实例
var menu = new BMap.ContextMenu();
var txtMenuItem = [
{
text:'删除',
callback:function(e){
//判断右键位置是否在覆盖物内，如果在就展示菜单，如果不在就不展示
for (var i = 0; i < drawOverlays.length; i++) {
var layer = drawOverlays[i];
var type = drawOverlays[i].oQ;
if (type == "Circle") {
if (BMapLib.GeoUtils.isPointInCircle(e, layer)) {
map.removeOverlay(drawOverlays[i]);
drawOverlays.splice(i,1);
}
} else {
if (BMapLib.GeoUtils.isPointInPolygon(e, layer)||BMapLib.GeoUtils.isPointInRect(e, layer)) {
map.removeOverlay(drawOverlays[i]);
drawOverlays.splice(i,1);
}
}
}
}
}
];
for(var i=0; i < txtMenuItem.length; i++){
menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
}
map.addContextMenu(menu);
var myFun = function(result){//根据城市名进行定位
var cityName = result.name;
map.setCenter(cityName);
}
//声明全局变量
if (!window.markerData || window.markerData.length == 0) {
window.markerData = new Array();
}
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 17); // 初始化地图，设置中心点坐标和地图级别
var myCity = new BMap.LocalCity();
myCity.get(myFun);
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT });
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
map.addControl(ctrl_sca);
//创建标识器删除按钮
var addImage = $('#context').val() + "/images/ems/emsAdd.png";
var offset0 = new BMap.Size(10, 100);
var emsAddControl = new EmsControl(map, addImage, Ems.emsAddCallBack, offset0,"新增标识器");
map.addControl(emsAddControl);
//删除标识器
var delImage = $('#context').val() + "/images/ems/emsDel.png";
var offset1 = new BMap.Size(10, 170);
var emsDelControl = new EmsControl(map, delImage, Ems.emsDelCallBack, offset1,"删除标识器");
map.addControl(emsDelControl);
//删除标识器
var saveImage = $('#context').val() + "/images/ems/emsSave.png";
var offset_save = new BMap.Size(10, 240);
var emsSaveControl = new EmsControl(map, saveImage, Ems.emsSaveCallBack, offset_save,"保存标识器");
map.addControl(emsSaveControl);
//批量导出标识器数据,弹出对应的对话框
var uploadImage = $('#context').val() + "/images/ems/emsUpload.png";
var offset2 = new BMap.Size(10, 310);
var emsUploadControl = new EmsControl(map, uploadImage, Ems.emsUploadCallBack, offset2,"批量导入");
map.addControl(emsUploadControl);
//批量导出标识器数据,弹出对应的对话框
var exportImage = $('#context').val() + "/images/ems/emsExport.png";
var offset3 = new BMap.Size(10, 380);
var emsExportControl = new EmsControl(map, exportImage, Ems.emsExportCallBack, offset3,"导出Excel");
map.addControl(emsExportControl);
var clearImage = $('#context').val() + "/images/ems/clear.png";
var offset4 = new BMap.Size(10, 450);
var emsClearControl = new EmsControl(map, clearImage, Ems.clearOverlays, offset4,"清空");
map.addControl(emsClearControl);
var offset5 = new BMap.Size(10, 10);
var emsEditControl = new EmsEditControl(map, offset5);
map.addControl(emsEditControl);
//添加绘制工具
var overlaycomplete = function (e) {
e.overlay.enableEditing();
drawOverlays.push(e.overlay);
};
// var styleOptions = {
// strokeColor: "red", //边线颜色。
// fillColor: "blue", //填充颜色。当参数为空时，圆形将没有填充效果。
// strokeWeight: 3, //边线的宽度，以像素为单位。
// strokeOpacity: 0.2, //边线透明度，取值范围0 - 1。
// fillOpacity: 0.1, //填充的透明度，取值范围0 - 1。
// strokeStyle: 'solid' //边线的样式，solid或dashed。
// }
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_LEFT, //位置
offset: new BMap.Size(5, 5), //偏离值
drawingModes: [
BMAP_DRAWING_CIRCLE,
BMAP_DRAWING_POLYGON,
BMAP_DRAWING_RECTANGLE
]
}
});
//添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
//加载完毕请求标识点信息
map.addEventListener("tilesloaded", function () {
if (window.markerData.length == 0) {
$.ajax({
type: "get",
url: $('#context').val() + "/marker/all-point-list.do",
dataType: "json",
// async:false,
cache: false,
success: function (r) {
if (r.data) {//请求成功，将获取到的数据加载到地图上
//1.解析返回的结果,.设置全局变量data的值
window.markerData = [];//清空原来的数据
for (var t = 0; t < r.data.length; t++) {
var markerDto = r.data[t];
var markerDep = markerDto.markerDepth==null?"--":markerDto.markerDepth;
var emsBean = new EMSBean(markerDto.markerId, markerDto.markerName, markerDto.latitude, markerDto.longitude,
markerDto.depth, markerDto.ownerComp, markerDto.createTime, markerDto.markerObjectType,
markerDto.markerObjectName, null, null, null, markerDto.mileage, markerDto.mileage2, markerDto.memo, markerDto.id,markerDto.featureName,markerDto.lineName,markerDep);
window.markerData[t] = emsBean;
}
//2.增加marker
Ems.addMarker(window.markerData);
}
},
error: function (d) {//请求出错
alert(d.responseText);
}
});
} else {
Ems.addMarker(window.markerData);
}
});
},
initForm: function () {
$('#select_area').select2({
placeholder: "片区选择",
allowClear: true
});
$("#resetEms").live("click", function (e) {
$("#addEmsID").val("");
$("#markerName1").val("");
$("#addObjType").val("");
$("#company").val("");
$("#creator").val("");
$("#addDepth").val("");
$("#mileStone3").val("");
$("#mileStone31").val("");
$("#mileStone4").val("");
$("#mileStone41").val("");
$("#markerDepth").val("");
$("#addMemo").val("");
});
$('#localize').click(function (e) {
$('#addModal').modal('hide');
//注册地图点击事件
function showInfo(e) {
map.removeEventListener("click", showInfo);
var lng = e.point.lng;
var lat = e.point.lat;
var gpsPoint = gpsBdUtils.bd2gcj(lat,lng);
//TODO LIST:获取填写表单的信息 所属区域也需要保存的
var araId = $("#addselAra").val();
var lineId = $("#addselLine").val();
var emsId = $("#addEmsID").val();
var markerName = $("#markerName1").val();
var company = $("#company").val();
var markObjType = $("#addObjType").val();
var creator = $("#creator").val();
var addDepth = $("#addDepth").val();
var mileStone1 = $("#mileStone3").val()+"Km+"+ $("#mileStone31").val()+"m";
var mileStone2 = $("#mileStone4").val()+"Km+"+ $("#mileStone41").val()+"m";
var memo = $("#addMemo").val();
var markerDepth = $("#markerDepth").val();//新增标识器埋深
var emsBean = new EMSBean(emsId, markerName, gpsPoint.latitude, gpsPoint.longitude, addDepth, company,
null, markObjType, null, araId, lineId, creator, mileStone1, mileStone2, memo,null,null,null,markerDepth);
// var emsBean = new EMSBean(emsId, markerName, lat, lng, addDepth, company,
// null, markObjType, null, araId, lineId, creator, mileStone1, mileStone2, memo);
var marker = new BMap.Marker(new BMap.Point(lng, lat)); // 创建点
marker.addEventListener("click", attribute);
marker.Tag = emsBean;
map.addOverlay(marker); //增加点
marker.enableDragging();
readyToUploadMarkers.push(marker);
readyToUploadPoints.push(marker);
function attribute() {
// var p = marker.getPosition();
var emsBean2 = marker.Tag;
var searchInfoWindow = null;
var msg ="编  号:" + emsBean2.markerId + "<br/>" +
"对象类型:" + emsBean2.markerObjectType + "<br/>" +
"管线埋深:" + emsBean2.depth + "<br/>" +
"标识器埋深:" + emsBean2.markerDepth + "<br/>" +
"权属单位:" + emsBean2.ownerComp + "<br/>" +
"安装时间:" + emsBean2.createTime + "<br/>" +
"里程1:" + emsBean2.mileage + "<br/>" +
"里程2:" + emsBean2.mileage2 + "<br/>" +
"备注:" + emsBean2.memo + "<br/>";
var imgUrl = $('#context').val() + "/images/ems.jpg";
var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
'<img src=' + '"' + imgUrl + '"' + ' alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
msg +
'</div>';
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title: emsBean.markerName, //标题
width: 290, //宽度
height: 185, //高度
panel: "panel", //检索结果面板
enableAutoPan: true //自动平移
});
searchInfoWindow.open(marker.getPosition());
}
}
map.addEventListener("click", showInfo);
});
$("#searchMarker").live("click", function (e) {
var Marker = {};
if(vectorMarkers.length!=0){
for(var i = 0;i<vectorMarkers.length;i++)
map.removeOverlay(vectorMarkers[i]);
}
vectorMarkers = [];
Marker.markerName = $("#markerName").val();
Marker.featureId = $("#select_area").val() ? $("#select_area").val() : null;
Marker.lineId = $("#select_line").val() ? $("#select_line").val() : null;
Marker.mileage = $("#mileStone1").val();
Marker.mileage2 = $("#mileStone2").val();
Marker.memo = $("#memo").val();
//请求后台的id列表，然后遍历marker列表，修改marker的颜色
$.ajax({
type: "POST",
url: $('#context').val() + "/marker/getMarkerIdList.do",
data: {"strMarkerDto": JSON.stringify(Marker)},
// data: {"parentId": featureId, "markerName": markerName},
dataType: "json",
success: function (r) {
if (r.data) {
var pointArray = new Array();
if (r.data.length > 1000) {
alert("有超过一千个点符合筛选条件，会造成浏览器卡顿，请重新选择");
} else {
if (r.data.length == 0) {
alert("没有搜到符合条件的标识器");
// location.href = $('#context').val() + "/content/ems/ems.jsp";
return;
}
for (var a in r.data) {//遍历列表，添加marker
var bdpoint = gpsBdUtils.gcj2bd(r.data[a].latitude,r.data[a].longitude);
var point = new BMap.Point(bdpoint.longitude,bdpoint.latitude);
// var point = new BMap.Point(r.data[a].longitude, r.data[a].latitude);
// var marker = new BMap.Marker(point); // 创建标注
var vectorMarker = new BMap.Marker(new BMap.Point(point.lng, point.lat), {
// 指定Marker的icon属性为Symbol
icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
scale: 1,//图标缩放大小
fillColor: "green",//填充颜色
fillOpacity: 0.8//填充透明度
})
});
vectorMarkers.push(vectorMarker);
map.addOverlay(vectorMarker);
pointArray.push(point);
}
map.setViewport(pointArray);
}
}
},
error: function (request) {
//提示错误信息
alert(r.message);
}
});
});
},
//获取Feature的列表
initAreasArray: function (type, domId) {
$.ajax({
type: "POST",
url: $('#context').val() + "/feature/getFeature.do",
data: {"type": type},
dataType: "json",
success: function (r) {
//获取面的列表，将下拉列表初始化
if (r.data) {
for (var area in r.data) {
// alert(r.data[area].id+":"+r.data[area].featureName);
var dataArea = r.data[area];
$("#" + domId).append(" <option value=" + dataArea.id + ">" + dataArea.featureName + "</option>")
}
if (domId != "select_area") {
$("#" + domId).chosen();
}
}
},
error: function (request) {
//提示错误信息
alert(r.message);
}
});
},
initSelect: function () {
Ems.initAreasArray(1, "select_area");
Ems.initAreasArray(2, "select_line");
},
initAddMarkerSelect: function () {
Ems.initAreasArray(1, "addselAra");
Ems.initAreasArray(2, "addselLine");
},
addMarker: function (data) {
if (document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点
var points = []; // 添加海量点数据
for (var i = 0; i < data.length; i++) {
// var point = new BMap.Point(data[i].longitude, data[i].latitude);
// point.Tag = data[i];
// points.push(point);
var bdPoint = gpsBdUtils.gcj2bd(data[i].latitude,data[i].longitude);
var point = new BMap.Point(bdPoint.longitude, bdPoint.latitude);
point.Tag = data[i];
points.push(point);
}
var options = {
size: BMAP_POINT_SIZE_NORMAL,
shape: BMAP_POINT_SHAPE_WATERDROP,
color: '#009acd'
};
var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection
pointCollection.addEventListener('click', function (e) {
var emsBean = e.point.Tag;
var searchInfoWindow = null;
var msg = "编  号:" + emsBean.markerId + "<br/>" +
"所属区域:" + emsBean.featureName + "<br/>" +
"所属线路:" + emsBean.lineName + "<br/>" +
"对象类型:" + emsBean.markerObjectType + "<br/>" +
"管线埋深:" + emsBean.depth + "<br/>" +
"标识器埋深:" + emsBean.markerDepth + "<br/>" +
"权属单位:" + emsBean.ownerComp + "<br/>" +
"安装时间:" + emsBean.createTime + "<br/>" +
"里程1:" + emsBean.mileage + "<br/>" +
"里程2:" + emsBean.mileage2 + "<br/>" +
"备注:" + emsBean.memo + "<br/>";
var imgUrl = $('#context').val() + "/images/ems.jpg";
var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
'<img src=' + '"' + imgUrl + '"' + ' alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
msg +
'</div>';
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title: emsBean.markerName, //标题
width: 290, //宽度
height: 225, //高度
panel: "panel", //检索结果面板
enableAutoPan: true //自动平移
});
searchInfoWindow.open(e.point);
$(".BMapLib_search_text").css("padding", "0");
$(".BMapLib_search_text").css("margin-bottom", "0");
$(".BMapLib_trans_text").css("padding", "0");
$(".BMapLib_trans_text").css("margin-bottom", "0");
});
map.addOverlay(pointCollection); // 添加Overlay
} else {
alert('请在chrome、safari、IE8+以上浏览器查看本示例');
}
}
};
}();
