在项目中用到了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 对象
网友评论