openlayer4加载arcgis离线地图切片

前几天公司有个项目需要将在线地图改为离线地图，需要用到openlayer加载地图，加班搞了两周，一些基本功能都实现，在这也记录一下，后面需要用到也可以回头看看。
这里推荐大家加QQ群274788071，里面有很多大神。废话不多说，直接上代码。

<!-- openlayers:地图控件 -->
<script src="js/openlayers/v4.3.3-dist/ol.js"></script>
<!-- openlayers CSS 文件 -->
<link rel="stylesheet" href="js/openlayers/v4.3.3-dist/ol.css" type="text/css" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol加载ArcGIS本地切片</title>

</head>
<body>
<div id="map"></div>
<script type="text/javascript">
window.onload = function () {
    //地图
    map = initArcgisMap("map");
};
</script>
</body>
</html>

//全局变量
var arcgisUrl="../_alllayers/";//地图服务地址,定位该目录
var center=[117.3626, 32.9184];//中心点坐标
//var extents=new Array();
var extents=[116.830431,32.713815,117.869588,33.404415];//边界值，根据实际情况设置
//分辨率
var resolutions = [
    2.37946096144484E-03,
    1.18973048072242E-03,
    5.9486524036121E-04,
    2.97432620180605E-04,
    1.5228550153247E-04,
    7.61427507662348E-05,
    3.80713753831174E-05,
    1.90356876915587E-05,
    9.51784384577936E-06
];

function initArcgisMap(mapDiv) {
    //坐标系
    var projection = ol.proj.get('EPSG:4326');
    //原点位置
    var origin = [-400.0, 400];
    //瓦片网格
    var tileGrid = new ol.tilegrid.TileGrid({  
                tileSize: 512,  
                origin: origin,  
                resolutions: resolutions  
            });
    var map = new ol.Map({  
        // 设置地图控件，默认的三个控件都不显示
        controls: ol.control.defaults({
            attribution: false,
            rotate: false,
            zoom: false
        }),
        target: mapDiv,  //指定DIV的id
        layers: [  
            new ol.layer.Tile({  
                // source: new ol.source.OSM(),  
            }),  
            // 瓦片图层  
            new ol.layer.Tile({  
                // 瓦片图像数据源  
                source: new ol.source.TileImage({  
                    projection: projection,  
                    // 瓦片网格  
                    tileGrid: tileGrid,  
                    // 瓦片路径函数  
                    tileUrlFunction: function (tileCoord, pixelRatio, proj) {  
                        // 缩放级别  
                        var z = zeroPad(tileCoord[0], 2, 10);  
                        // 瓦片行号  
                        var x = zeroPad(tileCoord[1], 8, 16);  
                        // 瓦片列号  
                        var y = zeroPad(-tileCoord[2] - 1, 8, 16);  
                        // 瓦片本地路径  
                        return arcgisUrl + "L" + z + "/" + "R" + y + "/" + "C" + x + ".jpg";  
                    }  
                }),  
            }),  
        ],  
        view: new ol.View({  
            center: center,  
            // 分辨率  
            resolutions: resolutions,  
            // 地图当前缩放层级  
            resolution: resolutions[4],  
            projection: projection,  
            extent:extents,
        })

    }); 
    return map;
}



//进制转换并补齐Arcgis Server目录和名称前面的0,arcgis离线地图路径为16进制 
function zeroPad(num, len, radix) {  
    var str = num.toString(radix || 10);  
    while (str.length < len) {  
        str = "0" + str;  
    }  
    return str;  
}

openlayer4加载arcgis离线地图切片

猜你喜欢