针对Openlayer3官网例子的简介

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

若是你们想了解ol3能作什么，或者说已提供的API有什么，又闲一个个翻英文例子跟API累的话，就看看这个吧。

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

 

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

 

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

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

 

三、加载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

 

四、紧跟上一个例子，这个是基于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
          })
        })
      ];

五、讲了一个地图缩放到小于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

 

六、加载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

七、Canvas混合模式

 

 这个不熟悉。

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

八、拉框选择要素

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

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

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

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

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

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

 

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

 十、styleing feature with CanvasGradient or Canvaspattern

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

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

 十一、Canvas Tiles 直接看图吧

 

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

十二、CartoDB source example |CartoDB 图的例子

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

 

选择国土面积大于0平方公里的要素

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

 1三、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]);

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

1四、cluster distance 点聚类示例

这个也挺实用的，毕竟数据量一大的话，显示就成了一堆shit，这个聚类优化很方便。

 

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

1五、Color Manipulation 色调、色度、明亮度

将亮度调低看看

http://openlayers.org/en/latest/examples/color-manipulation.html

 

1六、Custom Controls 自定义Control

这里自定义了一个按钮Control，做用是将旋转过的地图转回来~

就是下图中zoom in/out 下面的N

http://openlayers.org/en/latest/examples/custom-controls.html

1七、Custom Icon 自定义Icon

将这玩意儿展开的图标给替换了

 

http://openlayers.org/en/latest/examples/custom-icon.html

1八、Custom Interactions 自定义交互操做

这里定义了一个交互（ol.Interaction）,对鼠标Down，up，move，drag进行了事件处理。

鼠标能够对feature进行拖动，且鼠标移上去时变小手。（以前我为了变小手，还本身写了个事件，原来人家已经有规范的定义好了）

对比了下我本身写的，跟这个例子定义的，竟然实现的方式同样。

例子：

也无非是判断当前鼠标位置有无feature

本人：直接用的ol.interaction.select这个交互操做，貌似仍是我写的简洁，哈哈，不改了。

http://openlayers.org/en/latest/examples/custom-interactions.html 

年前作毕设时对ol3的一些总结，本想着等到所有完结，不过世事无常，如今从事的工做跟GIS没有什么关系了，也再也不接触这些了，今天无聊看看未发布的随笔，权当怀念。有心人能够将其做为一个小开源，以便后来者学习起来省时些。

顺便祝大伙儿国庆快乐，加班的今天的应该也很轻松吧，闲若我，无聊在这码字。O(∩_∩)O