<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<th:block th:include="include :: header('申请定位信息')" />
|
<script th:src="@{/cms/js/tdt.js}"></script>
|
|
</head>
|
<body class="white-bg">
|
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
<div id="map" class="content"
|
style="width: 100%; height: 800px; background-color: white;"></div>
|
</div>
|
<th:block th:include="include :: footer" />
|
<script th:inline="javascript">
|
var prefix = ctx + "platform/projectapply";
|
|
var onProject = [[${projectApply}]];
|
var holeList = [[${holeList}]];//钻孔列表
|
|
var dxs = [[${dxs}]];
|
|
var map;
|
var MarkerClusterer;
|
var zoom = 10;
|
$(function() {
|
map = new T.Map('map');
|
map.centerAndZoom(new T.LngLat(116.23, 40), zoom);
|
|
var control = new T.Control.Zoom();
|
control.setPosition(T_ANCHOR_TOP_RIGHT);
|
map.addControl(control);//添加缩放平移控件
|
|
var scale = new T.Control.Scale();//创建比例尺控件对象
|
var ctrl = new T.Control.MapType();
|
ctrl.setPosition(T_ANCHOR_BOTTOM_RIGHT);
|
//添加控件
|
map.addControl(ctrl);
|
showOnMap();
|
});
|
|
//在地图上展示
|
function showOnMap(){
|
|
var center = JSON.parse(onProject.onProjectAddr);
|
|
var icon = new T.Icon({
|
iconUrl: '/bjfw/images/icons/6.png',
|
iconSize: new T.Point(30, 30),
|
iconAnchor: new T.Point(6, 40),
|
});
|
|
var zkicon = new T.Icon({
|
iconUrl: '/bjfw/images/icons/zk.png',
|
iconSize: new T.Point(30, 30),
|
iconAnchor: new T.Point(6, 40),
|
});
|
|
var dxsIcon = new T.Icon({
|
iconUrl: '/bjfw/images/icons/dxs.svg',
|
iconSize: new T.Point(30, 30),
|
iconAnchor: new T.Point(6, 40),
|
});
|
|
|
var centerMarker = new T.Marker(new T.LngLat(center.lng, center.lat), { title: "项目待建点",icon:icon});
|
|
var proj = infoWindowProject(onProject);
|
addClickHandler(proj, centerMarker);
|
|
map.addOverLay(centerMarker);
|
|
//展示地质钻孔
|
for(var i=0;i<holeList.length;i++){
|
var lng =holeList[i].longitude;
|
var lat =holeList[i].latitude;
|
var zkno = holeList[i].holeNo;
|
var marker = new T.Marker(new T.LngLat(lng, lat), { title: "钻孔编号：" + zkno , icon : zkicon});
|
|
var c = infoWindowDrill(holeList[i]);
|
addClickHandler(c, marker);
|
map.addOverLay(marker);
|
}
|
|
|
//展示地下水孔
|
for(var i=0;i<dxs.length;i++){
|
var lng =dxs[i].lng;
|
var lat =dxs[i].lat;
|
var zkno = dxs[i].holeNum;
|
var marker = new T.Marker(new T.LngLat(lng, lat), { title: "钻孔编号：" + zkno , icon : dxsIcon});
|
|
var c = infoWindowDrill(dxs[i]);
|
//addClickHandler(dxs[i], marker);
|
addDxsClick(dxs[i], marker);
|
map.addOverLay(marker);
|
}
|
|
var circle = new T.Circle(new T.LngLat(center.lng, center.lat), 2000,
|
{color:"red",weight:2,opacity:0.5,fillColor:"#FFFFFF",fillOpacity:0.5,lineStyle:"dashed"});
|
//向地图上添加圆
|
map.addOverLay(circle);
|
map.centerAndZoom(new T.LngLat(center.lng, center.lat), 14);
|
}
|
|
|
|
function infoWindowDrill(e) {
|
var sContent =
|
"<div style='margin:0px;'>" +
|
"<div>" +
|
"<div style='margin:5px 0px 5px 5px;'>" +
|
"<font style='font-weight: bolder;'>钻孔编号 :</font>" + e.holeNo + "<br>" +
|
"<font style='font-weight: bolder;'>钻孔类型：</font>" + e.holeType + "<br>" +
|
"<font style='font-weight: bolder;'>孔深（米）：</font>" + e.holeDepth + "<br>" +
|
"</div>" +
|
"</div>" +
|
"</div>";
|
return sContent;
|
}
|
//"<input style='margin-left:195px; width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='钻孔图' onClick=\"zhutu('" + id + "')\">" +
|
|
function infoWindowProject(e){
|
var files= e.files;
|
var sContent =
|
"<div style='margin:0px;'>" +
|
"<div>" +
|
"<div style='margin:5px 0px 5px 5px;'>" +
|
"<font style='font-weight: bolder;'>项目名称 :</font>" + e.onProjectName + "<br>" +
|
"<font style='font-weight: bolder;'>单位信息：</font>" + e.onProjectDept + "<br>" +
|
"<font style='font-weight: bolder;'>联系人：</font>" + e.contacts + "<br>" +
|
"<font style='font-weight: bolder;'>电话：</font>" + e.tel + "<br>" +
|
"<font style='font-weight: bolder;'>附件：</font>" + "<a onClick=\"openFiles('" + files + "')\">审核材料</a>" + "<br>" +
|
|
"</div>" +
|
"</div>" +
|
"</div>";
|
return sContent;
|
}
|
|
function openFiles(files){
|
if(files==null|| files ==""){
|
return;
|
}else{
|
window.open(files);
|
}
|
}
|
|
function addClickHandler(content, marker) {
|
marker.addEventListener("click", function (e) {
|
openInfo(content, e)
|
});
|
}
|
|
//地下水折线
|
function addDxsClick(entity, marker){
|
marker.addEventListener("click", function (e) {
|
$.modal.openTab('地下水变化',prefix+'/dxs?holeNum='+ entity.holeNum);
|
});
|
}
|
|
|
|
function openInfo(content, e) {
|
var point = e.lnglat;
|
var markerInfoWin = new T.InfoWindow(content, { offset: new T.Point(0, -30) }); // 创建信息窗口对象
|
map.openInfoWindow(markerInfoWin, point); //开启信息窗口
|
}
|
|
</script>
|
</body>
|
</html>
|
