【OpenLayers-1】添加地图

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

1、添加ArcGIS地图

可以使用网络或者本地两种方式调用OpenLayers。
（1）网络方式调用，在openlayers官网中找到层叠样式表css和openlayers的js API网络路径:


（2）本地方式调用，将路径指向下载到本地的css和js：
假如将文件解压到了F盘，路径指向为：


注：也可以将OpenLayers的css和js文件下载下来，然后使用tomcat、apache等web工具发布成服务，采用网络服务的方式引用

限制地图范围：

view: new ol.View({
  extent: [115, 33, 119, 39],
  //添加以下一行代码
  center: [117.23, 36.43],
  zoom: 10,
  projection: 'EPSG:4326'
}),

限制地图缩放等级：

zoom: 10,
// 限制地图缩放最大级别为14，最小级别为10
minZoom: 8,
maxZoom: 14,

自适配区域：

"点击"
。。。
function fitToChengdu() {
    // 让地图最大化完全地显示区域[104, 30.6, 104.12, 30.74]
    map.getView().fit([104, 30.6, 104.12, 30.74], map.getSize());
}

2、添加百度地图

// 自定义分辨率和瓦片坐标系
var resolutions = [];
var maxZoom = 18;

// 计算百度使用的分辨率
for (var i = 0; i <= maxZoom; i++) {
  resolutions[i] = Math.pow(2, maxZoom - i);
}
var tilegrid = new ol.tilegrid.TileGrid({
  origin: [0, 0],
  resolutions: resolutions    // 设置分辨率
});

// 创建百度地图的数据源
var baiduSource = new ol.source.TileImage({
  projection: 'EPSG:3857',
  tileGrid: tilegrid,
  tileUrlFunction: function (tileCoord, pixelRatio, proj) {
    var z = tileCoord[0];
    var x = tileCoord[1];
    var y = tileCoord[2];

    // 百度瓦片服务url将负数使用M前缀来标识
    if (x < 0) {
      x = -x;
    }
    if (y < 0) {
      y = -y;
    }
    return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";
  }
});

// 百度地图层
var baiduMapLayer2 = new ol.layer.Tile({
  source: baiduSource
});

// 创建地图
var map = new ol.Map({
  layers: [
    baiduMapLayer2
  ],
  view: new ol.View({
    // 设置成都为地图中心
    center: ol.proj.transform([117.23, 36.43], 'EPSG:4326', 'EPSG:3857'),
    /*extent: [53, 4, 73 ,135],*/
    zoom: 10,
    minZoom: 1,
    maxZoom: 10
  }),
  target: 'mapCon'
});

参考链接 一个简单的地图 | OpenLayers 3 Primer 

openlayers入门教程-CSDN博客

官网 OpenLayers - Welcome 

官网示例  OpenLayers Examples