1.坐标系：

目前OpenLayers 3支持两种投影，一个是EPSG:4326，等同于WGS84坐标系。另一个是EPSG:3857，经常用于web地图。一个是全球通用的，一个是web地图专用的。在使用过程中，需要注意OpenLayers 3默认使用的是EPSG:3857。
EPSG4326是基于WGS84椭球的经纬度坐标系（大地坐标系，BL）。
EPSG3857是基于球体的、web墨卡托投影（伪墨卡托投影Pseudo-Mercator）的投影坐标系，范围为纬度85度以下，由于google地图最先使用而成为事实标准。至今，大多互联网地图都使用EPSG3857，主要是因为该投影是等角投影，适合地图定向及导航，但是纬度越高，面积变形越大。

2.加载在线地图：

   import Tile  from 'ol/layer/Tile';
   import OSM  from 'ol/source/OSM';
   import {Map,View} from "ol";
   // Open Street Map 地图层
    var openStreetMapLayer = new Tile({
        source: new  OSM()
    });
   // Bing地图层
    var bingMapLayer = new Tile({
        source: new ol.source.BingMaps({
            key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',
      imagerySet: 'Road'
        })
    });
   // 创建地图
    var map = new Map({
        layers: [
            openStreetMapLayer     //添加图层
        ],
        view: new  View({
            center: [104.06, 30.67],   //设置地图显示中心
            projection: 'EPSG:4326',  //使用EPSG:4326坐标系
            zoom: 10 ,                         //地图初始化层级
            minZoom:1,                      //地图缩放最小层级
            maxZoom:18                   //地图缩放最大层级
        }),
        target: 'map'                        //绑定的dom标签id
    });
   map.addLayer(bingMapLayer);  //使用图层

3.加载离线瓦片地图

   import Tile  from 'ol/layer/Tile';
   import XYZ from 'ol/source/XYZ';
   import {Map,View} from "ol";
    // 地图设置中心，并转换坐标系为EPSG:3857
    var center = ol.proj.transform([104.06667, 30.66667], 'EPSG:4326', 'EPSG:3857');
    //创建地图
    var map = new Map({
        view: new View({ 
            center: center,
            zoom: 4 
        }),
        target: 'map'
    });
    // 添加一个使用离线瓦片地图的层
    var offlineMapLayer = new Tile({
        source: new XYZ({
            // 设置本地离线瓦片所在路径。
            url: '../src/05-04/offlineMapTiles/{z}/{x}/{y}.png'
        })
    });
    map.addLayer(offlineMapLayer);

4.加载静态地图：

 import Image from 'ol/layer/Image';
 import ImageStatic  from 'ol/source/ImageStatic';
 import {Map,View} from "ol";
 var center = ol.proj.transform([104.06667, 30.66667], 'EPSG:4326', 'EPSG:3857');
 // 计算地图映射到地图上的范围，图片像素为 550*344，保持比例的情况下，把分辨率放大一些
 var extent = [center[0]- 550*1000/2, center[1]-344*1000/2, center[0]+550*1000/2, center[1]+344*1000/2];
 //创建地图
 var map = new  Map({
     view: new View({ 
         center: center,
         zoom: 7
     }),
     target: 'map'
 });
 // 加载静态地图层
 map.addLayer(new Image({
     source: new ImageStatic({
         url: '../img/pandaBase.jpg', 
         imageExtent: extent     // 映射到地图的范围
     })
 }));

5.加载矢量图：

    //创建地图
  import VectorSource  from 'ol/source/Vector';
  import {Map,View} from "ol";
  import {defaults,FullScreen,Rotate,MousePosition,OverviewMap,ScaleLine,ZoomSlider} from 'ol/control';
  import {Style,Text,Fill,Stroke,Icon,Circle} from 'ol/style';
  
  source = new VectorSource({
            url:'../data/geojson/line-samples.geojson',//要素数据的地址
            format:new GeoJSON(),//url属性设置后，加载要素使用的数据格式，采用异步的 AJAX 加载；
            wrapX:false //是否在地图水平坐标轴上重复，默认是 true
        });

   layerObj = new VectorLayer({
            source:source,
            style:(features)=>{  //设置每个features的样式
                      new Style({
                            //地图填充颜色
                            fill:new Fill({
                                    color:"#ffffff"
                            });
                            //地图边框样式
                            stroke:new Stroke({
                                  lineDash:[6],//虚线
                                  color:lineColor,//线颜色
                                  width:lineWidth//线宽度
                            });
                            //设置文本样式
                            text:new Text({
                                  //位置
                                  textAlign:'right',
                                  //基准线
                                    textBaseline:'bottom',
                                  //offsetX:10,
                                  //文字样式
                                  font:"bold 48px 微软雅黑",
                                  //文字颜色
                                  fill:new Fill({
                                        color:"#000"
                                  }),
                                  //文字背景
                                    stroke:new Stroke({
                                          color:'#2e2e2e',
                                          width:1
                                    }),
                                  //文本内容
                                  text:text
                            })
                      }）
            },
            opacity:0.9,
            zIndex:9
     });
   

     let view = new View({
           // center: transform(MAPCENTER,'EPSG:4326', 'EPSG:3857'),
            center: [12679405.484039215, 2549477.9604217946],
            extent:[12679405.484039215, 2549477.9604217946, 12681608.190268839, 2550532.276580661],//限制地图托放范围
            projection:'EPSG:3857',
            zoom: 17,
            minZoom: 17,
            maxZoom: 20
        });

    mapObj = new Map({
            //显示地图控件，缩放，鹰眼地图，比例尺等
            controls: defaults().extend([
                new ZoomSlider()
                //new FullScreen(),
                //new MousePosition(),
                /*new Rotate({
                 autoHide:false,
                 }),*/
                //new OverviewMap(),
                //new ScaleLine()
            ]),
            layers: [
                map.layerObj
            ],
            view: view,
            target: 'map'
    }); 
    // 因为是异步加载，所以要采用事件监听的方式来判定是否加载完成
    var listenerKey = vectorLayer.getSource().on('change', function(){
        if (vectorLayer.getSource().getState() === 'ready') {    // 判定是否加载完成
            document.getElementById('count').innerHTML = vectorLayer.getSource().getFeatures().length;
            vectorLayer.getSource().unByKey(listenerKey); // 注销监听器
        }
    });