<!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地图主要是由layerview组成,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. Bean Validation规范

    以下内容转载自:https://www.ibm.com/developerworks/cn/java/j-lo-beanvalid/ Bean Validation规范介绍 JSR303 规范(Bea ...

  2. springMVC实现 MultipartFile 多文件上传

    1.Maven引入所需的 jar 包(或自行下载) <dependency> <groupId>commons-io</groupId> <artifactI ...

  3. maven3.6.1-02初体验及jar包上传

    安装当前最新版本的nexus,安装教程网上搜,不多说了. 因为nexus3x版本没有2x版本中内置的3rd_part,所以不能在界面中上传jar包,必须使用maven的命令行.  添加第三方仓库,名字 ...

  4. webpack4 自学笔记一(babel的配置)

    所有代码都可以再我的github上查看,每个文件夹下都会有README.md,欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree ...

  5. es6学习笔记8--Map数据结构

    Map Map结构的目的和基本用法 JavaScript的对象(Object),本质上是键值对的集合(Hash结构),但是只能用字符串当作键.这给它的使用带来了很大的限制. var data = {} ...

  6. iOS开源项目周报0428

    由OpenDigg 出品的iOS开源项目周报第十八期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等. Bouncy ...

  7. Mouse点击之后,复制GridView控件的数据行

    本篇是实现用mouse点击GridView控件任意一行,把所点击的数据复制至另一个GridView控件上. 实现大概思路,把所点击的数据行的记录主键找出来,再去过滤数据源. 点击功能,已经实现,可以参 ...

  8. bootstrap-datepicker 开始时间-结束时间 thinkphp

    <!DOCTYPE html> <head> <title>开始-结束时间测试</title> </head> <body> & ...

  9. 桥接和nat连接

    桥接网络(Bridged Networking) 桥接网络是指本地物理网卡和虚拟网卡通过VMnet0虚拟交换机进行桥接,物理网卡和虚拟网卡在拓扑图上处于同等地位,物理网卡和虚拟网卡就相当于处于同一个网 ...

  10. java设计模式-----21、备忘录模式

    概念: Memento模式也叫备忘录模式又叫做快照模式(Snapshot Pattern)或Token模式,是GoF的23种设计模式之一,属于行为模式,它的作用是保存对象的内部状态,并在需要的时候(u ...