开源GIS(十一)——openlayers中加载离线标准与自定义切片(深度好文)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xcymorningsun/article/details/84028882

目录

一、引言

二、离线标准与自定义切片的制作与使用

1、离线切片的制作

2、离线切片的使用

三、离线标准切片加载

四、离线自定义切片加载(重点非常有用)

五、总结

 


 

一、引言

        上一篇文章中讲解了在线切片的加载,本篇文章重点讲解离线切片的加载。离线切片加载在之前研究过一段时间,因为主要使用arcgis有依赖性一直没用下决定弄懂,上周看了三四天终于把这个研究通了,哈哈哈能为单位节约不少资金了。主要有离线切片的制作和加载、切片加载的原理。

 

 

二、离线标准与自定义切片的制作与使用

 

1、离线切片的制作

       这里我使用的是arcgis server切图,分别制作了标准切片(arcgis online)与自定义切片(suggest)。

        这里离线切片标准的与自定义的有什么区别呢?

        这里发布的主要区别就是分辨率resolution(比例尺scale),起始点origin,范围full extent,下面会详细解释,先记住,这个是标准切片的:

 

2、离线切片的使用

        在arcgis server中寻找切好的图片

       然后将这些切片拷贝到web服务器上面就可以使用了,当然你要记住切片的参数,就是上面提到的分辨率、起始点、范围等。

 

三、离线标准切片加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/ol.css">
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="js/ol.js"></script>

</head>
<body>
<div id="map" style="height: 100%;width: 98%"></div>
<script type="text/javascript">
    // 设置地图中心,此处进行坐标转换, 把EPSG:4326(经纬度坐标),转换为EPSG:3857(WGS84网络墨卡托(辅助球))坐标,因为ol默认使用的是EPSG:3857坐标
    //[106.677, 36.7388]是下载地图的中心经纬度
    //var centerPos = ol.proj.transform([106.677, 36.7388], 'EPSG:4326', 'EPSG:3857');
    //var centerPos = ol.proj.transform([106.677, 36.7388], 'EPSG:4326', 'EPSG:3857');


    //创建地图
    var map = new ol.Map({
        view: new ol.View({
            center: [508833, 299749],//地图中心位置
            //center:[503409, 305653],
            zoom: 18//地图初始层级
/*            center: [12956575, 4853684],//地图中心位置
            //center:[503409, 305653],
            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]);
                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);
                //return '_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
                return 'http://localhost:8080/_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
            },
            projection: 'EPSG:3857'
        })
    });
    map.addLayer(tileLayer);//添加到map里面

    map.on('click', function(evt) {
        var coor=evt.coordinate;
        alert(coor);

    });
</script>

</body>
</html>

注意这里直接使用了new ol.source.XYZ,在tileUrlFunction中将XYZ重新拼接为真正瓦片所在地址。

 

四、离线自定义切片加载(重点非常有用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/ol.css">
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="js/ol.js"></script>

</head>
<body>
<div id="map" style="height: 100%;width: 98%"></div>
<script type="text/javascript">

    var projection = ol.proj.get('EPSG:3857');
    // 瓦片地址
    // 瓦片地址格式:http://localhost:6080/arcgis/rest/services/Test/Beijing/MapServer/tile/{z}/{y}/{x}
    var tileUrl = "http://localhost:6080/arcgis/rest/services/test/cadcustom/MapServer/tile/{z}/{y}/{x}";
    // 原点
    var origin = [ -2.00377E7 ,3.02411E7];
    // 分辨率
    var resolutions = [
        2.116670900008467,
        1.0583354500042335,
        0.5291677250021167,
        0.26458386250105836,
        0.13229193125052918,
        0.06614596562526459
    ];
    // 地图范围
    var fullExtent = [ 508609.7079405099,299415.4490000001,509204.2680308107,299922.62196192663];
    var tileGrid = new ol.tilegrid.TileGrid({
        tileSize: 256,
        origin: origin,
        //extent: fullExtent,
        resolutions: resolutions
    });
    //给8位字符串文件名补0
    function zeroFill(num, len, radix) {
        var str = num.toString(radix || 10);
        while (str.length < len) {
            str = "0" + str;
        }
        return str;
    }
    // 瓦片数据源
    var tileArcGISXYZ = new ol.source.XYZ({
        tileGrid: tileGrid,
        projection: projection,
        tileUrlFunction: function (coordinate) {
            //alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);
            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);
            //return '_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
            return 'http://localhost:8080/tile/arcgiscustom/_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
        }
    });

    var map = new ol.Map({
        target: 'map',
        layers: [
            // 瓦片图层
            new ol.layer.Tile({
                source: tileArcGISXYZ
            })
        ],
        view: new ol.View({
            center:[509018, 299803],
            //resolutions: resolutions,

            //resolution: 2.116670900008467,
            projection: projection,
            //extent: fullExtent

            zoom: 17
        })
    });

    map.on('click', function(evt) {
        var coor=evt.coordinate;
        alert(coor);

    });

</script>

</body>
</html>

        注意这里直接使用了new ol.source.XYZ,在tileUrlFunction中将XYZ重新拼接为真正瓦片所在地址。

        注意这里使用了tileGrid重新定义了openlayers瓦片坐标,resolution与origin要与arcgis中自定义发布的地图一致。

 

 

五、总结

 

  • 离线标准与自定义切片的制作与使用;

 

  • 离线标准切片加载;

 

  • 离线自定义切片加载;

 

阅读更多

扫码向博主提问

gis_morningsun

有所付出,有所收获
  • 擅长领域:
  • WebGIS
  • openlayers
  • geoserver
  • arcgisjs
  • javaweb
去开通我的Chat快问

没有更多推荐了,返回首页