<!doctype html>

<html lang="en">

  <head>

    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">

    <style>

      .map {

        height: 400px;

        width: 100%;

      }

    </style>

    <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>

    <title>OpenLayers example</title>

  </head>

  <body>

    <h2>My Map</h2>

    <div id="map" class="map"></div>

    <script type="text/javascript">
       var map = new ol.Map({
       target: 'map',
       layers: [
 

          new ol.layer.Tile({ source: new ol.source.OSM()})

        ],
 

        view: new ol.View({

          center: ol.proj.fromLonLat([37.41, 8.82]), 

          zoom: 4

        })

      });

    </script>

  </body>

</html>

　　

注意，其实上面这段代码就只有一条语句:

new ol.Map({...});

其他代码只是用于设置地图的构造参数。由此可以推测出ol.Map是最主要的地图类，创建地图就需要构造这么一个对象。接下来依次分析每一个参数部分的代码。

  • 参数layers:

    layers: [
    
            // 创建一个使用Open Street Map地图源的瓦片图层
    
            new ol.layer.Tile({source: new ol.source.OSM()})
    
          ],

    从名字和具体的值可见这个地方可以设置多个layer，它是OpenLayers 3地图的组成结构单元，地图是由多个layer组成的，这种设计类似于Photoshop里面的图层，多个图层是可以叠加的，在最上面的会覆盖下面的，以此类推。在代码中我们添加了一个Open Street Map的地图layer。

  • 参数view：

    view: new ol.View({
    
            center: [0, 0],    // 定义地图显示中心于经度0度，纬度0度处
    
            zoom: 2            // 并且定义地图显示层级为2
    
          }),

    通过字面意思可以看出，它为地图定义显示窗口，对应ol.View类，可以自定义地图显示的中心点，缩放层级等。

  • 参数target：

    target: 'map'

    指定地图在页面中具体哪个位置进行显示，为此要记住地图显示还是离不开使用dom来实现。虽然和地图业务没什么关系，但也必不可少，因为它是Web GIS，最基本的还是依赖于HTML。

通过上面的源码解读，我们可以发现OpenLayers 3地图主要是由layer和view组成，layer可以有多个，view只能有一个。

openlayer3 基础学习一创建&显示地图的更多相关文章

  1. 转载-SharePoint 2010 WebPart与Google地图系列 一：创建显示地图的WebPart

    [原] SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart 摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有 ...

  2. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  3. 小白的mapbox学习之路-显示地图

    刚接触mapbox,只是简单记下自己的学习之路,如有错误,欢迎大神指正 1-头部引入链接 2-body中定义一个div块,用来显示地图 3-在script中创建一个map对象,并设置相关参数 mapb ...

  4. [原] SharePoint 2010 WebPart与Google地图系列 一：创建显示地图的WebPart

    摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有限,试问现在哪个企业没有大量的项目需要结合Google地图来进行开发,单纯地从Google Javascript ...

  5. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  6. Electron+Vue – 基础学习(1): 创建项目

    Electron 和 Vue 都是干啥的,就不做过多介绍了,可以去官网瞅瞅.下面总结 Electron+Vue 创建项目,Electron + Vue 创建项目实际上相当于:创建Vue项目 + Ele ...

  7. [原]零基础学习SDL开发之在Android使用SDL2.0显示BMP图

    关于如何移植SDL2.0到安卓上面来参考我的上一篇文章:[原]零基础学习SDL开发之移植SDL2.0到Android 在一篇文章我们主要使用SDL2.0来加载一张BMP图来渲染显示. 博主的开发环境: ...

  8. android菜鸟学习笔记30----Android使用百度地图API(一)准备工作及在应用中显示地图

    1.准备工作: 百度地图API是免费开放的,但是需要申请API Key: 1)先注册一个百度开发者帐号 2)进入百度开放服务平台http://developer.baidu.com/ 3)进入LBS云 ...

  9. 【Silverlight】Bing Maps学习系列（二）：通过Bing Maps Silverlight Control如何显示地图（转）

    [Silverlight]Bing Maps学习系列(二):通过Bing Maps Silverlight Control如何显示地图 如本系列第一篇你所介绍的,开发基于Silverlight的Bin ...

随机推荐

  1. Xcode中的Vim--XVim

    相信大家在开始使用一门编程语言的时候,最先做的事就是去学习它对应的IDE.在你稍微进阶的时候,就会想着去学习IDE中的各种快捷键,比如 如何删除整行 如何在不使用鼠标的情况下,在代码间快速移动.跳转 ...

  2. （win10）Wamp环境下php升级至PHP7.2

    (win10)Wamp环境下php升级至PHP7.2 ①下载php7.2到本地 链接:https://pan.baidu.com/s/16jqmF7GR_CRklHPAZ9VRrg 密码:4ob4 ② ...

  3. VS 通用产品密钥

    BWG7X-J98B3-W34RT-33B3R-JVYW9 HMGNV-WCYXV-X7G9W-YCX63-B98R2 HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

  4. TRIZ解决问题方法

    个人觉的成功是有规律的,那些成功的人士,都有一套处理事情的秘籍.只要我们的思维方式把那些秘籍融会贯通,并快速执行,我们有一天也会成功的. TRIZ解决问题的5点方法. 1.确定最终目标. 2.列出阻碍 ...

  5. JS 对话框 语法

    javaScript  是个脚本语言,没有能力独立执行,必须要有宿主文件 html, 作用 进行数据运算 控制浏览器的一些功能(对一下高级浏览器的影响有限) 控制元素(属性,样式,内容等) 一 用法 ...

  6. PHP开发环境安装说明书

    php安装说明书 需要安装包可以拿U盘找技术--小豪拷贝. 一.安装对象和安装顺序 0   vcredist_x64.exe(Microsoft Visual C++ 运行时文件和操作系统组件) 1 ...

  7. Java虚拟机--内存模型与线程

    Java虚拟机--内存模型与线程 高速缓存:处理器要与内存交互,如读取.存储运算结果,而计算机的存储设备和处理器的运算速度差异巨大,所以加入一层读写速度和处理器接近的高速缓存来作为内存和处理器之间的缓 ...

  8. Java GC机制详解

    垃圾收集 Garbage Collection 通常被称为“GC”,本文详细讲述Java垃圾回收机制. 导读: 1.什么是GC 2.GC常用算法 3.垃圾收集器 4.finalize()方法详解 5. ...

  9. Android-Messenger跨进程通信

    http://blog.csdn.net/lmj623565791/article/details/47017485 一.概述 我们可以在客户端发送一个Message给服务端,在服务端的handler ...

  10. POJ2478(SummerTrainingDay04-E 欧拉函数)

    Farey Sequence Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 16927   Accepted: 6764 D ...