WebGIS开发之用openlayers加载离线百度地图

因为项目需要，只有内网环境，没有外网环境，所以需要下载地图瓦片。

一.下载瓦片地图

这个可以自行在网上找一些地图瓦片下载器，下好的瓦片地图是分级的。大概如图这种类型。

二.在地图上显示标记

首先使用openlayers加载离线地图瓦片。这里我用的nginx弄了给静态图片服务器。

// 自定义分辨率和瓦片坐标系
    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://localhost:8008/123456789/" + z + "/" + x + "/" + y + ".png";
        }
    });

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

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

创建矢量图层，获取数据库中的所有点，用一个小图标在地图上标记出来。

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

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

    //创建图标样式
    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            opacity: 0.75,
            src: "http://localhost:8008/tubiao.png"
        }),
    });

    var vectorSource = new ol.source.Vector({

    });

    $.ajax({
        url: "/map/getAllMap",
        type: "get",
        dataType: "json",
        data: {"page": 1, "rows": 100},
        success: function (data) {
            $(data).each(function (index, item) {
                markp(item.lng,item.lat);
            });
        },
        error: function () {

        }
    })

    function markp(lng,lat) {
        //创建图标特性
        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(lng), parseFloat(lat)])),
            name: "my Icon"
        });
        //将图标特性添加进矢量中
        vectorSource.addFeature(iconFeature);
    }

    //创建矢量层
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: iconStyle
    });
    //添加进map层
    map.addLayer(vectorLayer);

效果图：