503 lines
18 KiB
Plaintext
503 lines
18 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ConstructionRiskMap.aspx.cs" Inherits="FineUIPro.Web.ProjectData.ConstructionRiskMap" %>
|
||
|
||
<!DOCTYPE html>
|
||
<style>
|
||
body,
|
||
html {
|
||
overflow: hidden;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
font-family: "微软雅黑";
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.ol-popup:after, .ol-popup:before {
|
||
top: 100%;
|
||
border: solid transparent;
|
||
content: " ";
|
||
height: 0;
|
||
width: 0;
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.ol-popup:after {
|
||
border-top-color: white;
|
||
border-width: 10px;
|
||
left: 48px;
|
||
margin-left: -10px;
|
||
}
|
||
|
||
.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">
|
||
<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">
|
||
<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>
|
||
<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>
|
||
</f:RegionPanel>
|
||
</form>
|
||
</body>
|
||
</html>
|
||
|
||
|
||
<%--<script src="https://api.map.baidu.com/api?v=2.0"></script>--%>
|
||
<script type="text/javascript">
|
||
|
||
//
|
||
/*定义百度投影，这是实现无偏移加载百度地图离线瓦片核心所在。
|
||
网上很多相关资料在用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
|
||
});
|
||
|
||
ol.proj.addProjection(projBD09);
|
||
ol.proj.addCoordinateTransforms("EPSG:4326", "BD:09",
|
||
function (coordinate) {
|
||
return lngLatToMercator(coordinate);
|
||
},
|
||
function (coordinate) {
|
||
return mercatorToLngLat(coordinate);
|
||
}
|
||
);
|
||
|
||
/*定义百度地图分辨率与瓦片网格*/
|
||
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,
|
||
RiskLevel: riskLevel,
|
||
}),
|
||
success: function (data) {
|
||
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);
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
// 获取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>
|