刚开始接触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 οnlοad="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 οnlοad="init()">
<div id="map" style="width:500px;height:500px;"></div>
</body>
</html>
好了,到此为止!贴别要感谢那些在网上分享学习经验的前辈们,正是你们的分享才让我们这些后来的学习者更快的学习。谢谢!