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