You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
279 lines
11 KiB
279 lines
11 KiB
11 months ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title></title>
|
||
|
|
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
|
||
|
|
<!--<script src="https://webapi.amap.com/maps?v=1.4.15&key=9a8223989b188cb6ef0fb1fde4fd748a"></script>-->
|
||
|
|
<script src="https://webapi.amap.com/maps?v=1.4.15&key=55d9d8a1e64f4f968213df505979cc4b"></script>
|
||
|
|
<script src="https://webapi.amap.com/maps?v=1.4.15&key=55d9d8a1e64f4f968213df505979cc4b&plugin=AMap.MouseTool,AMap.MarkerClusterer,AMap.ToolBar"></script>
|
||
|
|
<script src="../../js/jquery-2.1.3.min.js"></script>
|
||
|
|
<script src="../../js/jq_extend.js"></script>
|
||
|
|
<style>
|
||
|
|
html, body, #container {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.amap-icon img {
|
||
|
|
width: 25px;
|
||
|
|
height: 34px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.amap-marker-label {
|
||
|
|
border: 0;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info {
|
||
|
|
position: relative;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.amap-logo .amap-copyright {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="container"></div>
|
||
|
|
<script>
|
||
|
|
var OrgId = JSON.parse(window.sessionStorage.getItem("userInfo")).OrgID;
|
||
|
|
//根据当前登陆人机构ID获取机构所在经纬度
|
||
|
|
$.ajax({
|
||
|
|
type: "post",
|
||
|
|
url: "../../ashx/FireOrgHandler.ashx",
|
||
|
|
data: { Action: "getFireOrgName", ID: OrgId },
|
||
|
|
dataType: "json",
|
||
|
|
success: function (result) {
|
||
|
|
initMap(result.data.LON, result.data.LAT, result.data.CITY);
|
||
|
|
initWork.getData();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
var TaskId = $.getUrlVar("TaskId");
|
||
|
|
var infoWindow;
|
||
|
|
/**
|
||
|
|
* 初始化地图
|
||
|
|
* @param lon 经度（GCJ－02坐标系）
|
||
|
|
* @param lat 纬度（GCJ－02坐标系）
|
||
|
|
*/
|
||
|
|
var initMap = function (lon, lat) {
|
||
|
|
if (lon == null || lon == "" || lat == null || lat == "") {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
map = new AMap.Map('container', {
|
||
|
|
resizeEnable: true,
|
||
|
|
center: [lon, lat],
|
||
|
|
zoom: 16
|
||
|
|
});
|
||
|
|
infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
|
||
|
|
}
|
||
|
|
|
||
|
|
var initWork = {
|
||
|
|
/**
|
||
|
|
* 根据请假ID获取请假期间打卡记录
|
||
|
|
* */
|
||
|
|
getData: function () {
|
||
|
|
$.ajax({
|
||
|
|
type: "post",
|
||
|
|
url: "../../ashx/OaRollcallRecordHandler.ashx",
|
||
|
|
data: { Action: "RollcallRecordList", TASK_ID: TaskId },
|
||
|
|
dataType: "json",
|
||
|
|
success: function (result) {
|
||
|
|
result.data.forEach(function (item) {
|
||
|
|
if (item.LOCATION.indexOf(",") >= 0) {
|
||
|
|
initWork.showData(
|
||
|
|
Number(item.LOCATION.split(",")[0]),
|
||
|
|
Number(item.LOCATION.split(",")[1]),
|
||
|
|
item.REPORT_TIME,
|
||
|
|
item.USERS_NAME,
|
||
|
|
item.REMARKS
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
ClusterMapfun();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 地图点位渲染
|
||
|
|
* @param lon 经度（GCJ－02坐标系）
|
||
|
|
* @param lat 纬度（GCJ－02坐标系）
|
||
|
|
* @param time 上报时间
|
||
|
|
* @param name 上报人姓名
|
||
|
|
* @param remarks
|
||
|
|
*/
|
||
|
|
showData: function (lon, lat, time, name, remarks) {
|
||
|
|
var marker = new AMap.Marker({
|
||
|
|
position: [lon, lat],
|
||
|
|
icon: '../../images/poi-marker-default.png',
|
||
|
|
offset: new AMap.Pixel(-13, -30)
|
||
|
|
|
||
|
|
});
|
||
|
|
marker.setMap(map);
|
||
|
|
marker.setTitle(name);
|
||
|
|
marker.setExtData("<div style='font-weight: bold;height:24px;'><span style='width:120px;display:inline-block;'>" + time + "</span> " + name + "</div>");
|
||
|
|
//marker.setLabel({
|
||
|
|
// offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
|
||
|
|
// content: "<div class='info'><span style='font-weight: bold'>" + time + "</span><p>" + name + "</p><p>" + remarks + "</p></div>", //设置文本标注内容
|
||
|
|
// direction: 'top' //设置文本标注方位
|
||
|
|
//});
|
||
|
|
|
||
|
|
marker.content = "<div class='info'><span style='font-weight: bold'>" + name + " " + time + "</span><p>" + remarks + "</p></div>";
|
||
|
|
marker.on('click', markerClick);
|
||
|
|
// 添加点标注滑入事件
|
||
|
|
marker.on('mouseover', (e) => {
|
||
|
|
console.log(e)
|
||
|
|
infoWindow.setContent(e.target.content);
|
||
|
|
infoWindow.open(map, e.target.getPosition());
|
||
|
|
})
|
||
|
|
// 添加点标注滑出事件
|
||
|
|
marker.on('mouseout', (e) => {
|
||
|
|
// console.log(infoWindow)
|
||
|
|
//infoWindow.(map, e.target.getPosition());
|
||
|
|
//infoWindow.hideInfoWindow()
|
||
|
|
if (infoWindow != null) {
|
||
|
|
infoWindow.close();
|
||
|
|
//infoWindow.clearInfoWindow();
|
||
|
|
//infoWindow.hideInfoWindow();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
markers.push(marker);
|
||
|
|
//marker.on('rightclick', markerRightClick);
|
||
|
|
//markers.push(marker);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//地图图标左键事件
|
||
|
|
function markerClick(e) {
|
||
|
|
infoWindow.setContent(e.target.content);
|
||
|
|
infoWindow.open(map, e.target.getPosition());
|
||
|
|
}
|
||
|
|
var cluster, markers = [];
|
||
|
|
|
||
|
|
// 聚合标注滑入事件
|
||
|
|
var hanldeBubble = (e) => {
|
||
|
|
// 滑入聚合标记需要执行的事件
|
||
|
|
//console.log(e.target.extData);
|
||
|
|
if (e.target.extData.length < 30) {
|
||
|
|
|
||
|
|
var divHtml = "";
|
||
|
|
e.target.extData.forEach((item) => {
|
||
|
|
//extData.push({
|
||
|
|
// name: item.w.name,
|
||
|
|
// content: item.content
|
||
|
|
//})
|
||
|
|
divHtml += item.content;
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
infoWindow.setContent(divHtml);
|
||
|
|
infoWindow.open(map, e.target.getPosition());
|
||
|
|
} else {
|
||
|
|
infoWindow.setContent("<div><b>数量太多，点击展开后查看详情</b></div>");
|
||
|
|
infoWindow.open(map, e.target.getPosition());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 聚合标注滑出事件
|
||
|
|
var cancleBubble = (e) => {
|
||
|
|
// 滑出聚合标记需要执行的事件
|
||
|
|
if (infoWindow != null) {
|
||
|
|
infoWindow.close();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
var _renderClusterMarker = (context) => {
|
||
|
|
////移除上一次添加的滑入滑出事件，由于每次移动、放大缩小地图都会重新计算渲染聚合标注，因此必须移除之前的事件，否则事件会不断叠加导致重复
|
||
|
|
context.marker.off('mouseover', hanldeBubble)
|
||
|
|
context.marker.off('mouseout', cancleBubble)
|
||
|
|
//添加本次产生的新聚合标记的滑入滑出事件
|
||
|
|
context.marker.on('mouseover', hanldeBubble)
|
||
|
|
context.marker.on('mouseout', cancleBubble)
|
||
|
|
var extData = []
|
||
|
|
context.markers.forEach((item) => {
|
||
|
|
//console.log(item);
|
||
|
|
//console.log(item.getExtData());
|
||
|
|
|
||
|
|
//console.log(111);
|
||
|
|
extData.push({
|
||
|
|
name: item.getTitle(),
|
||
|
|
content: item.getExtData()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
// 将标记名称等存入marker的拓展信息字段extData中
|
||
|
|
context.marker.extData = extData;
|
||
|
|
var count = this.markers.length;
|
||
|
|
var factor = Math.pow(context.count / count, 1 / 18);
|
||
|
|
var div = document.createElement('div');
|
||
|
|
var Hue = 180 - factor * 180;
|
||
|
|
var bgColor = "#3D93FD"
|
||
|
|
var fontColor = '#ffffff';
|
||
|
|
var borderColor = '#ffffff';
|
||
|
|
var shadowColor = 'rgba(0,0,0,0.3)';
|
||
|
|
div.style.backgroundColor = bgColor;
|
||
|
|
//标记的大小可以固定写，也可以根据聚合点的数量来决定大小
|
||
|
|
var size = 30
|
||
|
|
// let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
|
||
|
|
div.style.width = div.style.height = size + 'px';
|
||
|
|
div.style.border = 'solid 2px ' + borderColor;
|
||
|
|
div.style.borderRadius = size / 2 + 'px';
|
||
|
|
div.style.boxShadow = '0 0 12px ' + shadowColor;
|
||
|
|
div.innerHTML = context.count;
|
||
|
|
div.style.lineHeight = (size - 2) + 'px';
|
||
|
|
div.style.color = fontColor;
|
||
|
|
div.style.fontSize = '14px';
|
||
|
|
div.style.textAlign = 'center';
|
||
|
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
|
||
|
|
context.marker.setContent(div)
|
||
|
|
}
|
||
|
|
|
||
|
|
var ClusterMapfun = function () {
|
||
|
|
//延迟1秒，图标聚合
|
||
|
|
setTimeout(function () {
|
||
|
|
if (cluster) {
|
||
|
|
cluster.setMap(null);
|
||
|
|
}
|
||
|
|
cluster = new AMap.MarkerClusterer(map, markers, {
|
||
|
|
gridSize: 50, maxZoom: 18,
|
||
|
|
renderClusterMarker: _renderClusterMarker,
|
||
|
|
//renderClusterMarker: (context) => {
|
||
|
|
// //console.log(obj);
|
||
|
|
// //context.marker.setContent("<div>aaaaa</div>")
|
||
|
|
// var count = this.markers.length;
|
||
|
|
// var factor = Math.pow(context.count / count, 1 / 18);
|
||
|
|
// var div = document.createElement('div');
|
||
|
|
// var Hue = 180 - factor * 180;
|
||
|
|
// var bgColor = "#3D93FD";
|
||
|
|
// var fontColor = '#ffffff';
|
||
|
|
// var borderColor = '#fff';
|
||
|
|
// var shadowColor = 'rgba(0,0,0,0.3)';
|
||
|
|
// div.style.backgroundColor = bgColor;
|
||
|
|
// //标记的大小可以固定写，也可以根据聚合点的数量来决定大小
|
||
|
|
// let size = 30
|
||
|
|
// // let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
|
||
|
|
// div.style.width = div.style.height = size + 'px';
|
||
|
|
// div.style.border = 'solid 2px ' + borderColor;
|
||
|
|
// div.style.borderRadius = size / 2 + 'px';
|
||
|
|
// div.style.boxShadow = '0 0 12px ' + shadowColor;
|
||
|
|
// div.innerHTML = context.count;
|
||
|
|
// div.style.lineHeight = (size - 2) + 'px';
|
||
|
|
// div.style.color = fontColor;
|
||
|
|
// div.style.fontSize = '14px';
|
||
|
|
// div.style.textAlign = 'center';
|
||
|
|
// context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
|
||
|
|
// context.marker.setContent(div);
|
||
|
|
|
||
|
|
//}
|
||
|
|
});
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|