注意：国内地图均经过加密，尤其是百度地图，经过了二次加密，通常情况下都会存在偏差。所以最好是利用地图下载器下载后面带有“无偏差”的地图，否则需要对经纬度进行转化。

1、需要的前端库文件有jquery.js、ol.js、ol.css。网上百度一番不难找，实在找不到的可以留言我发给你。

2、需要有地图的瓦片图。网上有各类工具：全能电子地图下载器，水经注地图下载器等等，可以免费将百度、谷歌、高德、腾讯等的地图制作成瓦片图后下载下来。同上，百度一番不难找，实在找不到可以留言。

3、首先在body中定义一个div用以存放地图，注意需要设置id

4、js实现加载地图

第一个参数[111.36,26.25]为地图的中心位置，后面的两个参数是地图的坐标系，ol3默认情况下是3857，我们需要把经纬度从4326转化为3857。这样才不会错位。 var center = ol.proj.transform([111.36, 26.25], 'EPSG:4326', 'EPSG:3857');

设置离线地图的图层。通常我们下载下来的地图都会是类似d://roadmap/z/y/x.png这样的格式，其中zyx为数字，或是数据加一个字母，z代表图层，y代表y轴，x代表x坐标 将下载下来的地图放到项目里面，url设置对应的路径var offlineMapLayer = new ol.layer.Tile({    source: new ol.source.XYZ({        url: 'roadmap/{z}/{x}/{y}.png'    })});

ol3中一个完整的地图至少需要3个要素：1、图层layers，可以同时设置多个图层，按照先后顺序进行覆盖；2、中心坐标；3、地图容器

// 创建地图var map = new ol.Map({      // 设置地图图层      layers: [       offlineMapLayer//将我们上一步设置好的离线地图加载进来      ],       // 设置显示地图的视图      view: new ol.View({        //projection: 'EPSG:4326',        center: center,    // 将之前定义好的中心点放进来        zoom: 10,　　　　　　//设置地图默认展开到第10个图层，即默认z=10      }),      // 让之前id为map的div作为地图的容器      target: 'map',});

完成以上步骤，一个最简单的离线地图就完成了。