不知道大家有没有遇到在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
相关推荐
Bounds 是 OpenLayers 中的一个对象，用于描述地图的范围。 Map 的 getExtent() 方法可以返回一个 Bounds 对象。 Boxes 和 Box 是 OpenLayers 中的两个概念。一个 Boxes 对象可以包含多个 Box 对象，调用方法 boxes...
在OpenLayers中进行精确测距，可以使用测量工具（OpenLayers.Control.Measure），它可以测量距离和面积。 OpenLayers的例子通常包括基本地图加载、图层管理、标记添加、弹窗显示等，可以通过官方文档找到许多示例...
在 OpenLayers 中，删除 Layer 中的 marker 可以通过以下代码实现： ```javascript var layer = map.getLayer('myLayer'); layer.removeMarker(marker); ``` 其中，`map` 是 OpenLayers的地图对象，`layer` 是要删除...
OpenLayers 手册 OpenLayers 是一个功能强大的开源 JavaScript 库，用于创建交互式地图应用程序。本手册涵盖了 OpenLayers 的所有类的介绍说明，及其简单实例。 OpenLayers 对象 OpenLayers 对象提供了一切事物，...
首先，需要在 Geoserver 中发布一个 WMS 服务，然后使用 OpenLayers 加载地图数据。例如： ```javascript var wmsLayer = new OpenLayers.Layer.WMS("WMS Layer", "http://localhost:8080/geoserver/wms", { layers...
以下是对OpenLayers中一些关键概念和属性的详细说明： 1. **OpenLayers版本**： `version_number` 是一个标识OpenLayers库当前版本的常量，这对于跟踪更新和解决兼容性问题至关重要。 2. **BaseTypes**： ...
在示例代码中，`OpenLayers.Map`用于创建地图，`OpenLayers.Layer.WMS`用于加载WMS服务，`OpenLayers.Bounds`定义了地图的边界，`OpenLayers.Layer.GML`则用于加载GML格式的地理数据。 OpenLayers的灵活性和强大...
本文详细介绍了如何使用OpenLayers加载地图、配置地图显示范围和分辨率、添加各种控制控件等基础操作。对于初学者而言，掌握这些基本技能是非常重要的，它们可以帮助开发者快速搭建出功能完备的地图应用。未来还可以...
3. **基础数据类型**：在OpenLayers中，基础数据类型包括坐标（LonLat）、像素位置（Pixel）、地理矩形（Bounds）和投影（Projection）。这些数据类型是构建地图和处理地理信息的基础。 4. **事件**：OpenLayers ...
- **控件集成**：OpenLayers提供了多种控件（如`OpenLayers.Control.LayerSwitcher`），可以在地图界面上增加工具栏或按钮，提高用户的交互性和功能性。 #### 五、框架分析与API实现 - **框架结构**：OpenLayers...
此外，OpenLayers支持多个WMS图层叠加，你可以根据需要添加更多来自不同服务的图层。 总之，通过OpenLayers加载ArcGIS发布的OGC WMS服务，可以让非ArcGIS用户利用丰富的ArcGIS地图数据，实现跨平台的地图应用。理解...
- **Bounds（边界）**：这是OpenLayers中的一个重要概念，用来定义地图视图的边界范围。 - **属性**：包括`left`、`bottom`、`right`、`top`和`centerLonLat`。 - **方法**： - `extend`：用于扩展边界范围，例如...
var bounds = new OpenLayers.Bounds(); bounds.extend(new OpenLayers.LonLat(0, 0)); bounds.extend(new OpenLayers.LonLat(300, 300)); ``` 这里定义了一个矩形区域，左下角坐标为`(0, 0)`，右上角坐标为`...
var extent = new OpenLayers.Bounds(-100.5, 40.5, -99.5, 41.5); map.zoomToExtent(extent); ``` #### 十一、记录上次操作历史 记录用户的地图操作历史有助于提供更好的用户体验。 - **实现方式**：利用`...
map.zoomToExtent(new OpenLayers.Bounds(-3.922119, 44.335327, 4.866943, 49.553833)); // 添加 GML 图层 map.addLayer(new OpenLayers.Layer.GML("GML", "gml/polygon.xml")); ``` 以上内容涵盖了 ...
在本文中，我们将深入探讨如何使用OpenLayers库来实现在地图上显示弹窗的功能。OpenLayers是一个强大的JavaScript库，专门用于创建交互式地图应用，支持多种数据源和地图服务，包括WMS（Web Map Service）。 首先，...
总的来说，OpenLayers是一个功能强大且灵活的JavaScript库，为Web开发人员提供了构建富互联网地图应用的工具，无论是在商业项目还是个人项目中，都是一个值得考虑的选择。其广泛的社区支持和持续的更新确保了其在GIS...