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);

效果圖：