专栏首页跟牛老师一起学WEBGISArcGIS Image Server简介以及OL2中的加载

ArcGIS Image Server简介以及OL2中的加载

概述:

本文讲述Arcgis Image Server相关以及在OL2中如何加载Arcgis Server发布的影像服务。

ImageService简介:

ArcGIS Image Server为用户提供管理和处理海量栅格数据的能力,并提供基于GIS软件、CAD软件、影像处理软件和Web应用的企业级访问。

使用ArcGIS Image Server可将两个独立的阶段(影像处理和影像分发)集成在一起,从而管理员可仅维护原始影像,并可根据用户的需要动态的快速创建基于原始影像的多种影像产品。

ArcGIS Image Server支持影像服务的创建,包括多种格式,多种投影,多种分辨率的海量影像数据集。

ArcGIS Image Server的一个重要特征是其支持影像数据的 原始格式,而不需要创建特定的格式。

这些数据可以是预处理的产品,例如正射影像,也可以是半成品数据,例如空间配准之后仍存在重 叠区域的正射影像;或者原始影像,例如原始扫描帧或卫星影像。数据可以是不同的压缩或者未压缩格式,也可存储在DBMS中。 ArcGIS Image Server支持所有的ESRI支持的栅格格式,例如Geodatabase raster,TIFF,JPEG2000,也 支持特定数据厂商的格式,例如QuickBird,USGS DEM和MATCH-AT。

利用服务器强大的处理能力,可从单一的数据源生成多幅影像产品,每幅影像产品有不同的辐射处 理,几何处理,镶嵌规则和压缩方式。

支持的数据格式 o TIF o RAW(BIL,BIP,BSQ) o JPEG,PNG o Arc/Info ASCII Grid o Arc/Info Binary Grid (.adf) o Microsoft Windows Device Independent Bitmap (.bmp) o ERMapper Compressed Wavelets (.ecw) o ESRI .hdr Labelled o ENVI .hdr Labelled Raster o Graphics Interchange Format (.gif) o Erdas Imagine (.img) o JPEG JFIF (.jpg) o JPEG2000 (.jp2, .j2k) o Erdas 7.x .LAN and .GIS o NetCDF o PCI .aux Labelled o PCI Geomatics Database File o Portable Network Graphics (.png) o USGS ASCII DEM (.dem)

关键技术特性  ? 快速访问影像数据 ?  可伸缩的企业级客户/服务器架构 ?  海量影像管理 ?  直接访问多种文件格式和压缩格式 ?  动态的基于服务器的影像处理 ?  从单一源创建多种影像产品 ?  开放的GIS和Web客户端支持 ?  软件开发包 ?  以最少的时间和最小的工作量使影像可访问

几何处理?        变形 ?  地面到图像的转换(支持放射、投影、Warp Grid、正射纠正等转换方法) ?  输出到特定的投影 ?  按照footprint或接缝裁剪影像 ?  可定义的采样方法—最临近、双线性、立方卷积 ?  从图像到输出采用单一采样 ?  图像镶嵌(支持基于属性的镶嵌,如日期、质量、云覆盖等,也支持最临近底点镶嵌,支持不同方向视点的镶嵌,支持羽化的接缝线镶嵌等) 辐射处理?      从多波段影像提取/加入波段 ?  计算归一化植被指数(NDVI) ?  直方图拉伸-亮度、对比度和gamma ?  图像代数-图像A(+、-、×、/)图像B ?  分类-分类范围值 ?  颜色表-颜色索引值 ?  卷积过滤器-锐化影像 ?  全色融合-融合全色波段和多波段 ?  灰度-将彩色转为灰度 ?  光谱矩阵-转换伪彩色为假彩色 ?  光谱矩阵-转换伪彩色为假彩色

实现方式:

实现,通过网络请求,查看服务的请求地址,如下:

http://localhost:6080/arcgis/rest/services/lzugis/chinaimg/ImageServer/exportImage?f=image&bbox=20.573210198819083%2C15.563411013378278%2C183.21003918663314%2C57.48141724630558&imageSR=4326&bboxSR=4326&size=1292%2C333

其中有三个参数:

1、f,格式,为常量image;

2、bbox,是请求的地图四至;

3、size,是当前分辨率/比例尺下图层的大小。

因此,我们只需修改WMS图层中的URL如此格式即可。

完整代码如下:

OpenLayers.Layer.AgsImageLayer = OpenLayers.Class(OpenLayers.Layer.Grid, {
    DEFAULT_PARAMS: { service: "WMS",
                      version: "1.1.1",
                      request: "GetMap",
                      styles: "",
                      format: "image/jpeg"
                     },
    
    isBaseLayer: true,
    encodeBBOX: false,
    noMagic: false,
    layers:"",
    filter:"",
    yx: {},
    initialize: function(name, url, params, options) {
        var newArguments = [];
        params = OpenLayers.Util.upperCaseObject(params);
        this.layers = params.LAYERS;
        this.filter=params.FILTER;
        if (parseFloat(params.VERSION) >= 1.3 && !params.EXCEPTIONS) {
            params.EXCEPTIONS = "INIMAGE";
        } 
        newArguments.push(name, url, params, options);
        OpenLayers.Layer.Grid.prototype.initialize.apply(this, newArguments);
        OpenLayers.Util.applyDefaults(
                       this.params, 
                       OpenLayers.Util.upperCaseObject(this.DEFAULT_PARAMS)
                       );

        if (!this.noMagic && this.params.TRANSPARENT && 
            this.params.TRANSPARENT.toString().toLowerCase() == "true") {
            if ( (options == null) || (!options.isBaseLayer) ) {
                this.isBaseLayer = false;
            } 
            if (this.params.FORMAT == "image/jpeg") {
                this.params.FORMAT = OpenLayers.Util.alphaHack() ? "image/gif"
                                                                 : "image/png";
            }
        }

    },    
    reverseAxisOrder: function() {
        var projCode = this.projection.getCode();
        return parseFloat(this.params.VERSION) >= 1.3 && 
            !!(this.yx[projCode] || (OpenLayers.Projection.defaults[projCode] && 
            OpenLayers.Projection.defaults[projCode].yx));
    },
    getURL: function (bounds) {
        bounds = this.adjustBounds(bounds);
        var imageSize = this.getImageSize();
        var newParams = {};
        var reverseAxisOrder = this.reverseAxisOrder();
        newParams.BBOX = this.encodeBBOX ?
            bounds.toBBOX(null, reverseAxisOrder) :
            bounds.toArray(reverseAxisOrder);
        newParams.WIDTH = imageSize.w;
        newParams.HEIGHT = imageSize.h;
        var requestString = this.getFullRequestString(newParams);
        return requestString;
    },
    getFullRequestString:function(newParams) {
    	var url = this.url;
        if (OpenLayers.Util.isArray(url)) {
            url = this.selectUrl(s, url);
        }
        url = url+'/exportImage?f=image&bbox=${bbox}&size=${size}';
        var layers = "show:"+this.layers;
        var layerDefs = '{"'+this.layers+'":"'+this.filter+'"}';
        url = OpenLayers.String.format(url, {
        	'bbox': newParams.BBOX.toString(),
        	'size':newParams.WIDTH+","+newParams.HEIGHT
        });
        return url;
    },
    CLASS_NAME: "OpenLayers.Layer.AgsImageLayer"
});

页面调用代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>openlayers map</title>
    <link rel="stylesheet" href="../../../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
    <style>
        html, body, #map{
            padding:0;
            margin:0;
            height:100%;
            width:100%;
            overflow: hidden;
        }
    </style>
    <script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
    <script src="../../../plugin/jquery/jquery-1.8.3.js"></script>
    <script src="extend/AgsImageLayer.js"></script>
    <script>
        var map;
        var tiled;
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
        OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
        $(window).load(function() {
            var format = 'image/png';
            var bounds = new OpenLayers.Bounds(
                    73.45100463562233, 18.16324718764174,
                    134.97679764650596, 53.531943152223576
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 0.2403351289487642,
                projection: "EPSG:4326",
                units: 'degrees'
            };
            map = new OpenLayers.Map('map', options);
            var time = new Date();
            time = time.getTime();
            var url = "http://localhost:6080/arcgis/rest/services/lzugis/chinaimg/ImageServer";
            tiled = new OpenLayers.Layer.AgsImageLayer(
                    "agsimglyr",
                    url,
                    {
                        format: format
                    },
                    {
                        isBaseLayer: true,
                        singleTile: true
                    }
            );
            map.addLayers([tiled]);
            map.addControl(new OpenLayers.Control.Zoom());
            map.addControl(new OpenLayers.Control.Navigation());
            map.zoomToExtent(bounds);
        });
    </script>
</head>
<body>
<div id="map"></div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 大量POI点展示的一种解决方案——续

    在上文“ 大量POI点展示的一种解决方案”中,介绍了在在后台将POI生成图片在前台展示,文章中没有涉及到点的抽稀问题,也就是当点的数据量非常大的时候,这种展示方...

    lzugis
  • Openlayers离线加载天地图

    经过一个春节的休整,今天终于开始了!不论什么时候,都不要忘记学习,学习是一辈子的事情!今天,我来说说如何实现天地图的离线以及Openlayers加载离线数据实现...

    lzugis
  • 大量POI的解决方案2

    在前面的文章中,讲述了通过“抽稀+后台生成图片”的方式解决大量POI点展示的一种思路,后面看了tilestache的矢量切片方式,自己仔细思考了下,提出了本文大...

    lzugis
  • Vue + Flask 实战开发系列(九)

    接着上一回分享的继续,上一篇文章已经实现了作者信息的添加和列表功能。接下来我们继续来完成剩余的编辑和删除作者信息的功能。这两个功能中,除了更新功能略微复杂一些,...

    TalkPython
  • Mybatis深入源码分析之SqlSessionFactoryBuilder源码分析

    通过上述代码可知:使用了门面模式:定义了Resource类,把复杂过程封装起来,方便用户使用,返回reader为InputStreamReader,指的是读取的...

    须臾之余
  • canvas 绘点图

    deepcc
  • 用初中数学知识撸一个canvas环形进度条

    周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress。近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别...

    Tusi
  • h5小游戏——HitRocket

    一.游戏介绍 游戏介绍: 不断有携带字母炸弹的火箭撞向地面,请根据火箭身上的字母敲击键盘,每一次对应的敲击会击落携带该字母的火箭并使得分加一,每一架火箭撞到地...

    lonelydawn
  • JS高级-数据结构的封装

    最近在看了《数据结构与算法JavaScript描述》这本书,对大学里学的数据结构做了一次复习(其实差不多忘干净了,哈哈)。如果能将这些知识捡起来,融入到实际工作...

    小古哥
  • jsencrypt参数前端加密c#解密

          写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

    用户1055830

扫码关注云+社区

领取腾讯云代金券