openlayers简单例子
目录结构：
效果图：
代码：
<html>
<head>
<base href=”<%=basePath%>”>
<title>My JSP ‘index.jsp’ starting page</title>
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
<meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3″>
<meta http-equiv=”description” content=”This is my page”>
<link rel=”stylesheet” href=”css/theme/default/style.css”
type=”text/css” />
<script type=”text/javascript” src=”script/OpenLayers.js”></script>
<script type=”text/javascript” src=”index.js”></script>
</script>
<script type=”text/javascript”>
function init() {
var map, layer ,popup ,markers; //声明变量map、layer；等同于 var map = null; var layer = null;
var bounds = new OpenLayers.Bounds(
0,0,1024,768
);
var options = {
controls: [
new OpenLayers.Control.PanZoomBar({
position: new OpenLayers.Pixel(10, 15)
}),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition()
],
maxExtent: bounds,
maxResolution: 0.648194258984375,
projection: “EPSG:4326”,
units: ‘degrees’,
numZoomLevels: 6
};
var map,base_layer;
map = new OpenLayers.Map(‘map’, options);
base_layer = new OpenLayers.Layer.Image(
‘地图’,
‘images/mapcn.jpg’,
bounds,
new OpenLayers.Size(1024,768)
);
map.addLayer(base_layer);
map.zoomToMaxExtent();
var tower = new OpenLayers.Layer.Vector(“基站图层”, {
styleMap: new OpenLayers.StyleMap({‘default’:{
strokeColor: “#000000”,
strokeOpacity: 1,
strokeWidth: 1,
fillColor: “#000000”,
fillOpacity: 0.1,
graphicName:”star”,
pointRadius: 0,
label : “${id}”,
fontColor: “#000000”,
fontSize: “20px”,
labelAlign:”lb”
}})
}//自定义的基站样式,可以删除这个样式，
);
map.addLayer(tower);
//设置图标大小
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
//设置图标图片
var jz = new OpenLayers.Icon(‘script/img/marker.png’,size,offset);
markers = new OpenLayers.Layer.Markers(“分站”);
//设置显示坐标
var x=550,y=310;
//图片显示
feature = new OpenLayers.Feature(markers,new OpenLayers.LonLat(x,y),{‘icon’: jz});
marker = feature.createMarker();
markers.addMarker(marker);
map.addLayer(markers);
//文字显示
var point = new OpenLayers.Geometry.Point(x,y);
feature = new OpenLayers.Feature.Vector(point);
feature.attributes.id=’测试’;
feature=[feature];
tower.addFeatures(feature);
//鼠标悬浮到图标上的事件
var companyname=”开滦煤矿”,renshu=502;
marker.events.register(“mouseover”, marker, function(evt){
var html=”<b> ”+companyname+”<br> 当前矿井人数：”+renshu+”人</b>”;
popup1=new OpenLayers.Popup(“popup1”,
new OpenLayers.LonLat(x,y),
new OpenLayers.Size(200,50),
html,
false);
popup1.setBackgroundColor(“#ffffff”);
popup1.setOpacity(12);
popup1.setBorder(“1px solid #d91f12”);
map.addPopup(popup1);
});
//鼠标移开事件
marker.events.register(“mouseout”, marker, function(evt){
popup1.hide();
});
}
</script>
</head>
<body onload=init()>
<div style=”width: 800px; height: 475px” id=”map” class=”main_map”>
<b>Hello My Map</b>
</div>
</body>
</html>
转载自：https://blog.csdn.net/zhaoweitco/article/details/10200339
