OpenLayers學習入門篇

剛把OpenLayers案例做出來，以下就是總結。

學習推薦

文檔：OpenLayers 3 算是翻譯版的非常的不錯，強力推薦 http://weilin.me/ol3-primer/ch01/index.html 

官網：Openlayers  有案例，API，不錯。（主要時間都花費在這個上面）

工具：GeoJson數據生成 http://geojson.io

這些工具，翻譯文檔會讓我們思路更加的清晰。

使用技術

react前端框架

npm 安裝 Openlayers

使用以下方式將OpenLayers添加爲對您的應用程序的依賴

npm install ol

此時，您可以要求NPM通過運行來添加所需的開發依賴項

npm install --save-dev parcel-bundle

第一個簡單的案例

可以參考 OpenLayers的介紹：https://openlayers.org/en/latest/doc/tutorials/bundle.html

import React,{Component} from 'react';
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
class Index extends Component{
    componentDidMount(){
        const map = new Map({
          target: 'map',
          layers: [
            new TileLayer({
              source: new OSM()
            })
          ],
          view: new View({
            center: [0, 0],
            zoom: 0
          })
        });
    }
    render() {
        return(
            <div id="map"></div>
        )
    }
}

基本概念

地圖 Map

import Map from 'ol/Map';

該地圖是OpenLayers的核心組件。要渲染地圖，需要一個視圖，一個或多個圖層以及一個目標容器：

const map = new Map({ 
    target: 'map' //指向id爲map的標籤。
    layers:[] //圖層，是按提供的順序渲染的
    view:[], //地圖的視圖
    controls:[] //可以添加地圖的控件，比例尺等
}) 
<div id="map"></div>

官方API：https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html

視圖 View

import View from 'ol/View';

View對象代表地圖的簡單2D視圖。

這是要更改地圖中心，分辨率和旋轉的對象。

view: new View({
   center: [0, 0],
   zoom: 0 //僅在resolution未定義的情況下使用。縮放級別，用於計算視圖的初始分辨率
})
//
var mapView = new ol.View({
    center: [134.489386, 41.304499], projection: 'EPSG:4326',/* 指定投影使用EPSG:3857 EPSG:4326 */
    zoom: 13, //指定分辨率
    minZoom: 13, //用於確定分辨率約束的最小縮放級別
    maxZoom: 14  //用於確定分辨率約束的最大縮放級別
});

官方API ：https://openlayers.org/en/latest/apidoc/module-ol_View-View.html 

通過設置zoom 設置縮放級別，minZoom，maxZoom 設置最小最大縮放成都

資源  Source

層 Layer

圖層是來自的數據的可視表示source。OpenLayers具有四種基本類型的層：

• ol/layer/Tile -渲染源，這些源在按縮放級別針對特定分辨率組織的網格中提供平鋪圖像。
• ol/layer/Image -渲染源，以任意範圍和分辨率提供地圖圖像。
• ol/layer/Vector -在客戶端渲染矢量數據。
• ol/layer/VectorTile -渲染作爲矢量切片提供的數據。

動態的添加矢量圖層 addLayer

 map.addLayer(layerPoint);