针对Openlayer3官网例子的简介-白红宇

针对Openlayer3官网例子的简介

阅读量：6475 次

发布时间：2019-06-23

本文共 4885 字，大约阅读时间需要 16 分钟。

网址：http://openlayers.org/en/latest/examples/

如果大家想了解ol3能做什么，或者说已提供的API有什么，又闲一个个翻英文例子跟API累的话，就看看这个吧。

1、就是个地图加载，弄了两按钮，可以放大缩小，算是个ol3的入门吧

http://openlayers.org/en/latest/examples/accessible.html

2、一些动画的介绍，旋转，移动到某个点的过程动画。介绍挺多的（不追求什么个性化的话，其实没什么用）

http://openlayers.org/en/latest/examples/animation.html

3、加载ArcGIS MapServer发布的图层。下图就是在OSM底图上加载了一个ArcGIS MapServer发布的图层（针对的是Image）

var layers = [        new ol.layer.Tile({          source: new ol.source.OSM()        }),        new ol.layer.Image({          source: new ol.source.ImageArcGISRest({            ratio: 1,            params: {},            url: url          })        })      ];

http://openlayers.org/en/latest/examples/arcgis-image.html

4、紧跟上一个例子，这个是基于Tile的图层加载

var layers = [        new ol.layer.Tile({          source: new ol.source.OSM()        }),        new ol.layer.Tile({          extent: [-13884991, 2870341, -7455066, 6338219],          source: new ol.source.TileArcGISRest({            url: url          })        })      ];

5、讲了一个地图缩放到小于600px，就会进行collapsible，当然这个可以设置的。（虽然我不知道这有什么用）

var attribution = new ol.control.Attribution({        collapsible: false      });  var map = new ol.Map({        layers: [          new ol.layer.Tile({            source: new ol.source.OSM()          })        ],        controls: ol.control.defaults({attribution: false}).extend([attribution]),        target: 'map',        view: new ol.View({          center: [0, 0],          zoom: 2        })      });

function checkSize() {        var small = map.getSize()[0] < 600;        attribution.setCollapsible(small);        attribution.setCollapsed(small);      }

　http://openlayers.org/en/latest/examples/attributions.html

6、加载Bing地图，可选择基于bing五种style的layer。（可能是我网不好，加载不出来~）

var styles = [        'Road',        'Aerial',        'AerialWithLabels',        'collinsBart',        'ordnanceSurvey'      ];      var layers = [];      var i, ii;      for (i = 0, ii = styles.length; i < ii; ++i) {        layers.push(new ol.layer.Tile({          visible: false,          preload: Infinity,          source: new ol.source.BingMaps({            key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here',            imagerySet: styles[i]            // use maxZoom 19 to see stretched tiles instead of the BingMaps            // "no photos at this zoom level" tiles            // maxZoom: 19          })        }));      }

http://openlayers.org/en/latest/examples/bing-maps.html

7、Canvas混合模式

这个不熟悉。

http://openlayers.org/en/latest/examples/blend-modes.html

8、拉框选择要素

这个使用，例子里是Ctrl+左键进行拉框。在对一些点要素，线要素进行选择的时候，很实用，很细的线，纯点击选择的话麻烦。

用的API就是交互里的ol.interaction.Select

http://openlayers.org/en/latest/examples/box-selection.html

9、以Tooltip（鼠标移上）事件举例，与Bootstrap结合使用

从这个示例看出ol3与Bootstrap的交互变得很简单，已经内置了很多方法，不过我个人还是倾向于自己来“建造”样式，没必要用这些ol3自认为给予我们方便的API。看这个示例，反而一开始显得糊涂，怎么就这样出来效果了，会有这种感觉。

其实熟悉Bootstrap的同学，一进到ol3的官网就能找到Bootstrap的影子。如API中的关键词高亮就是使用的Bootstrap的<code>。

http://openlayers.org/en/latest/examples/button-title.html

10、styleing feature with CanvasGradient or Canvaspattern

用预生成的颜色跟重复的点样式生成Canvas，举例填充每个国家

http://openlayers.org/en/latest/examples/canvas-gradient-pattern.html

11、Canvas Tiles 直接看图吧

http://openlayers.org/en/latest/examples/canvas-tiles.html

12、CartoDB source example |CartoDB 图的例子

这个很有趣，直接用sql可以进行查询，不过这个CartDbB图是如何生成呢？自己如何制作这个呢？求解。很关键，这玩意儿如果好使，那比wfs加ol.format.filter查询方便多了。毕竟咱最熟悉sql不是

选择国土面积大于0平方千米的要素

http://openlayers.org/en/latest/examples/cartodb.html

13、Anvanced View Positioning |高级视图定位

这个很实用，举例了几个常见的定位方式。都是基于tileSource.getExtent()

view.fit(polygon, size, {padding: [170, 50, 30, 150], constrainResolution: false});view.fit(polygon, size, {padding: [170, 50, 30, 150]}); view.fit(polygon, size, {padding: [170, 50, 30, 150], nearest: true});view.fit(point, size, {padding: [170, 50, 30, 150], minResolution: 50});view.centerOn(point.getCoordinates(), size, [570, 500]);