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

最新推荐文章于 2022-05-05 14:01:37 发布

sunsides

最新推荐文章于 2022-05-05 14:01:37 发布

阅读量598

点赞数

分类专栏：技术笔记我的软件地理信息系统 GIS 文章标签： openlayers 图片栅格

技术笔记同时被 3 个专栏收录

111 篇文章 0 订阅

订阅专栏

地理信息系统 GIS

13 篇文章 0 订阅

订阅专栏

我的软件

5 篇文章 0 订阅

订阅专栏

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

sunsides

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
openlayers中叠加图片bounds计算小工具

不知道大家有没有遇到在OpenlayersG地图中叠加图片显示的情况，这里发布一个我用来计算图片bounds的工具代码：转载请注明出处：tedeum.iteye.com&lt;!DOCTYPE html&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Con...
复制链接

扫一扫