Oepnlayer结合HTML5 Canvas绘制底图与站点，可实现缩放平移

1、准备

引用库：

元素：

 

声明：

var map;

//canvas负责绘图，map_element负责监听鼠标事件（map_element在上，canvas在下）
var canvas,context,map_element;

canvas = document.getElementById("canvas");
map_element=document.getElementById('map_element');

2、Openlayer加载GeoServer发布的Dynamic图层

var options = {
	maxExtent:new 	OpenLayers.Bounds(497818.184013496,299871.242033547,503595.878318394,312211.085295515),
	maxResolution:125000,
	units:"m",
	center: new OpenLayers.LonLat(498925.826946, 304150.66056),
	projection: "EPSG:2436",				
	numZoomLevels: 16
};
map = new OpenLayers.Map('map_element',options);
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
	//geoserver所在服务器地址
	"http://localhost:8281/geoserver/mytest/wms", 
	{
		layers: "mytest:rainstation_output",		
	});
map.addLayer(wms);

3、Openlayer添加站点

var pointFeature = new OpenLayers.Feature.Vector(point, null, style_point); 
ectorLayer_rain.addFeatures([pointFeature]);  
var marker = new OpenLayers.Marker(new OpenLayers.LonLat(datas_rain.points[i].lon,datas_rain.points[i].lat),jz.clone());  
markers_rain.addMarker(marker);  
map.addLayer(markers_rain);  

4、重要设置

//关键，设置中心点
map.setCenter(new OpenLayers.LonLat(498925.826946, 304150.66056), 13);
//将图层隐藏，否则map为白色，会覆盖canvas
wms.setVisibility(false);

5、Canvas绘制底图，geometry为线与面

	function funDraw(extent){
		context.clearRect(0,0,canvas.width,canvas.height);//清空canvas
		for(var i=0;i

6、Openlayer图层与Canvas联动（鼠标的平移缩放）

	//监听鼠标拖拽事件
	map_element.οnmοusedοwn=function(event){
		map_element.οnmοusemοve=function(event){
			var extent=map.getExtent();
			map_element.style.cursor="move";
			funDraw(extent);//重新绘制地图
		}
		map_element.οnmοuseup=function(){
			map_element.οnmοusemοve=null;
			map_element.οnmοuseup=null;
			map_element.style.cursor="default";
		}
		map_element.οnmοuseοut=function(){
			map_element.οnmοusemοve=null;
			map_element.οnmοuseup=null;
			map_element.style.cursor="default";
		}
	}
	
	//监听鼠标滚轮事件
	map_element.onmousewheel=map_element.οnwheel=function(event){//chrome firefox浏览器兼容
		var t=setTimeout(test,5);//延迟执行，可获取地图最后状态的Extent
	}