openlayers中叠加图片bounds计算小工具

本文主要是介绍openlayers中叠加图片bounds计算小工具，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

不知道大家有没有遇到在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 οnlοad="doOnload();"><div id="map"><input type="text" name="" id ="f" value="0.1"><input type="button" value="+上" οnclick="addTop();"><input type="button" value="-上" οnclick="subTop();"><input type="button" value="+下" οnclick="addBottom();"><input type="button" value="-下" οnclick="subBottom();"><input type="button" value="+左" οnclick="addLeft();"><input type="button" value="-左" οnclick="subLeft();"><input type="button" value="+右" οnclick="addRight();"><input type="button" value="-右" οnclick="subRight();"><input type="button" value="显示结果" οnclick="showResult();"><input type="text" name="r" id="result"></div></body>
</html>

转载请注明出处：tedeum.iteye.com

这篇关于openlayers中叠加图片bounds计算小工具的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！