lizongbo at 618119.com

 代码实现的效果为：

用于显示时，在地图上标记出对应的坐标，单击该标注时显示详细信息，再单击标注，隐藏详细信息，

/*
标记地区
参数 deleteEnable 是否允许删除
adminCode 行政区号，6位长
alarmLevel 图标级别

alarmMsg 消息
*/
function lzbmarkArea(deleteEnable, adminCode,alarmLevel,alarmMsg){
var isSelected=0;
var lonLatx=112;
var lonLaty=22.5;
var adminName=”";
if(!alarmMsg){alarmMsg=”"};
for(var i=0;i<=gdareainfo.length;i++){
if(gdareainfo[i]==adminCode){
lonLatx=gdareainfo[i-2];
lonLaty=gdareainfo[i-1]+0.5;
adminName=gdareainfo[i+1];
}
}
if(adminName==”") {
//alert(‘no info ‘);
return;
};

for(var j = markers.markers.length-1; j >=0 ; j–){
if(adminCode == markers.markers[j].adminCode)
{
markers.removeMarker(markers.markers[j]);
}
}
var size = new OpenLayers.Size(50,50);
var calculateOffset = function(size) {
return new OpenLayers.Pixel(-(size.w/2), -size.h);
};
var icon = new OpenLayers.Icon(getAlarmLevelImg(alarmLevel),
null,null,null);
// size, null, calculateOffset);
//var marker =new OpenLayers.Marker(map.getLonLatFromPixel(e.xy), icon);//显示到当前点中的坐标
var marker =new OpenLayers.Marker(new OpenLayers.LonLat(lonLatx, lonLaty), icon);//显示到县市的中心点
marker.adminCode=adminCode;
marker.adminName=adminName;
marker.showLabel=true;
marker.labelStr=”";
//显示文本标签信息。
marker.text = marker.adminName+”(“+marker.adminCode+”)”;
if(alarmMsg!=”")
{
marker.text= marker.text+” ” + alarmMsg;
}
//alert(marker.text);
if(marker.text != “”){
marker.icon.imageDiv.style.fontSize = “14px”;
marker.icon.imageDiv.style.color = “blue”;
//marker.icon.imageDiv.style.backgroundColor = “rgb(255, 255, 215)”;
marker.icon.imageDiv.style.whiteSpace = “nowrap”;
//marker.icon.imageDiv.style.width=”100%”;
//marker.icon.imageDiv.style.height=”30″;
var str = “”;
str+= “<img src=’”+marker.icon.url+”‘ alt=’”+marker.text+”‘”+”‘ title=’”+marker.text+”‘>”;
marker.icon.imageDiv.innerHTML = str;//imageDivStr + str;
}
this.labelStr=marker.icon.imageDiv.innerHTML;
if (deleteEnable) {
marker.events.register(‘click’, marker, function(evt) {
markers.removeMarker(this);
OpenLayers.Event.stop(evt);
});
}else{
marker.events.register(‘click’, marker, function(evt) {
//alert(” 当前状态 “+this.showLabel);
//alert(this.icon.imageDiv.innerHTML);
if(this.showLabel){
var str = “”;
this.showLabel=false;
str+= “<table border=\”0\” bordercolor=\”#FF0000\”>”;
str+= “<tr><td bgcolor=\”rgb(255, 255, 215)\” style=\”white-space:nowrap\”>”;
str+= “<img src=’”+marker.icon.url
+”‘ ‘ height=20px width=20px alt=’”+marker.text+”‘”+”‘ title=’”+marker.text+”‘ ”
+” />”;
str+= this.text.replace(new RegExp(“\n”,”gm”),’<br/>’);
str+= “</td></tr>”;
str+= “</table>”;

this.icon.imageDiv.innerHTML = str;//imageDivStr + str;
}else{
var str = “”;
str+= “<img src=’”+marker.icon.url
+”‘ height=20px width=20px ”
+”‘ alt=’”+marker.text+”‘”+”‘ title=’”+marker.text+”‘ ”
+” style=\”FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=0);WIDTH: 20px; POSITION: relative; HEIGHT: 20px\” /><br/>”;
//alert(‘不显示label’);
this.showLabel=true;
this.icon.imageDiv.innerHTML = str;//imageDivStr + str;
}
//alert(this.icon.imageDiv.innerHTML);
OpenLayers.Event.stop(evt);
});
}
markers.addMarker(marker);

}

function getAlarmLevelImg(level) {
var imgName = “”;
if (level == 1) {
imgName = “alarm_red.png”;
} else if (level == 2) {
imgName = “alarm_orange.png”;
} else if (level == 3) {
imgName = “alarm_yellow.png”;
} else if (level == 4) {
imgName = “alarm_blue.png”;
} else {
imgName = “alarm_other.png”;
}
return “/was/images/weather/” + imgName;
}

用于标注的的代码为：

if (deleteEnable) {
map.events.register(‘click’, map, function (e) {
//alert(map.getLonLatFromPixel(e.xy));
//document.getElementById(‘nodelist’).innerHTML = “正在载入… 请稍后…”;
var url =  map.layers[0].getFullRequestString(
{
REQUEST: “GetFeatureInfo”,
EXCEPTIONS: “application/vnd.ogc.se_xml”,
BBOX: map.getExtent().toBBOX(),
X: e.xy.x,
Y: e.xy.y,
INFO_FORMAT: ‘text/xml’,
QUERY_LAYERS: map.layers[0].params.LAYERS,
FEATURE_COUNT: 50,
srs: ‘EPSG:4326′,
layers: ‘gdmap:Dguangdong_region’,
styles: ”,
WIDTH: map.size.w,
HEIGHT: map.size.h
},
gisctx+ “/wms”
);

var selectPoint = function(varresponse){
var rs=varresponse.responseText;
rs=rs.replace(“‘”,”");
// alert(rs);
if(rs.indexOf(“ADMINCODE = “)<1){// alert(“no info”);
return ;}
rs=rs.substr(rs.indexOf(“ADMINCODE = “)+12);
rs=rs.substr(0,6);
var adminCode=rs;
rs=varresponse.responseText;
rs=rs.substr(rs.indexOf(“ADMINNAME = “)+12);
rs=rs.substr(0,rs.indexOf(“\n”));
var adminName=rs;
var alarmLevel =”1″;
alarmLevel = document.getElementById(“alarmLevel”).value;

lzbmarkArea(deleteEnable, adminCode,alarmLevel);
}

OpenLayers.loadURL(url, ”, this, selectPoint, setHTML);
OpenLayers.Event.stop(e);

});

};

Related posts

• 整理行政区划数据的几个操作步骤 (0)
• 将google托管的ajax js文件同步到本地服务器 (1)
• 在 Spket IDE 1.6.4 中使用 Ext 2.0 (2)
• 参考Google Syntax Highlighter for WordPress 定制纯Javascript实现的代码语法高亮 (1)
• 关于分布式负载均衡的几个设置 (0)