OpenLayers3 学习心得（二）——开发配置
目录
由于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方式：
- 使用其他方式……；
顺便推荐一款js的ide：webstorm 智能索引很好用。
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>点击页面，效果如下：
转载自：https://blog.csdn.net/xiaohou66/article/details/41311063
