<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bmap.css" />
<title>地图系统</title>
<style type="text/css">
body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; }
td { text-align: center; }
h1 { font-size: 14px; }
h2 { font-size: 8px; }
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dNkB9KryKayiE7zG7u8srTyM"></script>
<!--<script type="text/javascript" src="api/mapapi.min.js"></script>-->
</head>
<body>
<div id="allmap">
</div>
</body>
</html>
<script type="text/javascript" src="GetBoundaries.js"></script> //获得管道位置信息
<script type="text/javascript" src="GetMarkerData.js"></script> //获得标记信息
<script type="text/javascript" src="UpdateMarkerData.js"></script> //更新标签和报警信息
<script type="text/javascript" src="GetOverlays.js"></script> //获得图层信息
<script type="text/javascript">
// 初始化百度地图
var map = new BMap.Map("allmap"); // 百度地图API功能
var centerPoint = new BMap.Point(119.168104,36.713962);
map.centerAndZoom(centerPoint, 14); // 初始化时,即可设置中心点和地图缩放级别。
map.enableScrollWheelZoom(); // 启用滚轮放大缩小
map.addControl(new BMap.NavigationControl()); // 添加缩放导航控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.MapTypeControl()); // 添加地图类型控件
//////////////////////////////////////////////////////////////////////////
var tagShowMode = 1;
//单击事件响应函数
map.addEventListener("click", function() {
window.focus();
});
//滚轮缩放事件响应??
map.addEventListener("zoomend", function() {
for (var i = 0; i < arrayMarkerData.length; i++) {
arrayMarkerData[i].marker.setPosition(arrayMarkerData[i].marker.getPosition());
}
var mapZoomLevel = map.getZoom();
//GetOverlays(mapZoomLevel);
})
// 正常图片和报警图片路径
var imagePath = window.location.href;
imagePath = imagePath.substring(0, imagePath.lastIndexOf("/") + 1) + "images/";
var normalIcon = new BMap.Icon(imagePath + "marker-normal.png", new BMap.Size(40, 40));
// var normalIcon = new BMap.Icon(imagePath + "marker-blue.png", new BMap.Size(40, 40));
var alarmIcon = new BMap.Icon(imagePath + "marker_alarm.png", new BMap.Size(40, 40));
// var alarmIcon = new BMap.Icon(imagePath + "marker-blue.png", new BMap.Size(40, 40));;
var ClickeType=2; //设置鼠标单击事件响应类型,1弹出信息框 2跳转画面
var arrayMarkerData = new Array(); // 标注数据数组
// 加载页面时获取各标注的数据,包括标注的位置、关联的报警组和KS画面等,并在画面上展示
window.onload = function() {
GetBoundaries();
GetOverlays(OverlayNum);
GetMarkerData(tagShowMode);
}
var num;
var OverlayNum=16;
//ks选择显示不同图层
function GetOverlayByNum(num){
//OverlayNum=num;
GetOverlays(num);
}
// 设置地图中心点
function SetMapCenter(centerCoord) {
var position = PosToPoint(centerCoord); // 拆分字符串
var latlng = new BMap.Point(position[0], position[1]);
map.panTo(latlng);
}
// 将由分号分隔的多个坐标点拆分成多个坐标点字符串
function SplitPoints(strPoints) {
var strCoordinate = new Array();
strCoordinate = strPoints.split(";");
return strCoordinate;
}
// 将由逗号分隔的两个坐标值字符串拆分成两个字符串
function PosToPoint(pos) {
var coordinate = new Array();
coordinate = pos.split(",");
return coordinate;
}
// 定义类MarkerData
function MarkerData(markerName, alarmGroup, alarmCount, KSPicture, marker, label) {
this.markerName = markerName;
this.alarmGroup = alarmGroup;
this.alarmCount = alarmCount;
this.KSPicture = KSPicture;
this.marker = marker;
this.label = label;
this.showLabel = false; // 是否显示变量文本标注
this.showMarkerAnimation = false; // 是否显示了marker标注的动画效果
}
// 根据marker查找MarkerData
function FindMarkerDataByEvent(event) {
event = event ? event : window.event;
var obj = event.srcElement ? event.srcElement : event.target;
for (var i = 0; i < arrayMarkerData.length; i++) {
if (arrayMarkerData[i].marker == obj) {
return arrayMarkerData[i];
}
}
return null;
}
// 根据单击marker关联的label查找MarkerData
function FindMarkerDataByLabelEvent(event) {
event = event ? event : window.event;
var obj = event.srcElement ? event.srcElement : event.target;
for (var i = 0; i < arrayMarkerData.length; i++) {
if (arrayMarkerData[i].label == obj) {
return arrayMarkerData[i];
}
}
return null;
}
// 根据markerName查找MarkerData
function FindMarkerDataByMarkerName(markerName) {
for (var i = 0; i < arrayMarkerData.length; i++) {
if (arrayMarkerData[i].markerName == markerName) {
return arrayMarkerData[i];
}
}
return null;
}
// 根据报警组名称查找MarkerData
function FindMarkerDataByAlarmGroup(alarmGroup) {
for (var i = 0; i < arrayMarkerData.length; i++) {
if (arrayMarkerData[i].alarmGroup == alarmGroup) {
return arrayMarkerData[i];
}
}
return null;
}
function SetMark(xml) {
var f = null;
if (xml != null && xml.documentElement != null) {
f = xml.documentElement.getElementsByTagName("Marker");
}
if (f == null || f.length == 0) {
return;
}
for (var i = 0; i < f.length; i++) {
markerName = f[i].attributes.getNamedItem("Name").value;
// position = PosToPoint(f[i].attributes.getNamedItem("Position").value);
positionX = f[i].attributes.getNamedItem("PositionX").value;
positionY = f[i].attributes.getNamedItem("PositionY").value;
coord = new BMap.Point(positionX, positionY);
KSPicture = f[i].attributes.getNamedItem("KSPicture").value;
alarmGroup = f[i].attributes.getNamedItem("AlarmGroup").value;
alarmCount = f[i].attributes.getNamedItem("AlarmCount").value;
var tableHTML = null;
// 变量信息
var e = xml.documentElement.getElementsByTagName(markerName);
var x = e[0].childNodes;
if (x.length > 0) {
tableHTML = "<table border=1 width=200>";
// 第一列显示变量名,第二列显示变量值
for (var j = 0; j < x.length; j++) {
tableHTML = tableHTML + "<tr><td width=100>" +
x[j].attributes.getNamedItem("TagAlias").value + "</td><td width = 100>" +
x[j].attributes.getNamedItem("TagValue").value + "</td></tr>";
}
tableHTML = tableHTML + "</table>";
}