Openlayer4加载离线瓦片地图

0.169字数 239阅读 155

Openlayer4加载离线瓦片地图总结

步骤1:下载离线地图(我是通过自己写的代码下载的,具体过程见上一篇文章)

说明:(1)下载瓦片时可以将瓦片按照ArcGIS方式组织,也可以按照自定义方式组织
(2)由于大小的原因,我们选择前10级下载
ArcGIS组织方式:


image.png
image.png

自定义方式:


image.png
image.png

步骤2:复制出我们想要的地图瓦片文件,将下载好的瓦片进行发布

方式(1)利用GeoWebCache进行发布(GeoWebCache发布配制见其他文章)
方式(2)利用nginx或者Tomcat进行发布
将下载好的瓦片目录直接拷贝到nginx或者tomcat下,启动服务即可

步骤3:通过Openlayer4加载显示

以下为示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol加载本地切片</title>
    <link rel="stylesheet" href="js/ol.css">
    <script src="js/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
    // 设置地图中心,此处进行坐标转换, 把EPSG:4326(经纬度坐标),转换为EPSG:3857(WGS84网络墨卡托(辅助球))坐标,因为ol默认使用的是EPSG:3857坐标
    //[106.677, 36.7388]是下载地图的中心经纬度
    var centerPos = ol.proj.transform([108.9, 34.2], "EPSG:4326", "EPSG:3857");

    //创建地图
    var map = new ol.Map({
        view: new ol.View({
            center: centerPos,//地图中心位置
            zoom: 10//地图初始层级
        }),
        //添加地图图层
        //这里注销在下面添加新的离线地图图层
        /*layers: [
           new ol.layer.Tile({
                source:new  ol.source.OSM()
           })
       ],*/
        //将地图添加到的map容器中
        target: 'map'
    });

    //给8位字符串文件名补0
    function zeroFill(num, len, radix) {
        var str = num.toString(radix || 10);
        while (str.length < len) {
            str = "0" + str;
        }
        return str;
    }

    // ol.source.XYZ添加瓦片地图的层
    var tileLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tileUrlFunction: function (coordinate) {
                //alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);
                //以下加载ArcGIS格式的瓦片   
                var x = 'C' + zeroFill(coordinate[1], 8, 16);
                var y = 'R' + zeroFill(-coordinate[2] - 1, 8, 16);
                var z = 'L' + zeroFill(coordinate[0], 2, 10);
        
                //以下加载一般自定义格式的瓦片    
        //var x = '' + zeroFill(coordinate[1], 8, 10);
                //var y = '' + zeroFill(-coordinate[2] - 1, 8, 10);
                //var z = '' + zeroFill(coordinate[0], 2, 10);
                return 'http://192.168.1.161:5000/tiles/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径(目前利用nginx将地图瓦片发布成静态服务)
            },
            projection: 'EPSG:3857'
        })
    });
    map.addLayer(tileLayer);//添加到map里面
</script>
</body>
</html>

加载效果如下:


image.png

:源码下载地址(转载):https://github.com/1294083463/openlayersLoadArcGIS

推荐阅读更多精彩内容