247 lines
8.7 KiB
Plaintext
247 lines
8.7 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ConstructionRiskMap.aspx.cs" Inherits="FineUIPro.Web.ProjectData.ConstructionRiskMap" %>
|
|||
|
|
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<style>
|
|||
|
|
body,
|
|||
|
|
html,
|
|||
|
|
#container {
|
|||
|
|
overflow: hidden;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: "微软雅黑";
|
|||
|
|
}
|
|||
|
|
.popover-area {
|
|||
|
|
list-style: none;
|
|||
|
|
padding-left: 1em;
|
|||
|
|
padding-right: 1em;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
ul.popover-area{
|
|||
|
|
margin: 0 0 0;
|
|||
|
|
}
|
|||
|
|
.popover-area li {
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popover-area li+li {
|
|||
|
|
margin-top: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popover-area li p {
|
|||
|
|
margin: 0;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popover-area li p:first-child {
|
|||
|
|
font-weight: 600;
|
|||
|
|
float: left;
|
|||
|
|
width: 84px;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popover-area li p:nth-child(2) {
|
|||
|
|
width: 330px;
|
|||
|
|
float: right;
|
|||
|
|
color: #545454;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head runat="server">
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|||
|
|
<title></title>
|
|||
|
|
<link href="../res/css/common.css" rel="stylesheet" type="text/css" />
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<form id="form1" runat="server">
|
|||
|
|
<f:PageManager ID="PageManager1" AutoSizePanelID="RegionPanel1" runat="server" />
|
|||
|
|
<f:RegionPanel ID="RegionPanel1" ShowBorder="false" runat="server" Margin="5px">
|
|||
|
|
<Regions>
|
|||
|
|
<f:Region ID="Region2" ShowBorder="false" ShowHeader="false" Position="Center" Layout="VBox"
|
|||
|
|
BoxConfigAlign="Stretch" BoxConfigPosition="Left" runat="server" BodyPadding="0 5 0 0">
|
|||
|
|
<Items>
|
|||
|
|
<f:ContentPanel ID="ContentPanel1" CssClass="bodyregion" ShowBorder="false" ShowHeader="false" runat="server" >
|
|||
|
|
<div id="map" style="width:100%;height:700px" ></div>
|
|||
|
|
</f:ContentPanel>
|
|||
|
|
|
|||
|
|
</Items>
|
|||
|
|
</f:Region>
|
|||
|
|
</Regions>
|
|||
|
|
</f:RegionPanel>
|
|||
|
|
</form>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
<script src="https://api.map.baidu.com/api?v=2.0&ak=24y6PiwMI7AqPQ3L4SE253mWKntWR1Nq"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
|
|||
|
|
F.ready(function () {
|
|||
|
|
var tileLayer = new BMap.TileLayer();
|
|||
|
|
tileLayer.getTilesUrl = function (tileCoord, zoom) {
|
|||
|
|
var x = tileCoord.x;
|
|||
|
|
var y = tileCoord.y;
|
|||
|
|
return '../../File/Map/SD1-PC-2023-001/tiles/' + zoom + '/tile-' + x + '_' + y + '.png';
|
|||
|
|
}
|
|||
|
|
var MyMap = new BMap.MapType('MyMap', tileLayer, { minZoom: 3, maxZoom: 8 });
|
|||
|
|
var map = new BMap.Map('map', { mapType: MyMap });
|
|||
|
|
// 复杂的自定义覆盖物
|
|||
|
|
function ComplexCustomOverlay(workAreaId,point, text, mouseoverText){
|
|||
|
|
this._point = point;
|
|||
|
|
this._text = text;
|
|||
|
|
this._overText = mouseoverText;
|
|||
|
|
this._workAreaId = workAreaId;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
ComplexCustomOverlay.prototype = new BMap.Overlay();
|
|||
|
|
ComplexCustomOverlay.prototype.initialize = function(map){
|
|||
|
|
this._map = map;
|
|||
|
|
var pixel = map.pointToOverlayPixel(this._point,{
|
|||
|
|
useRound:false, // 设置此参数，防止抖动
|
|||
|
|
fixPosition:true // 覆盖物跨越180时修正位置
|
|||
|
|
});
|
|||
|
|
var div = this._div = document.createElement("div");
|
|||
|
|
div.style.position = "absolute";
|
|||
|
|
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
|
|||
|
|
div.style.backgroundColor = "#EE5D5B";
|
|||
|
|
div.style.border = "1px solid #BC3B3A";
|
|||
|
|
div.style.color = "white";
|
|||
|
|
div.style.height = "24px";
|
|||
|
|
div.style.padding = "2px";
|
|||
|
|
div.style.lineHeight = "24px";
|
|||
|
|
div.style.whiteSpace = "nowrap";
|
|||
|
|
div.style.MozUserSelect = "none";
|
|||
|
|
div.style.fontSize = "12px"
|
|||
|
|
var span = this._span = document.createElement("span");
|
|||
|
|
div.appendChild(span);
|
|||
|
|
span.appendChild(document.createTextNode(this._text));
|
|||
|
|
var that = this;
|
|||
|
|
|
|||
|
|
var arrow = this._arrow = document.createElement("div");
|
|||
|
|
arrow.style.background = "url(../../File/Image/label.png) no-repeat";
|
|||
|
|
arrow.style.position = "absolute";
|
|||
|
|
arrow.style.width = "11px";
|
|||
|
|
arrow.style.height = "10px";
|
|||
|
|
arrow.style.top = "22px";
|
|||
|
|
arrow.style.left = "10px";
|
|||
|
|
arrow.style.overflow = "hidden";
|
|||
|
|
div.appendChild(arrow);
|
|||
|
|
div.onmouseover = function(){
|
|||
|
|
this.style.backgroundColor = "#6BADCA";
|
|||
|
|
this.style.borderColor = "#0000ff";
|
|||
|
|
this.getElementsByTagName("span")[0].innerHTML = that._overText;
|
|||
|
|
arrow.style.backgroundPosition = "0px -20px";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.onmouseout = function(){
|
|||
|
|
this.style.backgroundColor = "#EE5D5B";
|
|||
|
|
this.style.borderColor = "#BC3B3A";
|
|||
|
|
this.getElementsByTagName("span")[0].innerHTML = that._text;
|
|||
|
|
arrow.style.backgroundPosition = "0px 0px";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
map.getPanes().labelPane.appendChild(div);
|
|||
|
|
|
|||
|
|
return div;
|
|||
|
|
}
|
|||
|
|
ComplexCustomOverlay.prototype.draw = function(){
|
|||
|
|
var map = this._map;
|
|||
|
|
var pixel = map.pointToOverlayPixel(this._point);
|
|||
|
|
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
|
|||
|
|
this._div.style.top = pixel.y - 30 + "px";
|
|||
|
|
}
|
|||
|
|
ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
|
|||
|
|
this._div['on' + event] = fun;
|
|||
|
|
}
|
|||
|
|
map.addControl(new BMap.NavigationControl( ));
|
|||
|
|
map.centerAndZoom(new BMap.Point(0, 0), 5);
|
|||
|
|
//map.addEventListener('click', function (e) {
|
|||
|
|
// alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
|
|||
|
|
// // var marker1 = new BMap.Marker(new BMap.Point(e.latlng.lng, e.latlng.lat));
|
|||
|
|
//// 在地图上添加点标记
|
|||
|
|
//map.addOverlay(marker1);
|
|||
|
|
|
|||
|
|
//});
|
|||
|
|
function createClickEvent(overlay)
|
|||
|
|
{
|
|||
|
|
return function (e) {
|
|||
|
|
var p = e.target;
|
|||
|
|
debugger;
|
|||
|
|
login(overlay._workAreaId)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function createRiskClickEvent(txt,opts,point)
|
|||
|
|
{
|
|||
|
|
return function (e) {
|
|||
|
|
|
|||
|
|
var infoWindow = new BMap.InfoWindow(txt, opts);
|
|||
|
|
map.openInfoWindow(infoWindow, point);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
var myIcon = new BMap.Icon("../../File/Image/wei.png", new BMap.Size(52, 52));
|
|||
|
|
var Coordinate = '<%=Coordinate%>'
|
|||
|
|
if(Coordinate!=''){
|
|||
|
|
var coord = Coordinate.split(",");
|
|||
|
|
for(var i=0;i< coord.length;i++){
|
|||
|
|
var loc= coord[i].split(";")
|
|||
|
|
var point=new BMap.Point(loc[3], loc[4]);
|
|||
|
|
var txt = loc[1]+"："+loc[2];
|
|||
|
|
var myCompOverlay = new ComplexCustomOverlay(loc[0],point, txt,txt);
|
|||
|
|
map.addOverlay(myCompOverlay);
|
|||
|
|
// 点标记添加点击事件
|
|||
|
|
myCompOverlay.addEventListener('click', createClickEvent(myCompOverlay));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function login(workAreaId) {
|
|||
|
|
$.ajax({
|
|||
|
|
url: "ConstructionRiskMap.aspx/getRisk",
|
|||
|
|
type: "POST",
|
|||
|
|
contentType: "application/json; charset=utf-8",
|
|||
|
|
dataType: "json",
|
|||
|
|
data: JSON.stringify({
|
|||
|
|
WorkAreaId: workAreaId
|
|||
|
|
}),
|
|||
|
|
success: function (data) {
|
|||
|
|
if (data.d != undefined && data.d != '' ) {
|
|||
|
|
map.clearOverlays();
|
|||
|
|
debugger
|
|||
|
|
var risk = data.d
|
|||
|
|
var coord = risk.split(",");
|
|||
|
|
for(var i=0;i< coord.length;i++){
|
|||
|
|
var loc= coord[i].split(";")
|
|||
|
|
var point=new BMap.Point(loc[5], loc[6]);
|
|||
|
|
var txt = "<ul class='popover-area'>" +
|
|||
|
|
"<li><p class='text-gray3'>施工单位：</p><p>"+loc[1]+"</p></li>" +
|
|||
|
|
"<li><p class='text-gray3'>日期：</p><p>"+loc[2]+"</p></li>" +
|
|||
|
|
"<li><p class='text-gray3'>风险等级：</p><p>"+loc[3]+"</p></li>" +
|
|||
|
|
"<li><p class='text-gray3'>作业风险描述：</p><p>"+loc[4]+"</p></li>" +
|
|||
|
|
"</ul>";
|
|||
|
|
var marker = new BMap.Marker(point ,{
|
|||
|
|
icon: myIcon
|
|||
|
|
});
|
|||
|
|
// 在地图上添加点标记
|
|||
|
|
map.addOverlay(marker);
|
|||
|
|
var opts = {
|
|||
|
|
width : 440, // 信息窗口宽度
|
|||
|
|
height: 100, // 信息窗口高度
|
|||
|
|
title : "" , // 信息窗口标题
|
|||
|
|
message:txt
|
|||
|
|
}
|
|||
|
|
marker.addEventListener('mouseover', createRiskClickEvent(txt,opts,point));
|
|||
|
|
marker.addEventListener('mouseout', function(){map.closeInfoWindow() });
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|