介紹：開源的Web GIS引擎，使用了JavaScript、最新的HTML5技術(shù)及CSS技術(shù)，支持dom，canvas和webgl三種渲染方式。除了支持網(wǎng)頁端，還支持移動端。在地圖數(shù)據(jù)源方面，支持各種類型的瓦片地圖，既支持在線的，也支持離線的。比如OSM, Bing, MapBox, Stamen, MapQuest等等；還支持各種矢量地圖，比如GeoJSON，TopoJSON，KML，GML等等。隨著OpenLayers 3的進一步發(fā)展，將支持更多的地圖類型。

學習網(wǎng)址：
（1）官網(wǎng)：https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html
（2）中文網(wǎng)：http://linwei.xyz/ol3-primer/ch14/index.html
（3）經(jīng)典案例：https://blog.csdn.net/linzi19900517/category_11651202.html

面向?qū)ο缶幊?ol.等API
包管理方式
駝峰命名，變量小駝峰，類名大駝峰

地圖組成部分：
（1）地圖 Map ol.Map
（2）視圖View ol.View 控制地圖顯示的中心位置、范圍、層級
（3）圖層Layer 提供了多種多樣用于不同業(yè)務(wù)的圖層，每一種圖層在實現(xiàn)上都對應(yīng)于一個類，放在包ol.layer下面
（4）數(shù)據(jù)源Source ol/source 它和圖層一一對應(yīng)，提供不同的數(shù)據(jù)源，每種都有具體的類，放在ol.source下
（6）控件Control 為用戶提供了和地圖交互的入口。 針對不同的用途，具有不同的控件。在包ol.control下面，控件具備相同的一個特性，就是一直保持在地圖的某個固定位置，不會隨著地圖移動而移動，也不會隨著地圖放大縮小而變化，一直處于地圖的最上層。控件最初添加到地圖。如果未指定，則使用defaults
（7）交互Interaction：理解所有控件都在它下，要不也實現(xiàn)不了放大縮小等功能
（8）地圖覆蓋物ol/Overlay：在地圖上顯示并附加到單個地圖位置的元素。和Control一樣，overlay也是可見的小部件。與控件不同的是，它們不是在屏幕上的固定位置，而是與地理坐標綁定，因此平移地圖將移動覆蓋
（9）有關(guān)坐標轉(zhuǎn)換的包都在ol/proj中 （例如經(jīng)緯度等的轉(zhuǎn)化）

具體講解：
1、Map:實例化地圖，配置圖層數(shù)據(jù)、視圖、控件及綁定元素，還提供了一些api

addControl()  // 添加控件
addInteraction() // 添加交互
addLayer() // 添加圖層
addOverlay() // 添加覆蓋物
forEachFeatureAtPixel(pixel, callback, options)  // 在每個像素處的要素
   //例如是否存在要素：
           const feature = map.forEachFeatureAtPixel(pixel, function (feature: FeatureLike) {
               return feature;
           })
getAllLayers() // 獲取所有的圖層
getControls() // 獲取控件
getCoordinateFromPixel(pixel) // 獲取給定像素的坐標
getEventCoordinate(event) // 返回瀏覽器事件的用戶投影中的坐標
getFeaturesAtPixel(pixel, options) // 獲取在視口上與像素相交的所有特征
getInteractions() // 獲取地圖交互
getLayerGroup() // 獲取與此地圖相關(guān)的layergroup
getLayers()
getOverlays()
getProperties()
getSize()
getTarget()
getTargetElement() // 獲取當前目標元素的dom
getView() // 獲取與此地圖關(guān)聯(lián)的視圖。視圖管理中心和分辨率等屬性
getViewport() // 獲取作為視口的元素
hasFeatureAtPixel(pixel, options) // 要素是否與像素處相交，即當前像素點是否有像素返回布爾值，也可以添加過濾邏輯
removeControl(control)
removeInteraction(interaction)
removeLayer(layer)
removeOverlay(overlay)
render()// 地圖渲染
renderSync() // 地圖渲染以同步的方式立即呈現(xiàn)
setLayerGroup()
setLayers(layers)

2、View:視圖，定義map展示的中心點、層級、范圍還可以通過api獲取到動態(tài)設(shè)置（實現(xiàn)移動方法縮小），提供了很多屬性和方法(可以獲取到設(shè)置的屬性值等)

view: new View({
                center: fromLonLat([defaultOptions.center.lon, defaultOptions.center.lat]), // 中心坐標,有時會用到ol/extend/getCenter
                zoom: defaultOptions.defaultZoom, // 未定義分辨率時使用，計算初始視圖的縮放級別（初始時縮放層級）
                minZoom: defaultOptions.minZoom, // 最小縮放級別
                maxZoom: defaultOptions.maxZoom,  // 最大縮放級別
                constrainResolution: true, // 如果為真，視圖將在交互后始終動畫到最近的縮放級別
                projection: 'EPSG:4326', // 設(shè)置使用EPSG:4326投影，默認EPSG:3857經(jīng)常用于web地圖，投影是為了讓立體展示在平面圖
                extent: [102, 29, 104, 31], // 限制地圖中心顯示范圍，例如最大最小經(jīng)緯度。但縮小還是會顯示這個范圍外的內(nèi)容 
                constrainRotation：true, // 是否限制旋轉(zhuǎn)
                enableRotation：true, // 啟用旋轉(zhuǎn)
            }),

3、Source和Layer 圖層和數(shù)據(jù)源,一一對應(yīng)關(guān)系，有一個source就有一個layer,然后將layer添加到map上顯示出來，是源數(shù)據(jù)的可視化表示形式
（1）ol/layer/Tile：瓦片圖層——平鋪-渲染網(wǎng)格中提供平鋪圖像的源，網(wǎng)格按特定分辨率的縮放級別組織(一般用來構(gòu)成底圖)
（2）ol/layer/Image：圖像——渲染以任意范圍和分辨率提供地圖圖像的源。
（3）ol/layer/Vector：矢量圖層——在客戶端呈現(xiàn)向量數(shù)據(jù)。
（4）ol/layer/VectorTile：矢量瓦片——作為矢量分幅提供的數(shù)據(jù)呈現(xiàn)。

import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'; 
this.map.addLayer(maplayer) //在頁面新增圖層
this.map.removeLayer(maplayer) //刪除某一圖層可結(jié)合this.map.getLayers().array_[index]使用
this.map.getLayers() //獲取所有圖層信息
maplayer.setOpacity(0); //給圖層設(shè)置透明度
// Layers是所有圖層的基類
// 常用圖層：用時查
// 圖層屬性和方法（其他圖層子類也一樣）：方法可以獲取設(shè)置屬性等
const normalMap = new Layer({
            visible: , // 圖層是否展示
            source: new XYZ({ // 圖層源，即數(shù)據(jù)源，最終展示在圖層的頁面（一般矢量圖層的話會將各個元素的feature添加到源上顯示）
                url: defaultOptions.normalUrl,
            }),
            className：,
            style: new ol.style.Style({
                   stroke: new ol.style.Stroke({
                   color: 'red',
                   size: 1
                })
             }),
             opacity:, // 不透明度
             extent：, // 圖層渲染范圍，該圖層不會在范圍外被渲染
             z-index:,
             minResolution:, // 可見的最小分辨率
             maxResolution：,
             minZoom:, // 最小可見層級
             maxZoom:,
             map:,
             render:,
             自定義屬性，設(shè)置后可通過get set訪問      
})

（1）ol.source.Tile 對應(yīng)的是瓦片數(shù)據(jù)源，現(xiàn)在網(wǎng)頁地圖服務(wù)中，絕大多數(shù)都是使用的瓦片地圖
（2）ol.source.Image 對應(yīng)的是一整張圖，而不像瓦片那樣很多張圖，從而無需切片，也可以加載一些地圖
（3）ol.source.Vector 對應(yīng)的是矢量地圖源，點，線，面等等常用的地圖元素(Feature)，就囊括到這里面了

import { XYZ, Vector as VectorSource,Source } from 'ol/source';  // xyz格式的數(shù)據(jù)源
// 常用類型的數(shù)據(jù)源
// 屬性和方法（以基類Source為例）
const normalMap = new Layer({
            source: new Source({ // 圖層源(每個類型源下都有自己的屬性，用時查)
                wrapX: false,
                url: defaultOptions.normalUrl,
            }),  
})

getFeaturesInExtent(extent) // 獲取邊界框與所提供范圍相交的所有要素

4、功能要素feature 在ol/Feature上，地理特征的矢量對象，可以單獨設(shè)置樣式（地圖上的功能段）。即地圖上的幾何對象，包括點（Point），線（LineString）,多邊形（Polygon），圓（Circle）， layer（圖層），就像是含有點、線、面、文字、圖片的玻璃板（可以結(jié)合ol/geom上提供的創(chuàng)建圖形函數(shù)，根據(jù)給定的坐標繪制圖形）

注意：給地圖添加要素需要知道添加的geometry位置（繪制的幾何圖形），并添加至對應(yīng)圖層的源上，這樣才能展示出來

import Feature } from 'ol/Feature';
// 假設(shè)circleLayer已添加至map上的圖層配置中
 var circleLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
    });
 var circle = new ol.Feature({
      geometry: new ol.geom.Point([0, 0]) // 繪制的幾何圖形
  });
  circle.setStyle(new ol.style.Style({
      image: new ol.style.Circle({
          radius: 10,
          stroke: new ol.style.Stroke({
              color: 'blue',
              size: 1
          })
      })
  }));
  circleLayer.getSource().addFeature(circle);

樣式設(shè)置：改feature設(shè)置樣式或給layer設(shè)置樣式
```javascript
// 方式1 改layer設(shè)置樣式
 var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: '../data/geojson/line-samples.geojson', 
            format: new ol.format.GeoJSON()
        }),
        // 設(shè)置樣式，顏色為紅色，線條粗細為1個像素
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                size: 1
            })
        })
    });
    map.addLayer(vectorLayer);
// 給feture設(shè)置樣式
如果要在feature上設(shè)置樣式，就必須先獲取到所有加載的feature，然后依次設(shè)置，顯然直接設(shè)置layer的樣式，會在代碼編寫上更容易一些

5、LOD及分辨率
lod：根據(jù)不同的放大縮小呈現(xiàn)不同層級的底圖
瓦片計算
獲取層級及分辨率

6、圖標及提示信息：比如在地圖上標注飯店，學校，加油站等，就需要添加圖標，點擊圖標，可能需要提示更為詳細的信息
添加圖標的兩種方式：（1）overlay （2）feature+style

// overlay實現(xiàn)往地圖添加圖標
import Overlay from 'ol/Overlay'
  // 下面把上面的圖標附加到地圖上，需要一個ol.Overlay
  <div id="anchor"><img src="../img/anchor.png" alt="示例錨點"/></div>
  var anchor = new ol.Overlay({
    element: document.getElementById('anchor')
  });
  // 關(guān)鍵的一點，需要設(shè)置附加到地圖上的位置
  anchor.setPosition([104, 30]);
  // 然后添加到map上
  map.addOverlay(anchor);

// feature+style實現(xiàn)在地圖上添加圖標，需要矢量圖層放置圖標
// 我們需要一個vector的layer來放置圖標
  var layer = new ol.layer.Vector({
    source: new ol.source.Vector()
  })
  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }), 
      layer
    ],
    target: 'map',
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [104, 30],
      zoom: 10
    })
  });

  // 創(chuàng)建一個Feature，并設(shè)置好在地圖上的位置
  var anchor = new ol.Feature({
    geometry: new ol.geom.Point([104, 30])
  });
  // 設(shè)置樣式，在樣式中就可以設(shè)置圖標
  anchor.setStyle(new ol.style.Style({
    image: new ol.style.Icon({
      src: '../img/anchor.png'
       anchor: [0.5, 1]    // 設(shè)置圖標位置
    })
  }));
  // 添加到之前的創(chuàng)建的layer中去
  layer.getSource().addFeature(anchor);
  // 根據(jù)層級放大縮小圖標，不設(shè)置是不隨放大縮小圖標不進行放大縮小
  // 監(jiān)聽地圖層級變化
  map.getView().on('change:resolution', function(){
      var style = anchor.getStyle();
      // 重新設(shè)置圖標的縮放率，基于層級10來做縮放
      style.getImage().setScale(this.getZoom() / 10);
      anchor.setStyle(style);
  })

7、事件：監(jiān)聽、注銷、常用事件

this.map.on('pointermove', e => { // 鼠標移動事件
    //鼠標經(jīng)過箭頭變手勢，，可以在if的條件中加入指定的圖層layerId即可（不寫指到圖層即變）
    let pixel = this.map.getEventPixel(e.originalEvent); // 當前鼠標像素點
    let hit = this.map.hasFeatureAtPixel(pixel, {
        layerFilter: layer => {
            let layerId = layer.get('layerId');
            if (
                layerId =='alertlayer' || 
                layerId =='lightlayer' || 
                layerId.indexOf("line_") > -1
            ) {
                return true;
            }
         },
    });
    this.map.getTargetElement().style.cursor = hit ? 'pointer' : ''; // 獲取當前像素的元素dom如果有要素樣式變小手
});

// 鼠標點擊事件
map.on('click', (evt: MapBrowserEvent<any>) => {
            const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature: FeatureLike) { // 返回像素點處要素
                return feature;
            })
            if (feature) { // 如果存在要素進行邏輯處理
                const featureCode = feature.getId();
                if (featureCode) {
                    featureSelect.onSelect(map, featureCode, true);
                }
            }
        })


// 右鍵菜單功能
mapRef.value.oncontextmenu = async (evt: any) => {
            rightMenuX.value = null
            rightMenuY.value = null
            rightMenuData.value = []
            bind.value = null
            evt.preventDefault()
            var pixel = map.getEventPixel(evt) // 獲取點擊位置處的像素
            const feature = map.forEachFeatureAtPixel(pixel, function (feature: FeatureLike) { // 返回點擊像素處的要素
                return feature;
            })
            if (feature) { // 如果存在幾何要素
                const featureCode = feature.getId(); // 拿要素id(即標簽的code)
                let equipId = store?.state?.gis?.relationMap[featureCode as string]?.id // 是否有關(guān)聯(lián)的監(jiān)控設(shè)備id
                if (equipId) { // 如果存在獲取接口綁定數(shù)據(jù)，數(shù)據(jù)是響應(yīng)式的所以可以控制顯示隱藏。
                    bind.value = [equipId]
                    rightMenuX.value = evt.offsetX
                    rightMenuY.value = evt.offsetY
                    const res = await getRightMenu({ equipId: equipId })
                    if (res && res.code === 200) {
                        rightMenuData.value = res.data
                    }
                }
            }
        }

8、交互事件Interaction：例如拖動、點、線、面的繪制等（不與dom元素關(guān)聯(lián)）
（1）內(nèi)置交互方式在ol.interaction下，例如放大、縮小、平移
（2）自定義一些交互功能：鼠標左擊、右擊等、繪圖（點 線 面 繪制交互是通過鼠標或手指的點擊添加點的坐標的，OpenLayers 會自動將 屏幕坐標轉(zhuǎn)換為 地圖坐標，點擊繪制完成后，所有的點初始化一個 geometry 對象，然后利用這個 geometry 初始化一個 feature）

import Interaction from 'ol/interaction/Interaction.js'; // 它是基類，用于創(chuàng)建子類
import Draw, { DrawEvent, createBox,createRegularPolygon } from 'ol/interaction/Draw';
//  子類：DoubleClickZoom DragAndDrop KeyboardPan KeyboardZoom Link MouseWheelZoom PointerInteraction Select Draw

// Draw講解（繪制交互要素的幾何圖形），首先定義交互要素圖層及源，將圖層添加至map中。定義交互事件（源是圖層源），并將其添加至地圖交互中
    let selectionSource.value = new VectorSource() // 圖層矢量源
    let selectionVectorLayer.value = new VectorLayer({ // 矢量圖層，這里用來放自己繪制出來的圖形展示
        source: selectionSource.value,
    })
    map.value.addLayer(selectionVectorLayer.value) // 將圖層添加至地圖 
    
    selectionDrawFeature.value = new Draw({ // 定義交互事件
        source: selectionSource.value, // 交互事件的源是對應(yīng)圖層的源，即將繪制的圖形放在對應(yīng)的圖層上（繪制的目標源）
        type: value, // 類型('Point', 'LineString', 'LinearRing', 'Polygon', 'MultiPoint', 'MultiLineString', 'MultiPolygon', 'GeometryCollection', or 'Circle')
        geometryFunction: value === 'Circle' ? createBox() : undefined,  // 函數(shù)，可選的幾何圖形（不設(shè)置的話根據(jù)type類型繪制 圓或者多邊形）
        style: new Style({ }), // 繪制的樣式設(shè)置
        maxPoints：, // 在完成圖形繪制或線段繪制最多的點
        minPoints：,
        
    })
     selectionDrawFeature.value.on('drawstart', function (evt: DrawEvent) { // 繪畫開始時清除交互源（表示只能繪制一個）
        selectionSource.value.clear()//不寫的話可以繪制多次，添加后只能繪制一次(Draw實例觸發(fā)的事件是DrawEvent類型的)
    })
     selectionDrawFeature.value.on('drawend', function (evt: DrawEvent) { // 繪畫結(jié)束后的處理邏輯
        const polygon = evt.feature.getGeometry() // 繪制圖形
        if (!polygon || !map.value) return;
        const extent = polygon.getExtent()
        const currentZoom = map.value.getView().getZoom()
    })

// select的講解(交互選擇矢量要素，默認情況下，所選擇的要素具有不同的樣式，可以用于視覺突出顯示，以及為其他操作(如修改或輸出)選擇要素) 作用:實現(xiàn)選中高亮并拿到選中要素（不用監(jiān)聽map的點擊事件判斷有無要素等來實現(xiàn)）
import Select,{} from 'ol/interaction/Select.js';
 var select = new Select({ // 創(chuàng)建選擇工具，用于盛放矩形框內(nèi)的要素
      condition: ol.events.condition.singleClick, // 選中事件，默認單擊選中并刪除選中的其他要素
      layers：, // 可選圖層，可以設(shè)置函數(shù)過濾，不設(shè)置默認所有可見圖層的要素均可選中
      style: new ol.style.Style({
        image: new ol.style.Circle({
          radius: 30,
          stroke: new ol.style.Stroke({
            width: 4,
            color: 'red'
          }),
          fill: new ol.style.Fill({
            color: 'green'
          })
        }),
        stroke: new ol.style.Stroke({
          width: 4,
          color: 'red'
        }),
        fill: new ol.style.Fill({
          color: 'green'
        })
      })
    });
    var drawLayer = new VectorLayer({
            source: new VectorSource(),
            style: new Style()
          });
   // 在繪制結(jié)束后，找到矢量圖層中在繪制范圍內(nèi)的feature并將feature添加至select交互的要素數(shù)組中（代表選中的要素）
     // 開始繪制，清除已有要素
          drawBox.on('drawstart', function () {
            console.log('開始繪制')
            select.getFeatures().clear(); // 清除選中要素
            drawLayer.getSource().clear(); // 清除繪制要素
          });
         
        // 結(jié)束繪制
            drawBox.on('drawend', function (e) {
              if (e.feature) {
                // 獲取框選范圍
                var geometry = e.feature.getGeometry();
                var extent = geometry.getExtent();
                // 查詢框選范圍內(nèi)的所有點
                vectorLayer.getSource().forEachFeatureIntersectingExtent(extent, function (feature) {
                  select.getFeatures().push(feature);
                });
                select.dispatchEvent('select');
                // 遍歷被選中的要素
                var selected = [];
                var selectedFeatures = select.getFeatures();
                for (var i = 0; i < selectedFeatures.getLength(); i++) {
                  var feature = selectedFeatures.item(i);
                  var name = feature.get('name');
                  selected.push(name);
                }
                // 輸出查詢結(jié)果
                var msg = selected.join('、');
                console.log(msg,111111111111)
              }
            });
        // 添加交互工具
        map.addInteraction(drawBox);
        map.addInteraction(select);

// Modify用于修改要素的交互
import Modify from 'ol/interaction/Modify.js';
import Collection from 'ol/Collection';

9、控件control:在地圖固定的位置，不會隨著地圖放大縮小而變化。
在地圖上是不會顯示這么多地圖控件的，只會應(yīng)用ol.control.defaults()這個函數(shù)返回的地圖控件，默認包含了ol.control.Zoom，ol.control.Rotate和ol.control.Attribution這三個控件
自己寫的控件需要定位位置dom，然后寫邏輯

import { FullScreen, ScaleLine, defaults } from 'ol/control';
    controls: defaults({  // 控件
                attribution: false,  // 右下角地理信息控件無
                rotate: false, // 指北針控件無
                zoom: defaultOptions.zoom, // 縮放按鈕控件
                zoomOptions: {
                    className: 'control-zoom',
                    zoomInTipLabel: '放大',
                    zoomOutTipLabel: '縮小',
                },
            })
                .extend(controlsList), // 選擇的自定義控件，例如全屏控件，比例尺控件

// 知識點
ol/control/Control // 控件的基類,通過創(chuàng)建帶有監(jiān)聽器的元素來創(chuàng)建簡單的自定義控件，創(chuàng)建一個實例const myControl = new Control({element: myElement});然后把它添加至地圖控件中。其他提供的控件是子類可以使用
ol/control/default // 此函數(shù)包含默認情況下的控件集（放大、旋轉(zhuǎn)、基礎(chǔ)信息）
ol/control/Zoom // 默認控件縮放控件?？梢允褂胏lassName設(shè)置樣式或使用內(nèi)置類名設(shè)置（可以設(shè)置顯示文本及提示信息）
ol/control/Rotate // 默認控件。將旋轉(zhuǎn)重置為0的控件按鈕（有自己的屬性，可以根據(jù)此控件自定義創(chuàng)建）（attribution，attributionOptions，rotate，rotateOptions，zoom，zoomOptions）
ol/control/Attribute // 默認控件，在右下角顯示與層源相關(guān)的信息
ol.control.ScaleLine: // 比例尺控件?？梢栽O(shè)置樣式及縮放單位（默認千米）
ol.control.FullScreen: // 全屏控件.將地圖填滿整個屏幕
ol.control.ZoomSlider: // 縮放滾動條控件
ol.control.OverviewMap: // 鳥瞰圖控件
ol.control.MousePosition: // 鼠標位置控件
ol.control.ZoomToExtent: // 放大到設(shè)定區(qū)域控件

10、動畫

11、覆蓋層 Overlay：在地圖上顯示并附加到單個地圖位置的元素。使用時一般生成Overlay實例綁定dom或組件實例，設(shè)置綁定位置，將它添加至map

import Overlay from 'ol/Overlay.js';
const popup = new Overlay({ // 創(chuàng)建附加元素綁定到dom
  element: document.getElementById('popup'), // 設(shè)置綁定的dom(即附加元素展示的什么)
  id:id, // 設(shè)置覆蓋id
  offset:[0,0] // 覆蓋時偏移量，默認0 0 
  position：, // 在地圖投影中的位置
  positioning："top-left"  //定義overlay如何相對于其position屬性實際定位?？赡艿闹禐椤癰ottom-left”、“bottom-center”、“bottom-right”、“center-left”、“center-center”、“center-right”、“top-left”、“top-center”和“top-right”。  
  autoPan: true, // 在調(diào)用setPosition時平移映射，以便overlay覆蓋完全可見
  autoPanAnimation: { // 平移動畫
     duration: 250, // 持續(xù)時間
  },
  className："" // css類名
});
popup.setPosition(coordinate); // 附加元素綁定到地圖固定位置
map.addOverlay(popup);  // 將附加元素添加到map中

// 方法：（獲取和設(shè)置屬性方法）
changed()
dispatchEvent(event)
get(key) // 獲取設(shè)置的值
getElement() // 獲取overlay綁定的dom 
getId()
getKeys()
getPosition() // 獲取覆蓋層的當前位置
getPositioning()
getProperties() // 獲取所有屬性的鍵值對對象
on(type, listener)
once(type, listener)
panIntoView(panIntoViewOptions) // 平移地圖使覆蓋層在當前地圖完全可見
set(key, value, silent)
setElement(element)
setMap(map)
setOffset(offset)
setPosition(position)  // 設(shè)置這個覆蓋的位置。如果位置未定義，覆蓋將被隱藏
setPositioning(positioning)
un(type, listener)
unset(key, silent)

12、ol/style：樣式容器，通過set*()方法對該樣式或其子樣式所做的任何更改都不會生效，直到使用該樣式的feature或?qū)颖恢匦鲁尸F(xiàn)（主要針對矢量圖層數(shù)據(jù)，可以全局配置，也可以給單個feature設(shè)置）

import { Style, Text, Fill, Stroke,Circle } from "ol/style";
// feature 的默認樣式
 const fill = new Fill({
   color: 'rgba(255,255,255,0.4)', // 灰色
 });
 const stroke = new Stroke({
   color: '#3399CC', // 藍色
   width: 1.25,
 });
 const styles = [
   new Style({
     image: new Circle({
       fill: fill,
       stroke: stroke,
       radius: 5,
     }),
     fill: fill,
     stroke: stroke,
     // 其他等等
   }),
 ];

// new Style中屬性
image： // 類型ol.style.Image。用于創(chuàng)建基類Icon, CircleStyle和RegularShape（常規(guī)形狀）的基類?？梢栽O(shè)置常規(guī)圖形、圖標然后設(shè)置樣式
fill：// style/Fill類型，填充色
stroke：// style/stroke類型，邊的樣式
text：// style/text類型，文本樣式，可以設(shè)文本的基線、填充色，邊等樣式
zIndex： // 元素的堆疊順序
hitDetectionRenderer： // 自定義檢測渲染
geometry： // 地理屬性，一般和image配合使用，表示image放置的位置
// 方法（以上屬性的設(shè)置及獲?。?/span>
clone() // 克隆樣式，返回樣式
getFill() 
getGeometry()
getGeometryFunction()
getHitDetectionRenderer()
getImage()
getRenderer()
getStroke()
getText()
getZIndex()
setFill(fill)
setGeometry(geometry)
setHitDetectionRenderer(renderer)
setImage(image)
setRenderer(renderer)
setStroke(stroke)
setText(text)
setZIndex(zIndex)

13、ol/geom：提供幾何圖形（根據(jù)傳的位置及參數(shù)創(chuàng)建對應(yīng)的幾何圖形），常配合feature矢量圖形的geometry屬性

import { Circle as CircleGeom, LineString, Point, Polygon } from 'ol/geom';
new Circle(center, radius, layout) // 根據(jù)位置創(chuàng)建的圓幾何，并提供了很多屬性和方法
new Point(coordinates, layout) // 點幾何，位置是數(shù)組兩個點，，并提供了很多屬性和方法
new Polygon(coordinates, layout, ends) // 多邊形幾何體 
new LinearRing(coordinates, layout) // 線性環(huán)幾何，僅作為多邊形的一部分使用;不能單獨呈現(xiàn)
new LineString(coordinates, layout) // 線段 coordinates	Array<Coordinate> | Array.<number>
new MultiPoint(coordinates, layout) // 多點幾何 	Array<Coordinate> | Array.<number>
new MultiPolygon(coordinates, layout, endss) // 多多邊形
new MultiLineString(coordinates, layout, ends) //多線段幾何 coordinates	Array.<(Array.<module:ol/coordinate~Coordinate>|module:ol/geom/LineString~LineString)> | Array.<number>

// 抽象基類
new Geometry() // 向量幾何基類，只用于創(chuàng)建子類，而不是在應(yīng)用程序中實例化  子類：GeometryCollection SimpleGeometry
new GeometryCollection(geometries) // 幾何對象數(shù)組， Array<Geometry> | undefined
new SimpleGeometry()//抽象基類;僅用于創(chuàng)建子類;不要在應(yīng)用程序中實例化，因為不能渲染.子類是上面介紹的圖形

14、ol/extent：提供擴展的方法文章來源地址http://www.zghlxwxcb.cn/news/detail-768435.html

applyTransform(extent, transformFn, dest, stops) // 應(yīng)用變換
boundingExtent(coordinates) // 邊界，構(gòu)建一個包含所有給定坐標的范圍
containsCoordinate(extent, coordinate) // 檢測給定的范圍是否包含在范圍內(nèi)
containsExtent(extent1, extent2) // 檢查一個范圍是否包含另一范圍
equals(extent1, extent2) // 看兩個范圍是否等效
extend(extent1, extent2) // 修改范圍1以包含另一范圍
getArea(extent) // 獲取范圍的大小
getBottomLeft(extent) // 獲取范圍的左下角坐標
getBottomRight(extent)
getTopLeft(extent)
getTopRight(extent)
getCenter(extent) // 獲取范圍的中心坐標
getHeight(extent) // 獲取范圍的高
getIntersection(extent1, extent2, dest) // 獲取交點
getSize(extent) // 獲取范圍的寬、高
getWidth(extent)
isEmpty(extent) // 一個范圍是否為空

<div id="map" class="visual-map" 
	@contextmenu.stop 
	@click.stop 
	ref="mapRef">
</div>
   const normalMap = new TileLayer({
       visible: defaultOptions.defaultMapType === 1,
          source: new XYZ({
              url: defaultOptions.normalUrl,
          }),
    })
   const map = new Map({
         target: 'map',
         controls: defaults({
              attribution: false,
              rotate: false,
              zoom: defaultOptions.zoom,
              zoomOptions: {
                  className: 'control-zoom',
                  zoomInTipLabel: '放大',
                  zoomOutTipLabel: '縮小',
              },
          })
          layers: [normalMap, sateMap, overlayMap],
          view: new View({
              center: fromLonLat([defaultOptions.center.lon, defaultOptions.center.lat]),
              zoom: defaultOptions.defaultZoom,
              minZoom: defaultOptions.minZoom,
              maxZoom: defaultOptions.maxZoom,
              constrainResolution: true,
          }),
   }) as VisualMap;

到了這里，關(guān)于OpenLayers 開源的Web GIS引擎的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！