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

1、准备

引用库：

<script type=’text/javascript’ src=’OpenLayers.js’></script>
<script type=’text/javascript’ src=’jQuery.js’></script>

元素：

<div id=’map_element’ style=’position:absolute;width:1024px;height:768px;overflow:hidden;margin:50px;border:1px solid pink;z-index:1;’></div> 
<canvas id=”canvas” style=”position:absolute;border:3px solid #aaa;display:block;margin:50px;”></canvas>

声明：

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<baseMap_Json.features.length;i++)
		{
			if(baseMap_Json.features[i].geometry.type=="Line")
			{
				for(var j=0;j<baseMap_Json.features[i].geometry.coordinates.length;j++)
				{
					//自己修改后的公式，coordinates后加了[0]，是因为调试后发现border.json的coordinates数据比模拟数据多了一对[]
					var X=(baseMap_Json.features[i].geometry.coordinates[0][j][0]-extent.left)*canvas.width/(extent.right-extent.left);
					var Y=(extent.top-baseMap_Json.features[i].geometry.coordinates[0][j][1])*canvas.height/(extent.top-extent.bottom);
					if(j==0)
					{
						context.beginPath();
						context.moveTo(X,Y);
					}
					else if(j==baseMap_Json.features[i].geometry.coordinates[0].length-1)
					{
						context.lineTo(X,Y);
						context.strokeStyle = "blue";
						context.stroke();
					}
					else
					{
						context.lineTo(X,Y);
					}
				}				
			}
			else if(baseMap_Json.features[i].geometry.type=="Polygon")
			{
				for(var j=0;j<baseMap_Json.features[i].geometry.coordinates[0].length;j++)
				{
					var X=(baseMap_Json.features[i].geometry.coordinates[0][j][0]-extent.left)*canvas.width/(extent.right-extent.left);
					var Y=(extent.top-baseMap_Json.features[i].geometry.coordinates[0][j][1])*canvas.height/(extent.top-extent.bottom);
					if(j==0)
					{
						context.beginPath();
						context.moveTo(X,Y);
					}
					else if(j==baseMap_Json.features[i].geometry.coordinates[0].length-1)
					{
						context.lineTo(X,Y);
						context.closePath();
						context.strokeStyle = "black";
						context.stroke();
					}
					else
					{
						context.lineTo(X,Y);
					}
				}
			}
		}
	}

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

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

转载自：https://blog.csdn.net/u010534192/article/details/68921737