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> |