美文网首页
openlayer3 图层函数详解

openlayer3 图层函数详解

作者: 小白之白小明 | 来源:发表于2017-10-15 15:19 被阅读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 对象

相关文章

网友评论

      本文标题:openlayer3 图层函数详解

      本文链接:https://www.haomeiwen.com/subject/eqovyxtx.html