ol3开发离线地图

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

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

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

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

<div id="map" style="width: 80%;height: 80%;"></div>

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',
});

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

转载于:https://www.cnblogs.com/yxth/p/6496866.html