html5拖动layer,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

{

if(baseMap_Json.features[i].geometry.type=="Line")

{

for(var j=0;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

{

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.ο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

}