417 lines
14 KiB
JavaScript
417 lines
14 KiB
JavaScript
let terrainMap;
|
||
|
||
// 初始化地图
|
||
function initMap(type) {
|
||
createMap(type); // 创建地图
|
||
madeBoundary(); //加载区域图
|
||
addMapControl(); // 添加自定义控件
|
||
setMapEvent(); //地图控件设置
|
||
$('#allMap').css({ 'zIndex': 999, 'backgroundColor': 'transparent' });
|
||
clearOverlay(type)
|
||
}
|
||
|
||
// 初始化地图
|
||
function initMap2(type) {
|
||
createMap2(type); // 创建地图
|
||
madeBoundary(); //加载区域图
|
||
addMapControl(); // 添加自定义控件
|
||
setMapEvent(); //地图控件设置
|
||
$('#allMap').css({ 'zIndex': 999, 'backgroundColor': 'transparent' });
|
||
getSignProAjax();
|
||
}
|
||
|
||
// 设置杆塔连线
|
||
function setTowerLine(gtList,proName){
|
||
let allOverlayList = terrainMap.getOverlays();
|
||
//循坏所有点并清除指定的点
|
||
if (allOverlayList.length > 0) {
|
||
for (let i = 0; i < allOverlayList.length; i++) {
|
||
console.log(allOverlayList[i].toString());
|
||
if (allOverlayList[i].toString() == "[object Label]" || allOverlayList[i].toString() == "[object Marker]" || allOverlayList[i].toString() == "[object Polyline]") {
|
||
terrainMap.removeOverlay(allOverlayList[i]);
|
||
}
|
||
}
|
||
}
|
||
if(gtList && gtList.length === 0){
|
||
return;
|
||
}
|
||
var points=[];
|
||
for(var i = 0; i < gtList.length; i++) {
|
||
var point=new Object();
|
||
point.lng=gtList[i].lon;
|
||
point.lat=gtList[i].lat;
|
||
point.proName=proName;
|
||
point.img = '../../img/map/bdz.png';
|
||
point.place=gtList[i].towerName;
|
||
points.push(point);
|
||
}
|
||
console.log(points)
|
||
for(var i=0, len = points.length; i<len; i++) {
|
||
//自定义图标
|
||
var pointIcon = new BMap.Icon(points[i].img,new BMap.Size(27,27));
|
||
//将标注点转化为地图上的点
|
||
var point = new BMap.Point(points[i].lat, points[i].lng);
|
||
var infoWindow = new BMap.InfoWindow( points[i].place);
|
||
//将点转化为标注点
|
||
var marker = new BMap.Marker(point,{icon:pointIcon});
|
||
//添加点图层
|
||
terrainMap.addOverlay(marker);
|
||
(function() {
|
||
let title= '<p class="map-p">工程名称：' + points[i].proName+ '</p>' +
|
||
'<p class="map-p">杆塔名称：' + points[i].place + '</p>' +
|
||
'<p class="map-p">经度：' +points[i].lat + '</p>' +
|
||
'<p class="map-p">维度：' + points[i].lng+ '</p>';
|
||
|
||
//创建label图层 points[i].place
|
||
var label = new BMap.Label(title,{position:point});
|
||
marker.addEventListener("mouseover",function() {
|
||
terrainMap.addOverlay(label);
|
||
});
|
||
marker.addEventListener("mouseout",function() {
|
||
terrainMap.removeOverlay(label);
|
||
});
|
||
})();
|
||
}
|
||
//将所有点连线，连线图层polyline
|
||
var line = [];
|
||
for(var i=0; i<points.length; i++){
|
||
console.log(points[i].lng, points[i].lat)
|
||
line.push(new BMap.Point(points[i].lat, points[i].lng));
|
||
}
|
||
line.push(new BMap.Point(points[0].lat, points[0].lng));
|
||
console.log(line,'line')
|
||
console.log(line)
|
||
var polyline = new BMap.Polyline(line,{strokeColor:'#00aa00',strokeWeight:2,strokeOpacity:1});
|
||
terrainMap.addOverlay(polyline);
|
||
terrainMap.centerAndZoom(line[0],9); //设置中心点和缩放层级
|
||
}
|
||
|
||
function getTitle(points) {
|
||
console.log(points);
|
||
return
|
||
|
||
}
|
||
//地图设置start
|
||
function setMapEvent() {
|
||
terrainMap.enableScrollWheelZoom();
|
||
terrainMap.enableKeyboard();
|
||
terrainMap.enableDragging();
|
||
terrainMap.enableDoubleClickZoom();
|
||
}
|
||
|
||
//地图设置end
|
||
|
||
// 创建地图
|
||
function createMap() {
|
||
terrainMap = new BMap.Map("allMap", {
|
||
mapType: BMAP_HYBRID_MAP
|
||
}); // 创建Map实例
|
||
terrainMap.centerAndZoom('合肥', 8); // 初始化地图,设置中心点坐标和地图级别
|
||
//添加地图类型控件
|
||
// terrainMap.addControl(new BMap.MapTypeControl({
|
||
// mapTypes: [
|
||
// BMAP_NORMAL_MAP,
|
||
// BMAP_HYBRID_MAP
|
||
// ]
|
||
// }));
|
||
terrainMap.setCurrentCity("合肥"); // 设置地图显示的城市 此项是必须设置的
|
||
|
||
}
|
||
// 创建地图
|
||
function createMap2() {
|
||
terrainMap = new BMap.Map("allMap", {
|
||
// mapType: BMAP_HYBRID_MAP
|
||
}); // 创建Map实例
|
||
terrainMap.centerAndZoom('合肥', 8); // 初始化地图,设置中心点坐标和地图级别
|
||
//添加地图类型控件
|
||
// terrainMap.addControl(new BMap.MapTypeControl({
|
||
// mapTypes: [
|
||
// BMAP_NORMAL_MAP,
|
||
// BMAP_HYBRID_MAP
|
||
// ]
|
||
// }));
|
||
// terrainMap.setCurrentCity("合肥"); // 设置地图显示的城市 此项是必须设置的
|
||
|
||
}
|
||
//设置区域图 start
|
||
function madeBoundary() {
|
||
let datas = new Array("安徽省-");
|
||
var bdary = new BMap.Boundary();
|
||
for (var i = 0; i < datas.length; i++) {
|
||
getBoundary(datas[i], bdary);
|
||
}
|
||
}
|
||
|
||
function getBoundary(data, bdary) {
|
||
data = data.split("-");
|
||
bdary.get(data[0], function (rs) { //获取行政区域
|
||
var count = rs.boundaries.length; //行政区域的点有多少个
|
||
var pointArray = [];
|
||
for (var i = 0; i < count; i++) {
|
||
var ply = new BMap.Polygon(rs.boundaries[i], {
|
||
strokeWeight: 3,
|
||
strokeColor: "#1066FC",
|
||
fillOpacity: 1,
|
||
fillColor: data[1]
|
||
}); //建立多边形覆盖物
|
||
terrainMap.addOverlay(ply); //添加覆盖物
|
||
}
|
||
});
|
||
}
|
||
|
||
// 设置区域图end
|
||
//向地图添加控件start
|
||
function addMapControl() {
|
||
var mystyleJson = [{
|
||
"featureType": "road",
|
||
"elementType": "all",
|
||
"stylers": {
|
||
"lightness": 20
|
||
}
|
||
},
|
||
{
|
||
"featureType": "railway",
|
||
"elementType": "all",
|
||
"stylers": {
|
||
"visibility": "off"
|
||
}
|
||
},
|
||
{
|
||
"featureType": "local",
|
||
"elementType": "labels",
|
||
"stylers": {
|
||
"visibility": "off"
|
||
}
|
||
},
|
||
{
|
||
"featureType": "water",
|
||
"elementType": "all",
|
||
"stylers": {
|
||
"color": "#d1e5ff"
|
||
}
|
||
},
|
||
{
|
||
"featureType": "highway",
|
||
"elementType": "labels",
|
||
"stylers": {}
|
||
}
|
||
];
|
||
terrainMap.setMapStyle({
|
||
styleJson: mystyleJson
|
||
});
|
||
}
|
||
|
||
//向地图添加控件end
|
||
|
||
//创建地图覆盖物start
|
||
function createMarker(obj) { //创建地图覆盖物
|
||
var cent = "";
|
||
var pt = new BMap.Point(obj.lon, obj.lat);
|
||
var myIcon = getIcon(obj);
|
||
var marker = new BMap.Marker(pt, {
|
||
icon: myIcon
|
||
});
|
||
addClickHandler(marker, obj);
|
||
return marker;
|
||
}
|
||
|
||
//设置风险图标
|
||
function getIcon(data) {
|
||
let url = "";
|
||
let warnNum = Number(data.num) + 1;
|
||
if (data.riskType === '2') {
|
||
url = getImgUrl(2, warnNum, data.proName);
|
||
} else if (data.riskType === '3') {
|
||
url = getImgUrl(3, warnNum, data.proName);
|
||
} else if (data.riskType === '4') {
|
||
url = getImgUrl(4, warnNum, data.proName);
|
||
} else if (data.riskType === '5') {
|
||
url = getImgUrl(5, warnNum, data.proName);
|
||
}
|
||
var myIcon = new BMap.Icon(url, new BMap.Size(33, 33), { //图片大小
|
||
anchor: new BMap.Size(10, 25), //标注相对point的偏移位置
|
||
});
|
||
myIcon.setImageSize(new BMap.Size(22, 22)) //重点重点，设置图片大小
|
||
// return icon = new BMap.Icon(url, new BMap.Size(33, 33));
|
||
// icon.setImageSize(new BMap.Size(10,12)) //重点重点，设置图片大小
|
||
return myIcon;
|
||
}
|
||
function getImgUrl(type, num, proName) {
|
||
if (proName.indexOf('变电站') != -1 && proName.indexOf('线路') == -1) {
|
||
if (type == 2) {
|
||
return '../../img/map/bdz2.png';
|
||
} else if (type == 3) {
|
||
return '../../img/map/bdz3.png';
|
||
} else if (type == 4) {
|
||
return '../../img/map/bdz4.png';
|
||
} else if (type == 5) {
|
||
return '../../img/map/bdz5.png';
|
||
}
|
||
} else {
|
||
if (type == 2) {
|
||
return '../../img/map/two-risk' + num + '.png';
|
||
} else if (type == 3) {
|
||
return '../../img/map/three-risk' + num + '.png';
|
||
} else if (type == 4) {
|
||
return '../../img/map/four-risk' + num + '.png';
|
||
} else if (type == 5) {
|
||
return '../../img/map/five-risk' + num + '.png';
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
/* 设置天气图标 */
|
||
function getWeatherIcon(data) {
|
||
let url = "";
|
||
if (data.indexOf("晴") !== -1) {
|
||
url = '../../img/compreDisplay/weather/fine.png';
|
||
} else if (data.indexOf("多云") !== -1) {
|
||
url = '../../img/compreDisplay/weather/partlyCloudy.png';
|
||
} else if (data.indexOf("阴") !== -1) {
|
||
url = '../../img/compreDisplay/weather/shade.png';
|
||
} else if (data.indexOf("小雨") !== -1) {
|
||
url = '../../img/compreDisplay/weather/lightRain.png';
|
||
} else if (data.indexOf("中雨") !== -1) {
|
||
url = '../../img/compreDisplay/weather/moderateRain.png';
|
||
} else if (data.indexOf("大雨") !== -1) {
|
||
url = '../../img/compreDisplay/weather/heavyRain.png';
|
||
} else if (data.indexOf("雷阵雨") !== -1) {
|
||
url = '../../img/compreDisplay/weather/thunderstorm.png';
|
||
} else if (data.indexOf("小雪") !== -1) {
|
||
url = '../../img/compreDisplay/weather/snow.png';
|
||
} else if (data.indexOf("中雪") !== -1) {
|
||
url = '../../img/compreDisplay/weather/moderateRain.png';
|
||
} else if (data.indexOf("大雪") !== -1) {
|
||
url = '../../img/compreDisplay/weather/heavySnow.png';
|
||
} else if (data.indexOf("大风") !== -1) {
|
||
url = '../../img/compreDisplay/weather/gale.png';
|
||
} else if (data.indexOf("雨夹雪") !== -1) {
|
||
url = '../../img/compreDisplay/weather/sleet.png';
|
||
} else if (data.indexOf("雾") !== -1) {
|
||
url = '../../img/compreDisplay/weather/fog.png';
|
||
} else if (data.indexOf("雾霾") !== -1) {
|
||
url = '../../img/compreDisplay/weather/smog.png';
|
||
} else if (data.indexOf("浮尘") !== -1) {
|
||
url = '../../img/compreDisplay/weather/sinkFloat.png';
|
||
} else if (data.indexOf("沙尘暴") !== -1) {
|
||
url = '../../img/compreDisplay/weather/sandstorm.png';
|
||
}
|
||
return url;
|
||
}
|
||
|
||
//覆盖物事件start
|
||
function addClickHandler(marker, obj) {
|
||
let steelContent = '<div><p class="terrain-map-p">' + obj.proName + '</p>' +
|
||
'<p class="terrain-map-p">风险等级：' + setRiskLevelColor(obj.riskType) + '</p>' +
|
||
'<p class="terrain-map-p" title="' + obj.workContent + '">作业内容：' + sliceStr(obj.workContent) + '</p>' +
|
||
'<p class="terrain-map-p">班组长：' + dealEmptyString(obj.workManage) + ' ' + dealEmptyString(obj.workManagePhone) + '</p>' +
|
||
'<p class="terrain-map-p">预警数量：' + obj.num + '</p></div>' +
|
||
'<p class="terrain-map-p">球机：' + isOnline(obj.ballStatus) + '</p></div>';
|
||
let steelOpts = {
|
||
width: 300, //信息窗口宽度
|
||
height: 180, //信息窗口高度
|
||
enableMessage: false //设置允许信息窗发送短息
|
||
};
|
||
marker.addEventListener("mouseover", function (e) {
|
||
this.openInfoWindow(new BMap.InfoWindow(steelContent, steelOpts));
|
||
});
|
||
/* marker.addEventListener("mouseout", function () {
|
||
this.closeInfoWindow();
|
||
}
|
||
);*/
|
||
}
|
||
|
||
/*清除地形图覆盖物 */
|
||
function clearOverlay(type) {
|
||
let allOverlayList = terrainMap.getOverlays();
|
||
//循坏所有点并清除指定的点
|
||
if (allOverlayList.length > 0) {
|
||
for (let i = 0; i < allOverlayList.length; i++) {
|
||
if (allOverlayList[i].toString() == "[object Label]" || allOverlayList[i].toString() == "[object Marker]") {
|
||
terrainMap.removeOverlay(allOverlayList[i]);
|
||
}
|
||
}
|
||
}
|
||
if (type === 1) {
|
||
// 添加点覆盖物
|
||
for (let i = 0; i < mapPointList.length; i++) {
|
||
terrainMap.addOverlay(createMarker(mapPointList[i]));
|
||
}
|
||
} else if (type === 2) {
|
||
$.each(showWeatherList, function (index, item) {
|
||
let point = new BMap.Point(item.lon, item.lat);
|
||
let content = "<div class='labelStyle layout'>" +
|
||
"<div class='temp layout'><p>" + item.cictyName + "</p><p>" + item.currentTemp + "</p><img src=" + getWeatherIcon(item.weatherStatus) + "></div>" +
|
||
"<div class='temp layout'><p>" + item.weatherDes + "</p></div>" +
|
||
"</div>";
|
||
let label = new BMap.Label(content, { // 创建文本标注
|
||
position: point,
|
||
offset: new BMap.Size(-60, -40)
|
||
})
|
||
terrainMap.addOverlay(label);
|
||
})
|
||
}
|
||
}
|
||
|
||
// 单项工程
|
||
function getSignProAjax() {
|
||
let url = dataUrl + 'proteam/pot/bidTowerMain/getSingleProList';
|
||
let params = {};
|
||
ajaxRequest(url, "POST", params, true, function () {
|
||
}, function (result) {
|
||
console.log(result);
|
||
if (parseInt(result.code) == 200) {
|
||
setData(result.data);
|
||
} else if (parseInt(result.code) === 500) {
|
||
layer.alert('服务异常', { icon: 2 })
|
||
} else if (parseInt(result.code) === 401) {
|
||
logout(1);
|
||
}
|
||
}, function (xhr) {
|
||
|
||
});
|
||
function setData(bidCodeList){
|
||
let html = '';
|
||
if (bidCodeList && bidCodeList.length > 0) {
|
||
$.each(bidCodeList, function (index, item) {
|
||
if(index === 0){
|
||
html += '<option value="' + (item.proNo + "@" + item.proName) + '" checked>' + (item.proName + '（'+item.num+'）') + '</option>'
|
||
getSignProTowerAjax(item.proNo,item.proName);
|
||
}else{
|
||
html += '<option value="' + (item.proNo + "@" + item.proName) + '">' + (item.proName + '（'+item.num+'）') + '</option>'
|
||
}
|
||
})
|
||
}
|
||
$('#bidPro').empty().append(html);
|
||
layui.form.render();
|
||
}
|
||
}
|
||
|
||
// 单项工程->杆塔
|
||
function getSignProTowerAjax(proNo,proName) {
|
||
let url = dataUrl + 'proteam/pot/bidTowerMain/getSignProTowerById';
|
||
let params = {'proNo':proNo};
|
||
ajaxRequest(url, "POST", params, true, function () {
|
||
}, function (result) {
|
||
console.log(result);
|
||
if (parseInt(result.code) == 200) {
|
||
setData(result.data,proName);
|
||
} else if (parseInt(result.code) === 500) {
|
||
layer.alert('服务异常', { icon: 2 })
|
||
} else if (parseInt(result.code) === 401) {
|
||
logout(1);
|
||
}
|
||
}, function (xhr) {
|
||
|
||
});
|
||
|
||
function setData(data,proName){
|
||
setTimeout(() => {
|
||
setTowerLine(data,proName);
|
||
}, 2000);
|
||
}
|
||
} |