关于OpenLayers的初步使用小例子
刚开始接触openlayers的时候感觉GIS地图太难，压力太大，差点就要放弃这个了，后来随着慢慢的熟悉，感觉用起来确实也挺方便的。当然得感谢网上很多的前辈分享的经验。下面我来结合我自己的实际情况来讲讲openlayers的简单的功能的实现：
1.去官网下载OpenLayers，下载地址：http://openlayers.org/
有用到geoserver的可以去网上找找资料看看，我这里因为业务需求简单，就直接用的本地图片了，没有用geoserver。
下载之后解压，将img、lib、theme、OpenLayers.js这几个目录和文件拷贝到你的项目路径下。最好都放在一个路径下面。
2.在页面引入OpenLayers.js
<script type="text/javascript" src="OpenLayers.js"></script>3.写js方法，创建地图：
var map = null;
function init(){
<!-- create map -->
var options={
controls:[new OpenLayers.Control.KeyboardDefaults()]
};//添加键盘控制的控件
map = new OpenLayers.Map('map',options);//创建地图对象map,这里的map是用来显示的div的id
var bounds = new OpenLayers.Bounds();//设置边界
bounds.extend(new OpenLayers.LonLat(0,0));//扩展边界
bounds.extend(new OpenLayers.LonLat(500,500));
bounds.toBBOX();
var size = new OpenLayers.Size(400,400);
var wms = new OpenLayers.Layer.Image('b','img/maptest.jpg',bounds,size);//创建image类型的图层
map.addLayer(wms);//将图层添加到地图里面
map.setBaseLayer(wms);//设置图层为基层
map.zoomToMaxExtent();
<!-- add mapControl tools -->//下面几个事添加map控件的，根据自己需要添加
map.addControl(new OpenLayers.Control.PanZoomBar({
position:new OpenLayers.Pixel(2,15)
}));
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.Navigation());好了，接下来就是显示地图啦，注意：上面代码中可以看出图片的路径和格式，这个可以根据需要更换。
<body onload="init()">
<div id="map" style="width:500px;height:500px;"></div>
</body>然后可以运行一下，就可以看到地图啦：
好啦，地图可以创建啦，接下来就是给地图创建标注点啦：
还是再init（）方法里面：
markers = new OpenLayers.Layer.Markers("Hello");
var lonlat = new OpenLayers.LonLat(x,y);//x、y为标注点的坐标，自己指定
markers = autoAddMarker(lonlat);
map.addLayer(markers);
}//init()结束
function getIcon(){
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2),-size.h);
var icon = new OpenLayers.Icon('img/marker.png',size,offset);
return icon;
}
function autoAddMarker(lonlat){
var marker = new OpenLayers.Marker(lonlat,getIcon());
marker.events.register("click", marker, function(evt){
alert("Hello");
});
markers.addMarker(marker);
return markers;
}这样就可以在指定的坐标点产生标注图标了。
接下来你可能还会用到给地图添加文字标注，下面我们就一起来看看怎么添加文本标注吧：
还是再init()方法里面：
var style = new OpenLayers.Style({
label:"${type}",
fontColor:"#289E08",
fontFamily:"sans-serif",
fontWeight:"bold",
fontSize:30
});//这个style是文本标注图层的style，在这里可以设置文本标注的各种属性
var point = new OpenLayers.Geometry.Point(126,262);//创建文本标注的坐标点
vectorLayer = new OpenLayers.Layer.Vector("labelLayer",{
styleMap:new OpenLayers.StyleMap(style)
});//创建一个文本标注的图层，一个图层上可以有多个标注
var feature = new OpenLayers.Feature.Vector(point);//这一步才是创建文本标注
feature.attributes={
type:"Hello"
};//设置文本标注的内容
var feature = [feature];//因为addFeatures()的参数是数组，所以这里把feature放到数组里面
map.addLayer(vectorLayer);//将文本标注图层添加到map里面
vectorLayer.addFeatures(feature);//将该文本标注添加到文本标注图层上面接下来给我做的完整的小例子给大家，希望可以帮到跟我一样刚接触OpenLayers的同学来学习。
<html>
<head>
<title>Text</title>
<script type="text/javascript" src="OpenLayers.js"></script>
<script type="text/javascript">
var map = null;
var markers = null;
var vectorLayer=null;
function init(){
<!-- create map -->
var options={
controls:[new OpenLayers.Control.KeyboardDefaults()]
};
map = new OpenLayers.Map('map',options);
var bounds = new OpenLayers.Bounds();
bounds.extend(new OpenLayers.LonLat(0,0));
bounds.extend(new OpenLayers.LonLat(500,500));
bounds.toBBOX();
var size = new OpenLayers.Size(400,400);
var wms = new OpenLayers.Layer.Image('b','img/maptest.jpg',bounds,size);
map.addLayer(wms);
map.setBaseLayer(wms);
map.zoomToMaxExtent();
<!-- add mapControl tools -->
map.addControl(new OpenLayers.Control.PanZoomBar({
position:new OpenLayers.Pixel(2,15)
}));
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.Navigation());
<!-- create textLayers -->
var style = new OpenLayers.Style({
label:"${type}",
fontColor:"#289E08",
fontFamily:"sans-serif",
fontWeight:"bold",
fontSize:30
});
var point = new OpenLayers.Geometry.Point(126,262);
vectorLayer = new OpenLayers.Layer.Vector("labelLayer",{
styleMap:new OpenLayers.StyleMap(style)
});
var feature = new OpenLayers.Feature.Vector(point);
feature.attributes={
type:"Hello",
fontColor:"#7C99E2"
};
var feature = [feature];
map.addLayer(vectorLayer);
vectorLayer.addFeatures(feature);
<!-- create markerLayers -->
markers = new OpenLayers.Layer.Markers("Hello");
var lls = [[112,252],[86,34],[150,350],[100,200],[450,300]];
for(var i=0;i<lls.length;i++){
var arr = lls[i];
var lonlat = new OpenLayers.LonLat(arr[0],arr[1]);
markers = autoAddMarker(lonlat,i);
}
map.addLayer(markers);
}
function getIcon(){
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2),-size.h);
var icon = new OpenLayers.Icon('img/marker.png',size,offset);
return icon;
}
function autoAddMarker(lonlat,i){
var marker = new OpenLayers.Marker(lonlat,getIcon());
marker.events.register("click", marker, function(evt){
evt = getEvt(i);
window.location.href=evt+".html";
});
markers.addMarker(marker);
return markers;
}
function getEvt(i){
var evt=null;
if(i==0){
evt="Test2";
}else if(i==1){
evt="Test3";
}else if(i==2){
evt="Test4";
}else if(i==3){
evt="Test5";
}else if(i==4){
evt="Test6";
}
return evt;
}
</script>
</head>
<body onload="init()">
<div id="map" style="width:500px;height:500px;"></div>
</body>
</html>好了，到此为止！贴别要感谢那些在网上分享学习经验的前辈们，正是你们的分享才让我们这些后来的学习者更快的学习。谢谢！
转载自：https://blog.csdn.net/iteye_7627/article/details/82524462
