`

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

openlayers图片栅格 
阅读更多

不知道大家有没有遇到在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

0
顶
0
踩
分享到：
| 四轴飞控软件开发计划
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    openlayersAPI研究文档

    Bounds 是 OpenLayers 中的一个对象，用于描述地图的范围。 Map 的 getExtent() 方法可以返回一个 Bounds 对象。 Boxes 和 Box 是 OpenLayers 中的两个概念。一个 Boxes 对象可以包含多个 Box 对象，调用方法 boxes...

    openLayers geoserver常见问题

    在OpenLayers中进行精确测距，可以使用测量工具（OpenLayers.Control.Measure），它可以测量距离和面积。 OpenLayers的例子通常包括基本地图加载、图层管理、标记添加、弹窗显示等，可以通过官方文档找到许多示例...

    openlayers 手册

    OpenLayers 手册 OpenLayers 是一个功能强大的开源 JavaScript 库，用于创建交互式地图应用程序。本手册涵盖了 OpenLayers 的所有类的介绍说明，及其简单实例。 OpenLayers 对象 OpenLayers 对象提供了一切事物，...

    openlayers 教程

    首先，需要在 Geoserver 中发布一个 WMS 服务，然后使用 OpenLayers 加载地图数据。例如： ```javascript var wmsLayer = new OpenLayers.Layer.WMS("WMS Layer", "http://localhost:8080/geoserver/wms", { layers...

    openlayers地图重点属性摘录

    以下是对OpenLayers中一些关键概念和属性的详细说明： 1. **OpenLayers版本**： `version_number` 是一个标识OpenLayers库当前版本的常量，这对于跟踪更新和解决兼容性问题至关重要。 2. **BaseTypes**： ...

    OpenLayers项目分析

    在示例代码中，`OpenLayers.Map`用于创建地图，`OpenLayers.Layer.WMS`用于加载WMS服务，`OpenLayers.Bounds`定义了地图的边界，`OpenLayers.Layer.GML`则用于加载GML格式的地理数据。 OpenLayers的灵活性和强大...

    Openlayers教程

    本文详细介绍了如何使用OpenLayers加载地图、配置地图显示范围和分辨率、添加各种控制控件等基础操作。对于初学者而言，掌握这些基本技能是非常重要的，它们可以帮助开发者快速搭建出功能完备的地图应用。未来还可以...

    openLayers-API中文版.zip 由于下载次数较多，所需积分上去了，我已下调

    3. **基础数据类型**：在OpenLayers中，基础数据类型包括坐标（LonLat）、像素位置（Pixel）、地理矩形（Bounds）和投影（Projection）。这些数据类型是构建地图和处理地理信息的基础。 4. **事件**：OpenLayers ...

    openlayers加载arcgis发布的OGC WMS服务

    此外，OpenLayers支持多个WMS图层叠加，你可以根据需要添加更多来自不同服务的图层。 总之，通过OpenLayers加载ArcGIS发布的OGC WMS服务，可以让非ArcGIS用户利用丰富的ArcGIS地图数据，实现跨平台的地图应用。理解...

    OpenLayers地图重点属性摘录

    - **Bounds（边界）**：这是OpenLayers中的一个重要概念，用来定义地图视图的边界范围。 - **属性**：包括`left`、`bottom`、`right`、`top`和`centerLonLat`。 - **方法**： - `extend`：用于扩展边界范围，例如...

    OpenLayers开发过程

    var bounds = new OpenLayers.Bounds(); bounds.extend(new OpenLayers.LonLat(0, 0)); bounds.extend(new OpenLayers.LonLat(300, 300)); ``` 这里定义了一个矩形区域，左下角坐标为`(0, 0)`，右上角坐标为`...

    Openlayers经典例子.doc

    var extent = new OpenLayers.Bounds(-100.5, 40.5, -99.5, 41.5); map.zoomToExtent(extent); ``` #### 十一、记录上次操作历史 记录用户的地图操作历史有助于提供更好的用户体验。 - **实现方式**：利用`...

    openlayers资料收集

    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库来实现在地图上显示弹窗的功能。OpenLayers是一个强大的JavaScript库，专门用于创建交互式地图应用，支持多种数据源和地图服务，包括WMS（Web Map Service）。 首先，...

    Openlayer项目分析

    总的来说，OpenLayers是一个功能强大且灵活的JavaScript库，为Web开发人员提供了构建富互联网地图应用的工具，无论是在商业项目还是个人项目中，都是一个值得考虑的选择。其广泛的社区支持和持续的更新确保了其在GIS...

Magicbox
Global site tag (gtag.js) - Google Analytics