openlayer3 图层函数详解
2017-10-15 本文已影响479人
小白之白小明
在项目中用到了openlayer，在此借助
http://anzhihun.coding.me/ol3-primer/index.html
的资料，整理了一些常用的API，方便日后使用。
代码规范
- OpenLayers 3采用面向对象的编程范式，类在API中随处可见，比如ol.Map，ol.View等等。如果你有面向对象的思维，将较为容易的理解API及使用。
- OpenLayers 3采用包管理的方式管理代码，比如layer的包名为ol.layer，命名方式类似于JAVA的包名。这源于OpenLayers 3采用了Google的Closure库。
- OpenLayers 3采用驼峰式(Camel-Case)命名，变量名采用小驼峰命名，类名使用大驼峰命名。
开始
要想使用OpenLayers 3开发地图，首先你需要引入了OpenLayers 3的js库文件ol3.js及样式文件ol3.css，参见代码中html头部。文件在官网都有下载。
<head>
<link href="../ol3.13.1/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../src/ol3.13.1/ol.js" charset="utf-8"></script>
</head>
一个简单的地图
// 创建地图
new ol.Map({
// 设置地图图层
layers: [
// 创建一个使用Open Street Map地图源的瓦片图层
new ol.layer.Tile({source: new ol.source.OSM()})
],
// 设置显示地图的视图
view: new ol.View({
center: [0, 0], // 定义地图显示中心于经度0度，纬度0度处
zoom: 2 // 并且定义地图显示层级为2
}),
// 让id为map的div作为地图的容器
target: 'map'
});
ol.Map是最主要的地图类，创建地图就需要构造这么一个对象。
layers是图层，在最上面的会覆盖下面的
OpenLayers 3地图主要是由layer和view组成，layer可以有多个，view只能有一个。
view: new ol.View({
// 设置成都为地图中心
center: [104.06, 30.67],
// 指定投影使用EPSG:4326
projection: 'EPSG:4326',
zoom: 10
}),
-
Source和Layer是一对一的关系，有一个Layer（图层），必然需要一个Source（资源），然后把这个Layer添加到Map上，就可以显示出来了。通过官网的API搜索ol.source可以发现有很多不同的Source，但归纳起来共三种：ol.source.Tile，ol.source.Image和ol.source.Vector。
-
ol.source.Tile对应的是瓦片数据源，现在网页地图服务中，绝大多数都是使用的瓦片地图，而OpenLayers 3作为一个WebGIS引擎，理所当然应该支持瓦片。
-
ol.source.Image对应的是一整张图，而不像瓦片那样很多张图，从而无需切片，也可以加载一些地图，适用于一些小场景地图。
-
ol.source.Vector对应的是矢量地图源，点，线，面等等常用的地图元素(Feature)，就囊括到这里面了。这样看来，只要这两种Source就可以搞定80%的需求了。
map.removeLayer(map.getLayers().item(0)) //移除最底层的地图
map.addLayer(googledianzi[0]) //添加新图层
map.getLayers() //得到当前所有的图层
map.getLayers().item(5).getSource( ) //get第六层的资源
ol.setSource( ) //设置图层 source 属性，参数为一个 source 对象
