針對Openlayer3官網例子的簡介

時間 2019-12-13

標籤針對 openlayer3 openlayer 例子簡介简体版

原文原文鏈接

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

若是你們想了解ol3能作什麼，或者說已提供的API有什麼，又閒一個個翻英文例子跟API累的話，就看看這個吧。javascript

一、就是個地圖加載，弄了兩按鈕，能夠放大縮小，算是個ol3的入門吧

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

二、一些動畫的介紹，旋轉，移動到某個點的過程動畫。介紹挺多的（不追求什麼個性化的話，其實沒什麼用）

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

三、加載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.htmlsql

四、緊跟上一個例子，這個是基於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.htmlcanvas

六、加載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+左鍵進行拉框。在對一些點要素，線要素進行選擇的時候，很實用，很細的線，純點擊選擇的話麻煩。this

用的API就是交互裏的ol.interaction.Selecturl

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