OpenLayers 3 入门指南 - 简书
OpenLayers 3 入门指南
从使用OpenLayers 3到现在有差不多一年的时间了，OpenLayers是web端比较好的一个GIS引擎，广受大家的青睐，最开始我以为这是一个比较小众的引擎，没想到后面发现有很多人使用，并且还有很多正在学习使用的小伙伴，他们同我最开始一样，对于如何快速有效地入门比较困惑，为此，我以个人经验，分享一下OpenLayers 3的入门。
[更新：在写了这个入门指南后，我已经编写了一个OpenLayers 3的入门教程，用于帮助初学者快速入门，参见 ，国内用户访问：]
需要具备基本的Javascript知识，如果还不具备，请google JavaScript学习推荐书籍（我推荐JavaScript核心编程）进行学习，同时可以在上面在线练习。
具备基本的GIS理论知识，知道GIS引擎的作用，不知道的请google相关资料脑补。
需要具备基本的面向对象思想，因为OpenLayers 3引擎是实用面向对象编程的。
最主要的是上的资料，有examples和API等，随着版本实时更新，入门必备，即使入门了，也是必备。 入门时，主要学习页面下方的QuickStart和Tutorials里面的Basic Concepts，从而能学习到ol3的Map，View，Layer，Source代表什么，有什么作用，以及他们如何组成在一起。更详细的构成参见。 然后根据你需要实现的功能在examples里面找例子，尝试改一改。（英文看不懂怎么办？ 找找有没有中文版的，找不到啊？用工具翻译，再不行，交点学费吧）
这里有一篇中文的详细的，可以对照练习。 例子中它用的是WMS服务，你可以使用在线的瓦片地图(不会的参见专题里面的)试试。
请关注简书的,目前由我维护，里面会有一些入门知识分享，以及代码示例。 最重要的是可以给我留言，或者分享你的知识，让更多的人学习。
噢，加群是非常有效率的。 Q群期待你的加入，可以在里面找到一些群共享的资料，也可以提问。 扯淡大叔就是我啦。
先照着QuickStart自己加载一个地图。 弄清楚每一行代码的意思。然后尝试在这个基础上进行修改。比如修改地图中心，定位到你所在城市，或者你家。 修改地图缩放的层级，限制最大/最小缩放层级。
增加一层，ol.layer.Vector，并在上面添加一些元素，比如点，圆，多边形，并修改其样式，比如线条粗细，颜色。
学习如何交互，实现选择2中添加的点，圆，或多边形。
学习高级交互，手动绘制圆，多边形。
学习其他类型的layer，同时需要更多的GIS知识，比如同服务器通信的各种协议，以及如何请求获取资源，以及如何加载到地图上，整个结合起来。
学习过程中，多参照学习官方的examples里面的例子。
掌握ol3地图的构成。
学会查询API文档，找到并使用于自己的代码中。 API是针对每一个类而言的，从而会说明类的属性和方法，建议使用方法来操作对象，不要直接使用属性，特别是设置某个属性，应该用方法来设置。这样才可能触发对应的change事件。 通过掌握的地图构成，可以快速地在API中查找资料并串联起来使用。
各个对象的消息机制。基本上每一个类都可以注册消息，统一用方法on注册消息监听，能监听到的消息，可以查看API文档中该类Fires:，它标明了有哪些事件，怎样触发的。 这个非常重要。 更高级的使用方法是自己根据业务需要自定义消息。
融汇贯通，遇到问题，知道找哪方面的资料，哪个API。
个人浅见，难免有疏漏，欢迎补充！
欢迎来到程序猿的世界，这里是爱好者与梦想家的天堂！拥抱热爱编程，有想法，有激情的各种猿，英雄不论出处！Q群OpenLayers3自定义编译 - 简书
OpenLayers3自定义编译
自定义编译背景
OpenLayers3地图开发库功能非常强大，所以有个问题，就是它非常的大。体积大一向吃了很多亏，比如百度“适合移动端的js地图库”，很多人都会向你推荐Leaflet，原因是小巧。这正是冤枉啊，岂不知道ol3重新的，是要加强对移动端的支持啊，所有，没有mousemove之类的事件，定义为pointemove事件啊，这是为了pc与移动端都能使用啊，我们再也不能忽视ol3开发者们的良苦用心。其次由于很多webgis只使用了ol3部分功能，用不到其所有的库，那么遵照“按需加载”原则，是否可以只将项目中引用到的ol3依赖库重新编译出来？这当然是可以的，而且自定义编译一定是个瘦身的过程，那么究竟如何操作，请看以下步骤。
自定义编译步骤
安装nodejs
windows安装后一路next，linux其他参考官网。安装完成，在Node.js command prompt控制台中输入
打印nodejs安装版本号，确定环境具备。
下载OpenLayers3
在Node.js command prompt控制台中，比如选择在E盘下载：
$ mkdir openlayers3 --新建一个文件夹
$ npm install openlayers --下载ol
等待npm下载完成。
选择依赖的包
仔细看下面的例子
var map = new ol.Map({
target: 'map',
new ol.layer.Tile({
source: new ol.source.OSM()
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
view: new ol.View({
center: [0, 0],
简例中使用了ol.Map,ol.View,ol.control.defaults,ol.layer.Tile,ol.source.OSM，那么我们就抽取使用的库，自定义一个json文件ol-custom.json，放到openlayers/node_modules/openlayers/build中，内容如下：
"exports": [
"ol.View",
"ol.control.defaults",
"ol.layer.Tile",
"ol.source.OSM"
"compile": {
"externs": [
"externs/oli.js",
"externs/olx.js"
"define": [
"goog.DEBUG=false"
"extra_annotation_name": [
"api", "observable"
"compilation_level": "ADVANCED",
"manage_closure_dependencies": true
自定义打包
$ cd openlayers/node_modules/openlayers
$ node tasks/build.js build/ol-custom.json build/ol-custom.js
在build中可以看到打包后的文件大小。
自定义参数说明
exports:程序中使用到的包。externs:依赖的外部的一些包，oli.js，olx.js是OpenLayers 3 API的外部文件，在自定义编译时，这两个文件始终是需要的。 "externs/proj4js.js","externs/tilejson.js","externs/topojson.js"等等如果在代码开发中使用到了，需要在externs加进来。define：设置一些常量为false，这样的话，编译的包会更小。比如默认情况下，ol3的三种渲染形式，以及所有的layer类型都会打包进来，但是，我们只需要一种渲染，一种图层类型，本定义便是为此而生。"compilation_level": "ADVANCED"模式，会将默认的没用上的渲染和图层类型移除，所以可以设置以下常量为false：
"ol.ENABLE_DOM=false",
"ol.ENABLE_WEBGL=false",
"ol.ENABLE_PROJ4JS=false",
"ol.ENABLE_IMAGE=false",
"ol.ENABLE_VECTOR=false",
然后运行脚本编译。
其他编译选项:manage_closure_dependencies始终是需要的。
专注于OpenSource GIS开发，擅长OpenLayer3，GeoServer，PostGIS，gdal，相关专业开发者可加群流，对PostgresSQL，node express等相关技术很有兴趣，从事开源gis开发与架构设计。针对公司提供收费技术咨询。6218人阅读
OpenLayers（26）
WebGIS（39）
&&&&&&当某个地方发生一些事情之后，如果我们添加一个静态点在地图上，并不能引起注意，那我们可以放置一个动态的点，类似于在水中投入一个石头，水波扩散的效果，象征发生的事件有一定的影响区域，那么，我们如何利用 OpenLayers3 做出这样的效果呢？我们要实现的效果如下图，之前雅安发生过地震，我们在雅安放置一个这样的点，表示雅安发生了地震。
图1 点扩散效果图
&&&&&&如何实现呢，我们首先想到，在矢量图层中添加一个点，对其赋予 ol.style.Icon 样式，然后将图片的 src属性赋值为一张 GIF 图片，那我们就进行尝试。
注：文章中例子的完整代码，我放在了
中，想看的朋友可以到
ol.style.Icon
我们首先初始化一个矢量图层，并添加 Icon 样式，并添加到地图中：
var gif_vector = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 45],
anchorXUnits: 'fraction',
anchorYUnits: 'pixel',
opacity: 0.75,
src: 'image/test_gif.gif'
map.addLayer(gif_vector);
然后，我们给矢量图层添加点：
gif_vector.getSource().addFeature(new ol.Feature({
geometry: new ol.geom.Point([0,0]),
name: "testGif"
实现效果并不是预期的情况：
图2 ol.style.Icon 效果
&&&&&&本以为会出现动态的图标，结果发现，并没有，动态的图片变成了静态的图片。这里的原因，在这篇文章中就不具体展开了，以后会在深入研究中解释具体原因。那么，这条路走不通，还有没有其他的解决办法呢？ 我们使用 CSS3 做出一个动画效果，并不是一件难事，但是动画效果需要依附于一个 HTML 元素，我们想到我们使用OpenLayers实现 Popup 效果时，Popup 就是一个 HTML 元素，其使用的技术就是 ol.Overlay，那么，我们试试 ol.Overlay 这条路能否走通。
ol.Overlay
首先，创建一个 DIV 元素，将其形状限制为圆形，并使用 CSS3 为其赋予动画：
&div id="css_animation"&&/div&
CSS3 动画及其样式
#css_animation{
height:50px;
width:50px;
border-radius: 25px;
background: rgba(255, 0, 0, 0.9);
transform: scale(0);
animation: myfirst 3s;
animation-iteration-count: infinite;
@keyframes myfirst{
transform: scale(2);
background: rgba(0, 0, 0, 0);
这样，在页面中，其效果如下图：
图3 CSS3点扩散动画效果
接下来，我们创建一个 overlay 实例，将这个 HTML 元素添加到 overlay 中：
var point_div = document.getElementById("css_animation");
var point_overlay = new ol.Overlay({
element: point_div,
positioning: 'center-center'
map.addOverlay(point_overlay);
point_overlay.setPosition([82299,913635]);
&&&&&&我们来解释这段代码：首先，var point_div = document.getElementById("css_animation");获得具有动画效果的HTML元素；然后将其赋予 overlay 的 element 参数，overlay 还有一个参数是 positioning: 'center-center'，表示 HTML 元素相对于 overlay 的定位点的方位，”center-center” 表示元素中心对准定位点中心；最后 map.addOverlay(point_overlay); 将 overlay 添加到地图中，此时的 overlay 是不可见的，最后一行：point_overlay.setPosition([8.]);设置了 overlay 可见元素（也就是具有动画的元素）的位置，这样动画元素就设置到相应的点了。
这样，我们就实现了原来文章开头的效果。
&&&&&&这篇文章中，我们为了实现动态点扩散效果，尝试了两种方法：一种是为点赋予 ol.style.Icon 样式，在相应的点覆盖一张动态 GIF 图片，然而并没有成功；另一种方法，是使用 ol.Overlay 结合 CSS3 动画，实现了相应的效果。
&&&&&&需要注意的是 CSS3 动画是需要 IE10+ 、firefox（火狐）、chorme（谷歌）等现代浏览器的支持才可以实现，我们知道 OpenLayers3 利用了 HTML5 和 CSS3 的现代浏览器技术，也需要 IE9+支持才行。因此，要想得到好的效果，请使用现代浏览器。
文章中例子的完整代码，我放在了
中，想看的朋友可以到
好的，就写到这里，有什么问题，可以在文章下面留言。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：243688次
积分：3190
积分：3190
排名：第11398名
原创：60篇
评论：169条
阅读：23900
文章：25篇
阅读：174800
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'OpenLayers3入门教程_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
OpenLayers3入门教程
&&由于目前ol3的资料并不多,而对于没有接触过ol2及以前版本的同学,可以参考下
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩12页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢