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";
cont
a5a0
ext.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
}