元素作为地图显示的容器，其他块级元素也能做视图的容器。

在这种情况下，我们设置容器的id属性，所以我们可以将其作为地图的对象。

1.2.2 地图样式

OpenLayers带有一个默认的样式表，指定地图相关的元素应如何显示，我们明确的将样

式表引用到map.html页面中。

OpenLayers不对地图的大小做预定义，因此在默认样式表之后，我们需要包括至少一个

自定义样式声明来说明地图在页面上的空间。

在该示例中，我们使用地图容器的id值作为选择器，并明确定义地图容器的高为256px，宽为512px。样式声明直接包含在文档的部分。在大多数情况下，地图相关的样式说明是链接到外部样式表的一个大型主题网站的一部分。

1.2.3 地图初始化

生成地图的下一步包含一些初始化代码，在该示例中，我们在文档的前添加

注：这些步骤的顺序很重要，OpenLayers库必须在在自定义脚本执行之前加载，在此示例中，OpenLayers库在文档的部分加载（）。同样的，在文档中作为显示容器的元素（该实例中为

）准备好之前，自定义地图初始化代码是不能执行的，将初始化代码添加到文档中的后面，我们能在地图生成前，确保库已加载，显示容器已准备好。

接下来，将详细介绍初始化脚本的内容。脚本创建了一个包含一些配置选项的ol.Map对象：

我们使用显示容器的id属性来告诉地图构造函数将地图交付到何处，在该示例中，我们通过字符串“map”作为地图构造函数的对象。这个语法方便快捷，也可以更详细的使用元素的直接引用（e.g. document.getElementById("map")）。

图层配置创建了一个显示在地图中的图层：

layers: [

new https://www.wendangku.net/doc/ac14657244.html,yer.Tile({

source:new ol.source.TileWMS({

url:'https://www.wendangku.net/doc/ac14657244.html,/geowebcache/service/wms',

params: {LAYERS:'bluemarble', VERSION:'1.1.1'}

})

})

],

不用担心对以上的语法不了解，图层创建在后续章节中会有详细的介绍。最重要的是理解地图显示的是图层的集合。为了显示一副地图，至少需要添加一个图层。

最后一步是定义视图，指定投影、中心点，放大级别，在该示例中，还指定了maxResolution，以确保请求的范围不超过GeoWebCache能处理的范围。

view:new ol.View({

projection:'EPSG:4326',

center: [0, 0],

zoom:0,

maxResolution:0.703125

})

以上，成功剖析了一副地图的显示，接下来将介绍更多关于OpenLayers的开发。

1.3 Openlayers的资源

OpenLayers 库提供丰富的功能，尽管开发者对每个功能都提供了示例，并且让其他有经验的程序员找到属于他们自己的方式来组织代码，很多用户仍觉得从头开始是一个挑战。

1.3.1 通过示例学习

新用户很可能会发现研究OpenLayer的示例代码以及库的功能是开始起步最有效的方式。

1.3.2查看API参考

在理解了构成以及控制一幅地图的基本组成之后，搜索API帮助文档以了解方法签名、对象属性的详细信息。

https://www.wendangku.net/doc/ac14657244.html,/en/master/apidoc/

2 图层与资源

2.1 网络地图服务图层

当向地图中添加图层，图层的资源通常用来获取将要显示的数据，数据请求可以是影像数据，也可以是矢量数据。栅格数据是服务端提供的图片信息，矢量数据是服务器交付的结构化信息，在客户端（浏览器）进行显示。

有许多不同类型的服务提供栅格地图数据，这部分涉及到符合OGC网络地图服务（WMS）规范的供应商。

2.1.1 创建图层

在1.1创建一副地图创建的地图示例的基础上，修改图层来理解其运行机制。

layers: [

new https://www.wendangku.net/doc/ac14657244.html,yer.Tile({

title:"Global Imagery",

source:new ol.source.TileWMS({

url:'https://www.wendangku.net/doc/ac14657244.html,/geowebcache/service/wms',

params: {LAYERS:'bluemarble', VERSION:'1.1.1'}

})

})

]

完整示例代码详见1.1创建一副地图。

2.1.2 The https://www.wendangku.net/doc/ac14657244.html,yer.Tile构造函数

在1.1创建一副地图创建的示例中，使用的数据资源是ol.source.TileWMS，我们可以从title关键字的字面上理解它的含义，但是基本上来说，这里的关键字可以是任意名称，在OpenLayers 3中，图层和资源有一个区别，而在OpenLayers 2中，这两部分一起组成了一个图层。

https://www.wendangku.net/doc/ac14657244.html,yer.Tile表示图像的规则网格，而https://www.wendangku.net/doc/ac14657244.html,yer.Image表示单个图像，基于图层类型，我们将使用不同的资源（ol.source.TileWMS与ol.source.ImageWMS）。

2.1.3 The ol.source.TileWMS构造函数

url指向的是WMS服务的在线资源，params是对象参数名称及其值，由于在OpenLayers中，默认WMS版本是1.3.0，如果WMS不支持该版本，需要在params中提供一个低版本。

（1）该示例中WMS提供了一个名为“openstreetmap”的图层，将LAYERS 参数的值由“bluemarble”改为“openstreetmap”，代码如下：

new https://www.wendangku.net/doc/ac14657244.html,yer.Tile({

title:"Global Imagery",

source:new ol.source.TileWMS({

url:'https://www.wendangku.net/doc/ac14657244.html,/geowebcache/service/wms',

params: {LAYERS:'openstreetmap', VERSION:'1.1.1'}

})

})

（2）改变图层与资源，用单一图像取代瓦片，再这个过程中，需要将资源的url修改

LAYERS参数的值修改为“opengeo:countries”，完成修改后，利用浏览器的开发工具，确保请求的是单一

图像而不是256×256像素的瓦片。

了解了从网络地图服务动态获取数据的机制，接下来将深入了解瓦片缓存服务。

2.2 瓦片缓存

默认情况在，瓦片图层请求一个256×256像素的图像来填充地图视窗，当你平移或缩放地图，将发出更多图片请求来填充你没有访问过的地方。浏览器会缓存一些请求的图像，这通常需要大量的处理器来动态渲染图像。

由于瓦片图层以规律的网格请求图像，这使得服务器能够缓存这些图片请求并且在下次浏览相同区域的时候返回该缓存结果，从而获得更好的性能。

2.2.1 ol.source.XYZ

网络地图服务规范使得客户端能够请求的内容具有灵活性，如果没有限制，在实践中，缓存会变得困难甚至不可能实现。

另一种几段情况是，服务器可能只提供固定缩放级别和规律网格的瓦片，这种情况可以概括为XYZ资源的瓦片图层——X/Y代表网格的行与列，Z代表缩放级别。

2.2.2 ol.source.OSM

OpenStreetMap (OSM)投影是为了收集并免费提供世界地图的数据，OSM提供了一些不同的数据渲染作为瓦片缓存集，这些渲染符合基本的XYZ网格配置，并且可以在OpenLayers地图中使用。ol.source.OSM图层可以访问OpenStreetMap瓦片资源。

（1）打开1.1创建一副地图创建的map.ht ml文件，将地图初始化代码替换为以下代码：

（2）在文档的中，添加以下图层属性的样式说明：

（3）

2.2.2.1 投影

回顾地图的视图定义：

view:new ol.View({

center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'),

zoom:9

})

地理空间数据可能来自各种坐标参照系，一个数据集可能是以度为单位的地理（经纬）坐标系，另一个可能是以米为单位的投影坐标系，对坐标系的全面讨论超出了本实践的范围，但了解其基本概念是很重要的。

OpenLayers 3需要知道所使用数据的坐标系，在内部，由ol.proj.Projection对象展现，ol.proj命名空间中的transform方法使用字符串表示坐标参考系（上述示例中的"EPSG:4326"以及"EPSG:3857"）。

OpenStreetMap 瓦片数据是墨卡托投影，因此，我们需要使用墨卡托坐标了设置初始化时的中心点。由于一个地方的地理坐标相对来说更容易知道，使用ol.proj.transform方法将地理坐标系（"EPSG:4326"）转化为墨卡托坐标系（"EPSG:3857"）。

OpenLayers 3包含地理坐标系与墨卡托坐标系间相互转换的方法，因此我们可以使用ol.proj.transform方法而不需要任何额外的工作。如果想要使用其他投影的数据，再使用

ol.proj.transform方法之前需要添加一些额外的信息。

例如，使用"EPSG:21781"坐标参照系的数据，添加以下两条script标签到页面中：

然后在应用程序代码中，注册该投影并设置其有效范围，代码如下：

// This creates a projection object for the EPSG:21781 projection

// and sets a "validity extent" in that projection object.

var projection = ol.proj.get('EPSG:21781');

projection.setExtent([485869.5728, 76443.1884, 837076.5648, 299941.7864]);

2.2.2.2 图层创建

layers: [

new https://www.wendangku.net/doc/ac14657244.html,yer.Tile({

source:new ol.source.OSM()

})

],

之前的示例中，创建一个新图层后，将其添加到地图配置对象的图层数组中，以上代码接受资源的所有默认选项。

2.2.2.3 样式

如何处理地图控件是本章节意外的内容，但是这里的样式声明让你先睹为快。默认情况下

ol.control.Attribution控件被添加到所有地图中，这使得地图视窗中显示图层资源的归属信息来源，上述声明改变了地图中归属信息的样式（版权行再地图的右下方）。

掌握了公开可用的缓存瓦片集的图层用法，接下来将介绍专有的栅格图层，详见2.3 专有栅格图层。

2.2.2.4 属性控件配置

默认情况下，ol.control.Attribution控件在页面上添加了一个i（information）按钮，点击即可显示归属地信息。为了符合OpenStreetMap的使用条款，并且将OpenStreetMap的归属地信息一直展现出来，可添加以下代码在ol.Map构造函数中最为可选对象。

controls: ol.control.defaults({

attributionOptions: {

collapsible:false

}

})

这段代码移除了i按钮，使得归属地信息一直展现在视图中。

2.3 专有栅格图层（Bing）

在前面的章节中，图层是基于符合标准的WMS以及自定义瓦片缓存显示的，在线地图（或者瓦片地图客户端）主要是通过可用的专有地图瓦片服务进行广泛推广，OpenLayers提供的图层类型能通过使用它们的API来调用这些专有服务。

本章节使用的示例，是在上一章节示例的基础上，添加一个使用Bing瓦片的图层。

（1）将map.html文件中配置OSM资源的代码替换为ol.source.BingMaps：

source:new ol.source.BingMaps({

imagerySet:'Road',

key:'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'

})

注：Bing瓦片API要求用户注册一个API密钥，该密钥将在地图应用程序中使用，示例中的密钥不能再产品中使用。

（1）

完整示例代码如下：

My Map