openlayers简单例子

最新推荐文章于 2024-08-17 09:00:00 发布

vic_zhaowei

最新推荐文章于 2024-08-17 09:00:00 发布

阅读量3.1k

点赞数

目录结构：

效果图：

代码：

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

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