openlayer3 基础学习一创建&显示地图
<!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 基础学习一创建&显示地图的更多相关文章
- 转载-SharePoint 2010 WebPart与Google地图系列 一：创建显示地图的WebPart
[原] SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart 摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有 ...
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
- 小白的mapbox学习之路-显示地图
刚接触mapbox,只是简单记下自己的学习之路,如有错误,欢迎大神指正 1-头部引入链接 2-body中定义一个div块,用来显示地图 3-在script中创建一个map对象,并设置相关参数 mapb ...
- [原] SharePoint 2010 WebPart与Google地图系列 一：创建显示地图的WebPart
摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有限,试问现在哪个企业没有大量的项目需要结合Google地图来进行开发,单纯地从Google Javascript ...
- ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图
ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...
- Electron+Vue – 基础学习(1): 创建项目
Electron 和 Vue 都是干啥的,就不做过多介绍了,可以去官网瞅瞅.下面总结 Electron+Vue 创建项目,Electron + Vue 创建项目实际上相当于:创建Vue项目 + Ele ...
- [原]零基础学习SDL开发之在Android使用SDL2.0显示BMP图
关于如何移植SDL2.0到安卓上面来参考我的上一篇文章:[原]零基础学习SDL开发之移植SDL2.0到Android 在一篇文章我们主要使用SDL2.0来加载一张BMP图来渲染显示. 博主的开发环境: ...
- android菜鸟学习笔记30----Android使用百度地图API(一)准备工作及在应用中显示地图
1.准备工作: 百度地图API是免费开放的,但是需要申请API Key: 1)先注册一个百度开发者帐号 2)进入百度开放服务平台http://developer.baidu.com/ 3)进入LBS云 ...
- 【Silverlight】Bing Maps学习系列（二）：通过Bing Maps Silverlight Control如何显示地图（转）
[Silverlight]Bing Maps学习系列(二):通过Bing Maps Silverlight Control如何显示地图 如本系列第一篇你所介绍的,开发基于Silverlight的Bin ...
随机推荐
- spring boot整合双持久层框架jpa、mybatis
公司之前用的是spring boot + jpa,但由于jpa无法完美的解决某些动态查询问题,就使用的jdbcTemplate 动态封装SQL,由于代码相对复杂,可读性差,现准备再引入mybatis. ...
- Spark2.1.0——深入理解事件总线
Spark2.1.0——深入理解事件总线 概览 Spark程序在运行的过程中,Driver端的很多功能都依赖于事件的传递和处理,而事件总线在这中间发挥着至关重要的纽带作用.事件总线通过异步线程,提高了 ...
- 我搞zabbix的那两天（1）
摘要:在生产环境上对服务器进行网络参数(比如CPU.内存等)的监控是很必要的,比如当服务器网络参数如内存不够用.磁盘空间快要占满时及时通知运维人员进行处理,保证服务器系统的安全.而zabbix就是这么 ...
- Spring学习之路-从放弃到入门
AOP:方法拦截器 IOC:类管理容器 主要讲讲这一天看Spring视频学到的东西,以下的叫法全是自创的. 1.类实例管理容器 关于Spring,首先是对类的管理,在常规情况,生成一个类需要调用new ...
- 关于ASPxComboBox通过ClientInstanceName，js获取不到控件的问题
今天突然遇到一个很奇葩的问题 ASPxComboBox中设置了ClientInstanceName.但是通过cmbOrganization.GetValue()获取不到值. 报错cmbOrganiza ...
- MVC之——Razor语法
实例产品基于asp.net mvc 5.0框架,源码下载地址:http://www.jinhusns.com/Products/Download View里所有以@开头或@(/*代码*)的部分代码都会 ...
- //{{AFX_MSG、//{{AFX_VIRTUAL、//{{AFX_MSG_MAP、//{{AFX_DATA_INIT
说明:这篇日志我不知道怎么命名好,虽然内容很少,但是讲的关键字很多,如果你有幸打开这篇日志,不妨往下看看 背景:我们使用 VC++6.0 开发MFC应用程序,初学者一定会为那么多行的注释代码感到头痛, ...
- JS DOM操作（一） 对页面的操作
DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...
- Netty中的LoggingHandler()
当添加.addLast("logging", new LoggingHandler(LogLevel.INFO))这行代码时 Netty就会以给定的日志级别打印出LoggingHa ...
- Linux常用基本命令(head)
head命令 作用:显示文件的头部内容,默认显示前面10行 格式: head [option] [file] -n <行数> -c <字节> ghostwu@dev:~/lin ...