OpenLayers3 学习心得(二)——开发配置
来源:互联网 发布:淘宝卖家怎么发送链接 编辑:程序博客网 时间:2024/05/17 06:05
由于ol是js类库,因此在开发时只需要将ol引用到页面中。
1 类库下载
编译好的类库可以到ol的官网下载,但是由于国内屏蔽了github 可能下载不了,解决方法:- 可以重新定向host;
- 也可以到csdn上下载:http://download.csdn.net/download/longshengguoji/8053751
- 没有积分的可以到网盘:http://yunpan.cn/cAreGWFvrcTkE 访问密码 f994
2 文件引用
实测至少引用:ol-debug.js和base.js两个文件,因为本人使用了自带的样式因此引用的文件如下:
3 开发方式
- 可以直接使用html页面方式;
- 使用j2ee方式;
- 使用asp.net方式:
- 使用其他方式……;
4. 实例
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>ol3</title><link rel="stylesheet" href="css/ol.css"><link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="css/layout.css"><script type="text/javascript" src="ol3/ol-debug.js"></script><script type="text/javascript" src="goog/base.js"></script><style > a.skiplink{ position: absolute; clip: rect(1px,1px,1px,1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } a.skiplink:focus{ clip: auto; height: auto; width: auto; background-color: #ffffff; padding: 0.3em; }</style> <script type="text/javascript"> function init(){ var map=new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ //source: new ol.source.MapQuest({layer: 'sat'}) source: new ol.source.Stamen({ layer: 'watercolor' }) }) ], view: new ol.View({ center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }) }); //添加比例尺,单位m var scaleLineControl=new ol.control.ScaleLine(); scaleLineControl.setUnits(ol.control.ScaleLineUnits.METRIC); map.addControl(scaleLineControl); //缩放工具条 var zoomSilder=new ol.control.ZoomSlider(); map.addControl(zoomSilder); } </script></head><body onload="init()"><div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./"><img src="images/logo.png" alt="">Openlayers 3 Examples</a> </div> </div></div><div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <a class="skiplink" href="#map">Go to map</a> <div id="map" class="map" tabindex="0"/> </div> </div> <div class="row-fluid"> <div class="span12"> <h4 id="title">Accessibility example</h4> <p id="shordesc">Example of an accessible map.</p> <div id="docs"> <p>This page's <code>map</code> element has its <code>tabindex</code> attribute set to <code>"0"</code>, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the <code>map</code> element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.</p> <p>When clicked the "Zoom in" and "Zoom out" buttons below the map zoom the map in and out, respectively. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.</p> <p>See the <a href="accessible.js" target="_blank">accessible.js source</a> to see how this is done.</p> </div> <div id="tags">accessibility,tabindex</div> </div> </div></div></body></html>点击页面,效果如下:
0 0
- OpenLayers3 学习心得(二)——开发配置
- OpenLayers3 学习心得(一)——体系结构
- OpenLayers3 学习心得(三)——绘图
- OpenLayers3 学习心得(五)——测量
- OpenLayers3 学习心得(四)——空间查询
- OpenLayers3 学习心得(六)——WMS服务
- Openlayers3实战(二)
- openlayers3个人学习心得之Cluster
- openlayers3个人学习心得之LineString
- openlayers3—地图图层数据来源(ol.source)
- 《卓有成效的管理者》——学习心得(二)
- Oopencv学习心得(二)——绘制直方图
- 展讯平台驱动学习心得(二) —键盘扫描码的配置和使用
- SpringMvc学习心得(二)spring注解配置原理浅析
- OpenLayers3基础教程——OL3基本概念
- OpenLayers3基础教程——加载资源
- OpenLayers3基础教程——OL3 介绍control
- OpenLayers3基础教程——OL3之Popup
- .NET 序列化对象
- ubuntu 安装jdk6
- soft world
- 使用 任务管理器
- Spring3.0 AOP 详解
- OpenLayers3 学习心得(二)——开发配置
- 网站连接速度测试
- 用RMAN恢复RAC到单实例过程
- javabase简记 --第五天
- 抽屉吐司——自定义的Toast
- Word Ladder II
- HDU 1078 FatMouse and Cheese
- 大气参数计算子程序
- ASP.NET MVC实现验证码功能