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(
            

        )
    }
}

基本概念

地图 Map

import Map from 'ol/Map';

该地图是OpenLayers的核心组件。要渲染地图，需要一个视图，一个或多个图层以及一个目标容器：

const map = new Map({ 
    target: 'map' //指向id为map的标签。
    layers:[] //图层，是按提供的顺序渲染的
    view:[], //地图的视图
    controls:[] //可以添加地图的控件，比例尺等
}) 

官方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);