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

来源：互联网发布：js 上传图片预览编辑：程序博客网时间：2024/05/05 14:41

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为白色，会覆盖canvaswms.setVisibility(false);

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

function funDraw(extent){context.clearRect(0,0,canvas.width,canvas.height);//清空canvasfor(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}

1 0