lpf/SGGL_SHJ
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交代码

Browse Source
This commit is contained in:
高飞
2024-09-24 11:28:27 +08:00
parent 24de50cd30
commit 0865c7e41e
54 changed files with 5535 additions and 784 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SGGL/FineUIPro.Web/HSSE/Hazard/ConstructionRiskMap.aspx
+441 -186
View File
@@ -3,54 +3,71 @@
<!DOCTYPE html>
<style>
body,
html,
#container {
html {
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;
}
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px #FFC125);
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 360px;
}
.popover-area li p {
margin: 0;
line-height: 1.5;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.popover-area li p:first-child {
font-weight: 600;
float: left;
width: 84px;
text-align: right;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.popover-area li p:nth-child(2) {
width: 330px;
float: right;
color: #545454;
}
</style>
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
color: red;
}
.ol-popup-closer:after {
content: "✖";
}
</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" />
<link type="text/css" href="../../res/ol/ol.css" rel="stylesheet" />
<script type="text/javascript" src="../../res/ol/ol.js" charset="utf-8"></script>
<script type="text/javascript" src="../../res/ol/bd09.js" charset="utf-8"></script>
</head>
<body>
<form id="form1" runat="server">
@@ -59,11 +76,34 @@ ul.popover-area{
<Regions>
<f:Region ID="Region2" ShowBorder="false" ShowHeader="false" Position="Center" Layout="VBox"
BoxConfigAlign="Stretch" BoxConfigPosition="Left" runat="server" BodyPadding="0 5 0 0">
<Toolbars>
<f:Toolbar runat="server">
<Items>
<f:DropDownList ID="drpRiskLevel" runat="server" EnableEdit="true" Label="风险等级" LabelWidth="140px"
OnSelectedIndexChanged="drpRiskLevel_SelectedIndexChanged"
AutoPostBack="true">
<f:ListItem Value="" Text="- 请选择 -" />
<f:ListItem Value="低风险" Text="低风险" />
<f:ListItem Value="一般风险" Text="一般风险" />
<f:ListItem Value="较大风险" Text="较大风险" />
<f:ListItem Value="重大风险" Text="重大风险" />
</f:DropDownList>
</Items>
</f:Toolbar>
</Toolbars>
<Items>
<f:ContentPanel ID="ContentPanel1" CssClass="bodyregion" ShowBorder="false" ShowHeader="false" runat="server" >
<div id="map" style="width:100%;height:700px" ></div>
</f:ContentPanel>
<f:ContentPanel ID="ContentPanel1" CssClass="bodyregion" ShowBorder="false" ShowHeader="false" runat="server">
<div id="map" style="width: 100%; height: 700px"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content" class="popup-content"></div>
</div>
</f:ContentPanel>
</Items>
</f:Region>
</Regions>
@@ -71,177 +111,392 @@ ul.popover-area{
</form>
</body>
</html>
<script src="https://api.map.baidu.com/api?v=2.0&ak=24y6PiwMI7AqPQ3L4SE253mWKntWR1Nq"></script>
<%--<script src="https://api.map.baidu.com/api?v=2.0"></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;
//
/*定义百度投影，这是实现无偏移加载百度地图离线瓦片核心所在。
网上很多相关资料在用OpenLayers加载百度地图离线瓦片时都认为投影就是EPSG:3857(也就是Web墨卡托投影)。
事实上这是错误的，因此无法做到无偏移加载。
百度地图有自己独特的投影体系，必须在OpenLayers中自定义百度投影，才能实现无偏移加载。
百度投影实现的核心文件为bd09.js，在迈高图官网可以找到查看这个文件。*/
var projBD09 = new ol.proj.Projection({
code: 'BD:09',
extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17],
units: 'm',
axisOrientation: 'neu',
global: false
});
}
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)
ol.proj.addProjection(projBD09);
ol.proj.addCoordinateTransforms("EPSG:4326", "BD:09",
function (coordinate) {
return lngLatToMercator(coordinate);
},
function (coordinate) {
return mercatorToLngLat(coordinate);
}
}
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) {
/*定义百度地图分辨率与瓦片网格*/
var resolutions = [];
for (var i = 0; i <= 18; i++) {
resolutions[i] = Math.pow(2, 18 - i);
}
var tilegrid = new ol.tilegrid.TileGrid({
origin: [0, 0],
resolutions: resolutions
});
/*加载百度地图离线瓦片不能用ol.source.XYZ，ol.source.XYZ针对谷歌地图（注意：是谷歌地图）而设计，
而百度地图与谷歌地图使用了不同的投影、分辨率和瓦片网格。因此这里使用ol.source.TileImage来自行指定
投影、分辨率、瓦片网格。*/
var source = new ol.source.TileImage({
projection: "BD:09",
tileGrid: tilegrid,
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
//openlayer5的版本
var z = tileCoord[0];
var x = tileCoord[1];
var y = tileCoord[2];
// return "http://192.168.1.13:8080/mapImg/2/V1/"+z+"/"+x+"/"+y+".png";
var projectCode = '<%=ProjectCode%>'
return '../../File/Map/' + projectCode + '/tiles/' + z + '/tile-' + x + '_' + y + '.png';
//return '../../File/Map/SD1-PC-2023-001/tiles/' + z + '/tile-' + x + '_' + y + '.png';
// return "/tile/?qt=vtile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&scaler=1&udt=20210506&from=jsapi3_0";
//openlayers6的版本
//let z = tileCoord[0];
// let x = tileCoord[1];
//let y = -tileCoord[2]-1;
// if(x<0) x = "M"+(-x);
// if(y<0) y = "M"+(-y);
}
});
var mapLayer = new ol.layer.Tile({
source: source
});
var riskLevel = '';
var coordinate = '<%=Coordinate%>'
var markers = [];
var createLabelStyle1 = function (feature) {
return new ol.style.Style({
/**{olx.style.IconOptions}类型*/
image: new ol.style.Icon({
anchor: [0.5, 60],
anchorOrigin: 'top-right',
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
offsetOrigin: 'top-right',
// offset:[0,10],
//图标缩放比例
// scale:0.5,
//图标的url
src: '../../File/Image/wei1.png',
}),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
font: 'normal 20px 微软雅黑', //文字样式
text: feature.get('name'), //文本内容
fill: new ol.style.Fill({ //文本填充样式（即文字颜色)
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#F00',
width: 2
})
})
})
}
var createLabelStyle2 = function (feature) {
return new ol.style.Style({
/**{olx.style.IconOptions}类型*/
image: new ol.style.Icon({
anchor: [0.5, 60],
anchorOrigin: 'top-right',
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
offsetOrigin: 'top-right',
// offset:[0,10],
//图标缩放比例
// scale:0.5,
//图标的url
src: '../../File/Image/wei2.png',
}),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
font: 'normal 20px 微软雅黑', //文字样式
text: feature.get('name'), //文本内容
fill: new ol.style.Fill({ //文本填充样式（即文字颜色)
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#F00',
width: 2
})
})
})
}
var createLabelStyle3 = function (feature) {
return new ol.style.Style({
/**{olx.style.IconOptions}类型*/
image: new ol.style.Icon({
anchor: [0.5, 60],
anchorOrigin: 'top-right',
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
offsetOrigin: 'top-right',
// offset:[0,10],
//图标缩放比例
// scale:0.5,
//图标的url
src: '../../File/Image/wei3.png',
}),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
font: 'normal 20px 微软雅黑', //文字样式
text: feature.get('name'), //文本内容
fill: new ol.style.Fill({ //文本填充样式（即文字颜色)
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#F00',
width: 2
})
})
})
}
var createLabelStyle4 = function (feature) {
return new ol.style.Style({
/**{olx.style.IconOptions}类型*/
image: new ol.style.Icon({
anchor: [0.5, 60],
anchorOrigin: 'top-right',
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
offsetOrigin: 'top-right',
// offset:[0,10],
//图标缩放比例
// scale:0.5,
//图标的url
src: '../../File/Image/wei4.png',
}),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
font: 'normal 20px 微软雅黑', //文字样式
text: feature.get('name'), //文本内容
fill: new ol.style.Fill({ //文本填充样式（即文字颜色)
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#F00',
width: 2
})
})
})
}
var vectorLayer = new ol.layer.Vector()
function setRiskLevel(Level) {
riskLevel = Level;
}
function drawMap(locs) {
var coord = locs.split(",");
for (var i = 0; i < coord.length; i++) {
var loc = coord[i].split(";")
var txt = loc[1] + "：" + loc[2];
//实例化Vector要素，通过矢量图层添加到地图容器中
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([Number(loc[3]), Number(loc[4])]),
name: txt,
ftype: 'Marker',
workAreaId: loc[0]
})
switch (loc[5]) {
case "1": iconFeature.setStyle(createLabelStyle4(iconFeature)); break;
case "2": iconFeature.setStyle(createLabelStyle3(iconFeature)); break;
case "3": iconFeature.setStyle(createLabelStyle2(iconFeature)); break;
case "4": iconFeature.setStyle(createLabelStyle1(iconFeature)); break;
}
//矢量标注的数据源
markers.push(iconFeature);
}
var vectorSource = new ol.source.Vector({
features: markers,
})
//矢量标注图层
vectorLayer.setSource(vectorSource)
}
function clearOverlays() {
markers.forEach((marker) => {
vectorLayer.getSource().removeFeature(marker);
});
markers.length = 0;
}
function getRisk(workAreaId) {
$.ajax({
url: "ConstructionRiskMap.aspx/getRisk",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({
WorkAreaId: workAreaId
WorkAreaId: workAreaId,
RiskLevel: riskLevel,
}),
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() });
if (data.d != undefined && data.d != '') {
clearOverlays();
var risk = data.d
var coord = risk.split(",");
var markers1 = [];
for (var i = 0; i < coord.length; i++) {
var loc = coord[i].split(";")
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>";
//实例化Vector要素，通过矢量图层添加到地图容器中
var iconFeature = new ol.Feature({
// geometry: new ol.geom.Point(ol.proj.transform([116.403, 39.924], 'EPSG:4326', 'EPSG:3857')),
geometry: new ol.geom.Point([loc[5], loc[6]]),
name: loc[4],
ftype: 'MarkerRisk',
data: loc
})
switch (loc[3]) {
case "低风险": iconFeature.setStyle(createLabelStyle4(iconFeature)); break;
case "一般风险": iconFeature.setStyle(createLabelStyle3(iconFeature)); break;
case "较大风险": iconFeature.setStyle(createLabelStyle2(iconFeature)); break;
case "重大风险": iconFeature.setStyle(createLabelStyle1(iconFeature)); break;
}
//矢量标注的数据源
markers.push(iconFeature);
}
var vectorSource = new ol.source.Vector({
features: markers,
})
//矢量标注图层
vectorLayer.setSource(vectorSource);
}
}
}
})
}
});
</script>
// 获取popup的dom对象
var container = document.getElementById('popup');
var closer = document.getElementById('popup-closer');
// 创建popup
var popup = new ol.Overlay({
element: container,
autoPan: true,
positioning: 'bottom-center',
stopEvent: false,
autoPanAnimation: {
duration: 250
}
});
// 关闭popup
closer.onclick = function () {
popup.setPosition(undefined);
closer.blur();
return false;
};
//});
var map;
F.ready(function () {
map = new ol.Map({
layers: [
mapLayer
],
view: new ol.View({
center: ol.proj.transform([5, 5], 'EPSG:4326', 'BD:09'),
projection: 'BD:09',
zoom: 5
}),
target: 'map'
});
map.on('click', (evt) => {
debugger
var coordinate = evt.coordinate;
const Feature = map.forEachFeatureAtPixel(evt.pixel, (feature) => {
return feature
})
if (Feature && Feature.get('ftype') === 'Marker') {
getRisk(Feature.get('workAreaId'));
} else if (Feature && Feature.get('ftype') === 'MarkerRisk') {
var data = Feature.get('data');
// 弹出popup
var loc = data;
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 content = document.getElementById('popup-content');
content.innerHTML = txt;
popup.setPosition(coordinate);
}
});
map.addLayer(vectorLayer)
if (coordinate != '') {
drawMap(coordinate)
}
map.addOverlay(popup);
});
</script>