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文件结构如下：

每个文件夹下存放什么内容需要自己使用时慢慢探索清楚。

OpenLayers 3 基础知识（一）的更多相关文章

  1. .NET面试题系列[1] - .NET框架基础知识(1)

    很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...

  2. RabbitMQ基础知识

    RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...

  3. Java基础知识（壹）

    写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...

  4. selenium自动化基础知识

    什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...

  5. [SQL] SQL 基础知识梳理（一）- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  6. [SQL] SQL 基础知识梳理（二） - 查询基础

    SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...

  7. [SQL] SQL 基础知识梳理（三） - 聚合和排序

    SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...

  8. [SQL] SQL 基础知识梳理（四） - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  9. [SQL] SQL 基础知识梳理（五） - 复杂查询

    SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...

随机推荐

  1. selenium 常见问题整理。

    一:日期控件 selenium不能直接对日期控件操作,可以通过js对日期控件做赋值操作 WebElement inputTimeBox=driver.findElement(by.name(" ...

  2. SAX解析DOM4J的方法总结

    <二 .利用SAX进行DOM解析DOM4J的基本练习>    一. 本次总结用到的xml文档    <?xml version="1.0" encoding=&q ...

  3. 第一章：UNIX基础知识

    本章内容主要是为了学习UNIX的基本知识和一些最基本的系统函数. 学习的关键就是跟随者书本敲代码.本节遇到的第一个问题就死本书的apue.h这个文件:一开始没有注意这个文件,盲目的去百度,一番百度之后 ...

  4. linq之将IEnumerable<T>类型的集合转换为DataTable类型 （转载）

    在考虑将表格数据导出成excel的时候,网上搜的时候找到一个特别合适的公共方法,可以将query查询出来的集合转换为datatable 需引用using System.Reflection; publ ...

  5. BLE 信道

    广播信道频点的选择原则上是为了远离诸如WiFi接入点的严重干扰.这些接入点通常选择802.11信道中的3个:信道1.6.11.这几个信道的中心频率分别为2412/2437/2462,宽度大概为20MH ...

  6. 关于javascript中闭包的理解

    闭包就是能够读取其他函数内部变量的函数. 在javascript中,只有函数内部的子函数可以读取局部变量,因此,我理解闭包就是定义在一个函数内部的函数. 例子: var f1 = function() ...

  7. 自建yum源及分组安装

    最近在研究一套自动化运维方向的框架,在想到远程安装软件包的时候,觉得有yum支持会更方便一些.主要思路是把程序员写的代码或程序打包成rpm,然后提交到自建yum源,并实现按组安装,本地yum源实现步骤 ...

  8. 跟我学Windows Azure 五 使用Cloub Service连接Blob Service完成图片的上传

    首先,我们创建一个云服务项目,用来演示我们的blob存储 下来我们修改我们我们云服务的名字 我们需要添加一个空的WebForm的项目 点击完成,我们可以看到我们的解决方案已经添加完成 下来我们需要添加 ...

  9. C++ 资源大全

    http://www.uml.org.cn/c++/201411145.asp http://ezlippi.com/blog/2014/12/c-open-project.html <C++ ...

  10. ecstore-lnmp环境下crontab不执行原因

    因为lnmp.org默认禁止了proc_open函数,需要开启 开启后 lnmp restart ==== contab还是用crontab -e好,有些用www用户的似乎执行不了