2015-OpenLayers-3-入门教程详细版
OpenLayers 3 入门教程摘要OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用，但从JavaScript开发的早期发展阶段开始，已日益现实出它的落后。 OL3已运用现代的设计模式从底层重写。最初的版本旨在支持第2版提供的功能，提供大量商业或免费的瓦片资源以及最流行的开源矢量数据格式。与版本2一样，数据可以被任意投影。最初的版本还增加了一些额外的功能，如能够方便地旋转地图以及显示地图动画。OpenLayers 3同时设计了一些主要的新功能，如显示三维地图，或使用WebGL快速显示大型矢量数据集，这些功能将在以后的版本中加入。目录基本概念4Map4View4Source5Layer5总结6Openlayers 3实践71 地图显示71.1创建一副地图71.2 剖析你的地图81.3 Openlayers的资源112 图层与资源122.1 网络地图服务图层122.2 瓦片缓存142.3 专有栅格图层（Bing）182.4 矢量图层202.5 矢量影像233 控件与交互243.1 显示比例尺243.2 选择要素263.3 绘制要素293.4 修改要素314 矢量样式334.1矢量图层格式334.2矢量图层样式354.3 设置矢量图层的样式38基本概念MapViewSourceLayerMapOpenLayers 3的核心部件是Map（ol.Map）。它被呈现到对象target容器（例如，包含在地图的网页上的div元素）。所有地图的属性可以在构造时进行配置，或者通过使用setter方法，如setTarget（）。<div id="map" style="width: 100%, height: 400px"></div><script> var map = new ol.Map(target: map);</script>Viewol. View负责地图的中心点，放大，投影之类的设置。一个ol.View实例包含投影projection，该投影决定中心center的坐标系以及分辨率的单位，如果没有指定（如下面的代码段），默认的投影是球墨卡托（EPSG：3857），以米为地图单位。放大zoom选项是一种方便的方式来指定地图的分辨率，可用的缩放级别由maxZoom（默认值为28）、zoomFactor（默认值为2）、maxResolution（默认由投影在256256像素瓦片的有效成都来计算） 决定。起始于缩放级别0，以每像素maxResolution的单位为分辨率，后续的缩放级别是通过zoomFactor区分之前的缩放级别的分辨率来计算的，直到缩放级别达到maxZoom。map.setView(new ol.View( center: 0, 0, zoom: 2 ); SourceOpenLayers 3使用ol.source.Source子类获取远程数据图层，包含免费的和商业的地图瓦片服务，如OpenStreetMap、Bing、OGC资源（WMS或WMTS）、矢量数据（GeoJSON格式、KML格式）等。var osmSource = new ol.source.OSM();Layer一个图层是资源中数据的可视化显示，OpenLayers 3包含三种基本图层类型：ol.layer.Tile、ol.layer.Image和ol.layer.Vector。ol.layer.Tile 用于显示瓦片资源，这些瓦片提供了预渲染，并且由特定分别率的缩放级别组织的瓦片图片网格组成。 ol.layer.Image用于显示支持渲染服务的图片，这些图片可用于任意范围和分辨率。ol.layer.Vector用于显示在客户端渲染的矢量数据。 var osmLayer = new ol.layer.Tile(source: osmSource); map.addLayer(osmLayer);总结上述片段可以合并成一个自包含视图和图层的地图配置：<div id="map" style="width: 100%, height: 400px"></div><script> new ol.Map( layers: new ol.layer.Tile(source: new ol.source.OSM() , view: new ol.View( center: 0, 0, zoom: 2 ), target: map );</script>Openlayers 3实践1 地图显示1.1创建一副地图在openlayers中，Map是图层、各种交互以及处理用户交互控件的集合，地图由三个基本成分生成：标记，样式声明和初始化代码。以下是一个完整的OpenLayers3地图示例。<!doctype html><html lang="en"> <head> <link rel="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> <div id="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，并将该文件夹放在网络服务器的根目录下；（2） 创建一个新的文件，命名为map.html，将以上代码复制进该文件后放入下载的文件夹的根目录下；（3） 在浏览器中输入：http:/localhost:8000/ol_workshop/map.html，我们将打开一个工作的地图。成功地创建了第一张地图，我们将继续关注地图的组成部分，详见1.2 剖析你的地图。1.2 剖析你的地图正如前一部分演示的那样，一副地图通过将标记，样式声明和初始化代码三部分组织在一起而生成，接下来将详细的介绍这三个组成部分。1.2.1 地图标记标记为上例中的地图生成的一个文档元素：<div id="map"></div>在此示例中，我们用<div>元素作为地图显示的容器，其他块级元素也能做视图的容器。在这种情况下，我们设置容器的id属性，所以我们可以将其作为地图的对象。1.2.2 地图样式OpenLayers带有一个默认的样式表，指定地图相关的元素应如何显示，我们明确的将样式表引用到map.html页面中。OpenLayers不对地图的大小做预定义，因此在默认样式表之后，我们需要包括至少一个自定义样式声明来说明地图在页面上的空间。<link rel="stylesheet" href="ol3/ol.css" type="text/css"><style> #map height: 256px; width: 512px; </style>在该示例中，我们使用地图容器的id值作为选择器，并明确定义地图容器的高为256px，宽为512px。样式声明直接包含在文档的<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>部分加载（<scriptsrc="ol3/ol.js"></script>）。同样的，在文档中作为显示容器的元素（该实例中为<divid="map"></div>）准备好之前，自定义地图初始化代码是不能执行的，将初始化代码添加到文档中<body>的后面，我们能在地图生成前，确保库已加载，显示容器已准备好。接下来，将详细介绍初始化脚本的内容。脚本创建了一个包含一些配置选项的ol.Map对象：target: map我们使用显示容器的id属性来告诉地图构造函数将地图交
