不知道大家有没有遇到在OpenlayersG地图中叠加图片显示的情况,这里发布一个我用来计算图片bounds的工具代码: 转载请注明出处:tedeum.iteye.com
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="Author" content="tedeum.iteye.com"> <meta name="Description" content="openlayers叠加图片bounds计算小工具"> <title></title> <script src="../jquery-1.10.1.min.js"></script> <script src="../openlayers/OpenLayers.js"></script> <style type="text/css"> html, body, #map { background: #BADDA5; margin: 0; width: 100%; height: 100%; } /** * Map Examples Specific */ .smallmap { width: 512px; height: 256px; border: 1px solid #ccc; } </style> <script type="text/javascript"> <!-- var bounds = new OpenLayers.Bounds(97.00558699999989, 21.00948400000005, 105.98950200000028, 30.00842); var graphic = new OpenLayers.Layer.Image( 'City Lights', '../../FtpData/F21/201310080800.L000.F21.100.gif', bounds, new OpenLayers.Size(800, 800), { isBaseLayer: false, opacity: 0.3, alwaysInRange: true } ); var gisUrl = "http://10.180.81.72:8080/geoserver/wms"; var vectorLayer = null; var map = null; function doOnload() { map = new OpenLayers.Map({ div: "map", maxExtent: [97.027587, 21.166484, 106.739502, 29.31642], center: new OpenLayers.LonLat(101.857909, 24.726875) }); //基础地图 var map_back = new OpenLayers.Layer.WMS("地图背景", gisUrl, { 'layers': 'sdgis:MAP_BACK', transparent: true, format: 'image/gif' }, { isBaseLayer: true } ); var map_dqj = new OpenLayers.Layer.WMS("地区界", gisUrl, { 'layers': 'sdgis:DQJ', transparent: true, format: 'image/gif' }, { isBaseLayer: false } ); map.addLayers([map_back, map_dqj, graphic]); map.zoomToExtent([97.027587, 21.166484, 106.739502, 27.467659], true); } function refreshLayer() { map.removeLayer(graphic); graphic = new OpenLayers.Layer.Image( 'City Lights', '../../FtpData/F21/201310080800.L000.F21.100.gif', bounds, new OpenLayers.Size(800, 800), { isBaseLayer: false, opacity: 0.3, alwaysInRange: true } ); map.addLayer(graphic); } function getf() { return Number(document.getElementById("f").value); } function addTop() { bounds.top += getf(); refreshLayer(); showResult(); } function subTop() { bounds.top -= getf(); refreshLayer(); showResult(); } function addBottom() { bounds.bottom += getf(); refreshLayer(); showResult(); } function subBottom() { bounds.bottom -= getf(); refreshLayer(); showResult(); } function addLeft() { bounds.left += getf(); refreshLayer(); showResult(); } function subLeft() { bounds.left -= getf(); refreshLayer(); showResult(); } function addRight() { bounds.right += getf(); refreshLayer(); showResult(); } function subRight() { bounds.right -= getf(); refreshLayer(); showResult(); } function showResult() { document.getElementById("result").value = bounds.left + ", " + bounds.bottom + ", " + bounds.right + ", " + bounds.top; } //--> </script> </head> <body onload="doOnload();"> <div id="map"> <input type="text" name="" id ="f" value="0.1"> <input type="button" value="+上" onclick="addTop();"> <input type="button" value="-上" onclick="subTop();"> <input type="button" value="+下" onclick="addBottom();"> <input type="button" value="-下" onclick="subBottom();"> <input type="button" value="+左" onclick="addLeft();"> <input type="button" value="-左" onclick="subLeft();"> <input type="button" value="+右" onclick="addRight();"> <input type="button" value="-右" onclick="subRight();"> <input type="button" value="显示结果" onclick="showResult();"> <input type="text" name="r" id="result"> </div> </body> </html>
转载请注明出处:tedeum.iteye.com
相关推荐
openlayers加载静态图片作为底图,操作图片流畅,可控显示范围和等级
刚刚使用openlayers做了一个简单的小例子,注释很全,很简单,将本地的图片作为背景,能够按照坐标添加任意个标记
关于openlayers开发的一个中文手册,供大家学习。
openlayers 实现在地图上添加文字标注。为图片注记添加文本标签
openlayers中文文档,openlayers中文文档api
使用openlayers3实现动态点闪烁功能,结合canvas技术,加载到点到地图上
openlayers中文文档,openlayers中文文档api
OpenLayers中文学习文档,原始文档是.md格式的转换成Html后转换成了chm格式,感谢原文作者。
ol openlayers 中文 文档 翻译 最新编译、不全、差评的别下、嫌分高别下
请问在openlayers中如何删除Layer中的marker 3 在层中加了一个标记怎么永久的存到地图上 3 OpenLayers 如何设死地图边界 3 谁写过openlayers解析xml 3 openlayer.popup 3 OpenLayers 怎么做字段标注 4 字段标注不是...
openlayers中自定义工具条,有需要的自己下载,16年刚玩openlayers的时候做的,一些东西已经过时了
openlayers 添加标注 markers 怎么给Google地图添加标注
openLayers的缩放级别
openlayers添加云层覆盖物至地图上,自定义移动范围,增添地图动态效果
openLayers-API中文,全,我找了好久,提供给大家
用户还可以用简单的图片地图作为背景图,与其他的图层在OpenLayers 中进行叠加。除此之外,OpenLayers 支持Open GIS 协会制定的WMS(Web Mapping Service)和WFS(Web Feature Service)等网络服务规范,可以通过...
针对Openlayers3写的一套工具包,基于v3.15.1版本。 开发计划 目前主要计划完成的功能模块: 快速构建地图 地图大小自适应 常用功能集成 简便画点线面 使用说明 在加载ol3toolkit.js前先加载js文件夹里的其他引用...
openLayers中文版api全翻译