<body>

    <div id="map"></div>

    <script>

        var extent = [0, 0, 1024, 968];//表示图片的尺寸

        var projection = new ol.proj.Projection({

            code: 'EPSG:3857',

            extent: extent

        });

        var imageLayer = new ol.layer.Image({

            source: new ol.source.ImageStatic({

                url: 'image/online_communities.png',

                projection: projection,

                imageExtent: extent

            })

        });

        var map = new ol.Map({  //初始化map

            target: 'map',

            layers: [

                imageLayer

            ],

            view: new ol.View({

                projection: projection,

                center: ol.extent.getCenter(extent),

                zoom: 2

            })

        });

    </script>

</body>

Openlayers 3 的 imagelayer的更多相关文章

  1. OpenLayers 3 中Layers的相关知识

    昨天自己一遍又一遍的把API里Accessible map那个例子写下来,终于好像有熟悉一点点.找到一篇博文详细讲Layers的.整理一下贴出来(本来想在网上做笔记可以重新排版,比写在本子上要容易有结 ...

  2. openlayers三：添加图片和图标

    openlayers添加图片是指: 添加在地图上的图片会跟随地图同步放大缩小 而添加图标是指: 添加在地图上的图片不会跟随地图同步放大缩小 添加图片: 首先初始化图片图层: initImageLaye ...

  3. 使TileCache配合OpenLayers，产生地图瓦块的一些资料（转）

    在tilecache.cfg中配置好被切割地图的参数,比如: [mytestmap]layers=3,5,7,8type=WMSurl=http://localhost/arcgis/services ...

  4. HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用

    在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web  ...

  5. OpenLayers.2.10.Beginners.Guide---第一章

    从网上下载openlayers2,解压取得img theme 文件夹和openlayes.js文件.放在同一文件夹下用phpstorm打开. 创建index.html-------------每一行都 ...

  6. OpenLayers的定制

    最近因为工作的需要,把主流的的一些GIS的javascript库看了一遍,主要是ArcGIS Server API for Javascript,Openlayers和Leaflet. 先说说ArcG ...

  7. OpenLayers工作原理

    1.数据组织 OpenLayers通过同层(Layer)进行组织渲染,然后通过数据源设置具体的地图数据来源.因此,Layer与Source是密切相关的对应关系,缺一不可.Layer可看做渲染地图的层容 ...

  8. openlayers 3 简书

    1. 简书http://www.jianshu.com/p/6785e755fa0d 2. 文档 http://anzhihun.coding.me/ol3-primer/ch03/03-02.htm ...

  9. OpenLayers添加点【php请求MySQL数据库返回GeoJSON数据】

    php请求MySQL数据库返回GeoJSON数据的实现方法请参见: http://www.cnblogs.com/marost/p/6234514.html OpenLayers[v3.19.1-di ...

随机推荐

  1. CSS制作照片墙

    资料来源:慕课网(点击这里) 课程结束后有两个效果: 效果一:CSS制作照片墙(点击这里) 效果二:旋转出现文字效果(点击这里) 实现代码: <!DOCTYPE html> <htm ...

  2. lua中获取时间

    os.date()    返回  XX/XX/XX XX:XX:XX 月/日/年    时:分:秒 os.time()   返回的是从1970年1月1日到现在的经过的秒数. 例如: print(os. ...

  3. GLSL 纹理贴图

    #include <ork/render/FrameBuffer.h> #include <ork/scenegraph/SceneManager.h> #include &l ...

  4. HDU 1509 Windows Message Queue(队列)

    题目链接 Problem Description Message queue is the basic fundamental of windows system. For each process, ...

  5. 我使用的Bash脚本模板

    在Linux环境下(包括在相应的模拟环境,如Windows中的Cygwin)工作的时间久了,就会慢慢积累出一些自己写的小脚本程序,用于加速日常的操作与工作流程,如自动挂载与卸载U盘,映射网络驱动器,数 ...

  6. [ An Ac a Day ^_^ ] UVALive 7270 Osu! Master

    2015icpc北京区域赛的签到题 还是很签到的 一次就过了 题意呢 就是统计B C后最长上升序列还有S的个数 当然B C要被S分割开…… /* *************************** ...

  7. Nginx简单配置，部分来源于网络

    nginx.conf listener监听端口 server_name监听域名 location{}是用来为匹配的 URI 进行配置,URI 即语法中的“/uri/”.location  / { }匹 ...

  8. 字符串长度截取换行/n

    /// <summary>        /// 格式化字符串长度,超出部分显示省略号,区分汉字跟字母.汉字2个字节,字母数字一个字节        /// </summary> ...

  9. C++常用库函数

    C++常用库函数  转自:http://blog.csdn.net/sai19841003/article/details/7957115 1.常用数学函数 头文件 #include <math ...

  10. xml 和json 数据格式及解析

    来源:http://blog.jobbole.com/79252/ 引言 NOKIA 有句著名的广告语:“科技以人为本”.任何技术都是为了满足人的生产生活需要而产生的.具体到小小的一个手机,里面蕴含的 ...