本文档介绍了如何使用OpenLayers3创建Web地图应用的基础知识。包括设置地图、添加图层及控制视图等内容。
译自：http://openlayers.org/
Openlayers3实战
欢迎来到Openlayers3实战。设计本实战的目的就是使读者对Openlayers3作为一个web地图解决方案有一个全面的认识。本练习假定读者已经有一个运行http服务与一个文本编辑器。
本次实战由多个模块组成。在每个模块，读者将执行一套用来实现特定的目标任务。每个模块都建立在前一个模块的经验教训之上和通过迭代的方式建立读者的知识库。
本实践包括以下模块：
基础主题
基础
学习如何在web页面用ol3创建一个地图
图层与资源
学习矢量与栅格图层
控制与交互
学习地图使用
高级主题
矢量样式
深入探讨矢量图层
1. 基础
1.1创建一个地图
在Openlayers中，地图就是由一系列图层、各种交互作用以及处理用户操作的各类控制构成的。地图有三个基本组成成分：标签、样式声明和初始化代码。
1.1.1示例
让我们看看Openlayers3可运行地图服务的例子。
<!doctype html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="ol3/ol.css"type="text/css">
<style>
#map {
height:256px;
width:512px;
}
</style>
<title>OpenLayers 3 example</title>
<script src="ol3/ol.js"type="text/javascript"></script>
</head>
<body>
<h1>My Map</h1>
<divid="map"></div>
<script type="text/javascript">
var map =new ol.Map({
target:'map',
layers: [
new ol.layer.Tile({
title:"Global Imagery",
source:new ol.source.TileWMS({
url:'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS:'bluemarble', VERSION:'1.1.1'}
})
})
],
view:new ol.View({
projection:'EPSG:4326',
center: [0, 0],
zoom:0,
maxResolution:0.703125
})
});
</script>
</body>
</html>
任务
1. 下载https://github.com/openlayers/ol3-workshop/archive/resources.zip并且解压到你的web服务路径。
2. 拷贝上面的代码新的文件中，例如map.html，并且保存到解压目录中。
3. 在浏览器中访问http://localhost:8000/ol_workshop/map.html。
工作的地图是世界影像地图
在成功地创建了我们的第一个地图，我们会继续寻找更密切的部分。
1.2解剖你的地图
如在上一章节中所述，地图由标签、样式声明和初始化代码构成。我们现在来看看他们的细节。
1.2.1地图标签
在前面的例子中的地图标记生成一个文档元素：
<divid="map"></div>
这<DIV>元素将作为我们的地图视图的容器。我们在这里使用<DIV>元素，但对于地图试图的容器可以是任何的块级元素。
在这种情况下，我们给容器的ID属性，可以引用它作为我们的地图目标。
1.2.2地图样式
OpenLayers附带一个默认的样式表，用于指定地图相关元素的风格。我们在map.html页已经明确地包含此样式表（<链接rel=“样式表”href =“干/ OL。CSS”type=“文本/ CSS”>）。
OpenLayers并没有猜测地图的大小。因此，下面的默认样式表，我们需要至少包括一个自定义样式声明，来给地图在页上的分配某些空间。
<linkrel="stylesheet"href="ol3/ol.css"type="text/css">
<style>
#map {
height:256px;
width:512px;
}
</style>
在这种情况下，我们使用map容器的ID值为一个选择器，并且我们指定map容器的宽度（512px）和高度（256像素）。
样式声明直接包含在我们的文档的<head>标签之内。在大多数情况下，你的地图相关的样式声明将是一个更大的网站主题链接外部样式表的一部分。
1.2.3地图初始化代码
下一步是要包括一些初始化代码。在我们的例子中，在我们的文件<body>已经包括了<script>元素来初始化地图：
<script>
var map =new ol.Map({
target:'map',
layers: [
new ol.layer.Tile({
source:new ol.source.TileWMS({
url:'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS:'bluemarble', VERSION:'1.1.1'}
})
})
],
view:new ol.View({
projection:'EPSG:4326',
center: [0,0],
zoom:0,
maxResolution:0.703125
})
});
</script>
注意：这些步骤的顺序是很重要的。在我们的自定义脚本可以被执行之前，Openlayers类库必须被加载。在我们的例子中，Openlayers类库在我们的标签<head>中通过脚本<script src="ol3/ol.js"></script>加载进来。
同样，直到<divid=“map”></<div>文档元素作为视窗的容器准备好，我们的自定义地图的初始化代码（以上）是不能运行的。用文档<body>元素中包含的初始化代码之前，我们要确保类库与视图元素已经加载和创建。
让我们更详细地看一下地图初始化脚本干了些什么。通过一些配置选项，我们的脚本创建一个新的ol.Map对象：
target:'map'
我们通过视图容器的id属性值来告诉地图创建器在哪里渲染地图。在这种情况下，我们通过字符转“map”作为地图构建起的target。这是一个快捷方便的语法。我们可以更加明确并且直接的元素指定参考（例如document.getElementById("map")）；
图层配置在我们的地图中生成了一个图层：
layers: [
new ol.layer.Tile({
source:new ol.source.TileWMS({
url:'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS:'bluemarble', VERSION:'1.1.1'}
})
})
],
在这里不用担心语法，如果你刚刚接触这种语法，我们在后续的章节中会有重复学习。需要着重理解的是我们地图其实就是一个图层集合。为了能够看到地图，我们至少要创建一个图层。
view:new ol.View({
projection:'EPSG:4326',
center: [0,0],
zoom:0,
maxResolution:0.703125
})
您已经成功地解剖了你的第一个地图！接下来让我们了解更多关于OpenLayers的发展。
1.3Openlayers资源
该地图库中包含丰富的功能。虽然开发商一直在努力提供的带有功能的例子，以及组织代码的方式，以允许其他有经验的开发商找到进入的路。但很多用户发现，从零开始确实是一个不小的挑战。
1.3.1通过例子学习
新用户可能会发现潜入OpenLayer的示例代码和在类库中学习功能代码是最有用的方法。
http://openlayers.org/en/master/examples/
1.3.2浏览Doc文档
相对特定主题的进一步了解，请浏览OpenLayers持续增长的doc文档集。http://openlayers.org/en/master/doc/quickstart.html
http://openlayers.org/en/master/doc/tutorials
1.3.3查找API文档
在了解基本的组件，组装和地图控制之后， 在API参考文档查找方法签名和对象属性的细节。
http://openlayers.org/en/master/apidoc/
1.3.4加入社区
OpenLayers得益于一个开发者与同你一样用户的社区的支持和。无论你你是提问还是贡献代码，你可以通过注册之后发送邮件实现。https://groups.google.com/forum/#!forum/ol3-dev
1.3.5报告问题
报告问题有一点很重要，就是要了解Openlayers类库的结构：
ol.js – 由闭包编译器编译过，不易于阅读
ol-debug.js – 易于阅读，适于开使用
当你遇到一个问题，利用ol-debug.js报告它是很重要的。 Chrome’s Developer Tools可以用来进行代码调试。
扫一扫
1344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
