标签：head target div roi lin 开发 net 基础知识 intern
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。
要在你的网页中使用OpenLayers(现用版本：v3.19,1)，需要在head中做以下引用：
OpenLayers css样式引用：
<link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
OpenLayers js文件引用：
<script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>
对低版本浏览器的API填充（polyfill）：
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
polyfill:大致是在低版本浏览器对API新特性不支持时，作为辅助实现API功能的东西。
通过以上的标签连接到OpenLayers 相应的文件。简单的说，有了上面的几个标签，在body部分写脚本时相应的类（如下面的：ol.Map,ol.layer.Tile等）才会起作用。下面贴一个完整的简单例子：
<!DOCTYPE html> <html> <head> <title>Accessible Map</title> <link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css"> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script> <style> #map:focus { outline: #4A74A8 solid 0.15em; } </style> </head> <body> <div id="map" class="map" tabindex="0"></div> <button id="zoom-out">Zoom out</button> <button id="zoom-in">Zoom in</button> <script> var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: ‘map‘, controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: new ol.View({ center: [0, 0], zoom: 2 }) }); document.getElementById(‘zoom-out‘).onclick = function() { var view = map.getView(); var zoom = view.getZoom(); view.setZoom(zoom - 1); }; document.getElementById(‘zoom-in‘).onclick = function() { var view = map.getView(); var zoom = view.getZoom(); view.setZoom(zoom + 1); }; </script> </body> </html>
对OpenLayers的使用有了一个简单的认识后，开始在OpenLayers官网http://openlayers.org/上下载API进行更深入的学习。
下载后的API文件结构如下：
每个文件夹下存放什么内容需要自己使用时慢慢探索清楚。
标签：head target div roi lin 开发 net 基础知识 intern
原文地址：http://www.cnblogs.com/swpu13020401/p/6062244.html
