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 ...
随机推荐
- XSS事件（一）
前言 最近做的一个项目因为安全审计需要,需要做安全改造.其中自然就包括XSS和CSRF漏洞安全整改.关于这两个网络安全漏洞的详细说明,可以参照我本篇博客最后的参考链接.当然,我这里并不是想写一篇安 ...
- .8-浅析express源码之请求处理流程(1)
这一节就讲从一个请求到来,express内部是如何将其转交给合适的路由,路由又是如何调用中间件的. 以express-generator为例,关键代码如下: // app.js app.use('/' ...
- 学习MVC和jQuery相关的书
Insus.NET还是较喜欢看纸质书.学习ASP.NET MVC和jQuery编程,Insus.NET为了加强功力,决定再购买几本相关的书: 十月份时,还买了一本: 前两本快递刚送到手,后一本已经 ...
- C#使用命令编译代码
1.在路径%SystemRoot%\Microsoft.NET\Framework\vX.X.X(安装的.net版本号)下找到csc.exe,在cmd窗口cd到该路径下. ps(在该路径下有一个CSC ...
- git撤销提交(commit)
我们知道Git有三大区(工作区.暂存区.版本库)以及几个状态(untracked.unstaged.uncommited) 一.简介 Git 保存的不是文件的变化或者差异,而是一系列不同时刻的文件快照 ...
- mysql小试题
1. 用户登录日志表 xes_user_login_logs 如下: (1) 检索登录超过两次的用户ID(sql语句) select user_id from vvt_ceshi group by u ...
- 老男孩教育python全栈第九期视频
失效了在下面评论即可,会及时更新.python9期已全部更新完 链接: https://pan.baidu.com/s/1VV8_ZyVasK05iKd7QMxO-A 密码: 9zau
- Atcoder：AGC004F Namori
传送门 先考虑树,树是一个二分图. 看到是二分图并且每次是对两边的同色的点反色可以想到转化:让奇数层的点为黑,偶数为白,变成每次可以交换两个点的颜色. 把黑看成 \(-1\),白看成 \(1\),那么 ...
- git push报错error: failed to push some refs to 'git@github.com'
git push报错error: failed to push some refs to 'git@github.com' $ git push -u origin master To git@git ...
- Dynamics 365Online Server-Side OAuth身份认证
在上篇演示了在html页面中通过调用online的OAuth身份验证后再通过web api取10条客户数据并展示,本篇继续讲述如何在server-side程序中调用online的OAuth认证再通过w ...