OpenLayers 3 基础知识(一)
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 基础知识(一)的更多相关文章
- .NET面试题系列[1] - .NET框架基础知识(1)
很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...
- RabbitMQ基础知识
RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...
- Java基础知识(壹)
写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...
- selenium自动化基础知识
什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...
- [SQL] SQL 基础知识梳理(一)- 数据库与 SQL
SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...
- [SQL] SQL 基础知识梳理(二) - 查询基础
SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...
- [SQL] SQL 基础知识梳理(三) - 聚合和排序
SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...
- [SQL] SQL 基础知识梳理(四) - 数据更新
SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...
- [SQL] SQL 基础知识梳理(五) - 复杂查询
SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...
随机推荐
- PL_SQL导入数据库数据
首先用pl/sql将数据批量导出或者全部导出具体操作如下 点击工具 ----->导出数据---->SQL插入 导出的数据格式如下: prompt PL/SQL Developer im ...
- ajax 页面加载
大体说说思路,不上代码了: 1.点击加载更多-> ajax向后台传参(当前页page,必须有默认1,其他需要的参数...) 2.后台接收 -> 查询数据 处理形成 json数据 给前台 3 ...
- dandelion datatables : Page index must not be less than zero!
java.lang.IllegalArgumentException: Page index must not be less than zero! at org.springframework.da ...
- maven clean deploy -Pproduction
今天我修改了公司的组件,要发布.然后腾飞告诉我用这个命令:clean deploy -Pproduction发布. 然后报了个401错误.(当时还是不知道401是什么错)正好经理在旁边问了一下,没想到 ...
- ubuntu 14.04 下通过apt-get 安装jdk
Installing default JRE/JDK sudo apt-get update sudo apt-get install default-jre sudo apt-get install ...
- linux软raid练习
创建一个空间大小为10G的raid5,要求其chunk为1024k,格式为ext4文件系统,开机可自动挂载至/backup目录,并支持acl功能: 1 2 3 4 5 6 7 8 9 10 11 12 ...
- Oracle、MySql、SQLServer数据分页查询
看过此博文后Oracle.MySql.SQLServer 数据分页查询,在根据公司的RegionRes表格做出了 SQLserver的分页查询语句: 别名.字段 FROM( SELECT row_nu ...
- clang编译器简介
本文部分内容引用: 中文维基百科. 结构化编译器前端--clang介绍. 什么是clang编译器? clang是LLVM编译器工具集的一个用于编译C.C++.Objective-C的前端.LLVM项目 ...
- 印刷电路板(PCB)的材料
以玻璃为基础材料的板材可以在高达150℃到250℃的温度下使用.可选的介质材料有: FR4,介电常数ε0为4.6 环氧材料,介电常数ε0为3.9: 聚酰亚胺,介电常数ε0为4.5. 另外,以聚四氟乙烯 ...
- linux find命令
Linux中find常见用法示例 ·find path -option [ -print ] [ -exec -ok command ] {} \; find命令的参数 ...