开源GIS(二)——openlayer加载Arcgis和geoserver在线离线切片

一、引言


      开始开源gis的不归路,第一课便是加载底图,底图目前主流的都是wmts,以后会研究一下wms,本文介绍了普通网络在线切片(如谷歌百度高德等)、Arcgis在线切片与离线切片、openlayer在线与离线切片。通过这三类主流的方式基本可以满足基本需求,如果遇到比较困难的可以直接研究下openlayer的切片加载原理,直接自己手动修改,你想怎么加载就怎么加载==



二、网络在线切片地图(以谷歌为例)


      网络在线切片比较简单了,直接知道他的地图url与参数对应关系就比较好操作了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lib/v4.6.4-dist/ol.css">
    <script src="lib/v4.6.4-dist/ol-debug.js"></script>
    <script src="lib/jquery-3.1.0.min.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var layer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://ditu.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e4!2st!3i388!2m3!1e0!2sr!3i388084516!3m12!2szh-CN!3sCN!5e18!12m4!1e68!2m2!1sset!2sTerrain!12m3!1e37!2m1!1ssmartmaps!4e0'
        })
    });
    var map = new ol.Map({
        target: 'map',
        layers: [
            layer
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([106, 38]),
            zoom: 5
        })
    });

    $("#map").click(function (e) {
        // alert('X ; '+ e.clientX  + 'Y: '+e.clientY);
        var t = map.getEventCoordinate(e);
        alert(t);
    })
</script>
</body>
</html>


三、Arcgis切片


      Arcgis切片分为两类,一类是通过arcgisserver发布rest服务,可以使紧凑型可以使离散性的;另一类是离线地图切片,就是一张张图片,等价为arcgis发布的离散性服务中的图片。为什么分为这两种呢?因为你买了arcgis server服务可以随意用了,如果你没有买arcgis server,那么你可以用盗版arcgis server的切图,然后直接把图片放到web服务器上就行了,如果切片你也懒得用arcgis server切,你可以直接到网上(俗称地图下载器)下载arcgis标准的切片就行了。


1、Arcgis在线切片服务

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lib/v4.6.4-dist/ol.css">
    <script src="lib/v4.6.4-dist/ol-debug.js"></script>
    <script src="lib/jquery-3.1.0.min.js"></script>
</head>
<body>
</head>
<body>
<div id="map">
    <script type="text/javascript">
        window.onload = function () {
            var map = new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.TileArcGISRest({
                            url: '	http://localhost:6080/arcgis/rest/services/gggg/ggdl/MapServer'
                        })
                    })
                ],
                view: new ol.View({
                    center: [503409, 305653],
                    zoom: 14,
                    projection: 'EPSG:3857'
                })
            });
        };
        $("#map").click(function (e) {
            //alert('X ; '+ e.clientX  + 'Y: '+e.clientY);
            var t = map.getEventCoordinate(e);
            alert(t);

            /*        var t = ol.proj.transform(map.getEventCoordinate(e), 'EPSG:3857', 'EPSG:4326');
             alert(t);*/
        })
    </script>
</body>
</body>
</html>

2、Arcgis标准的离线切片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lib/v4.6.4-dist/ol.css">
    <script src="lib/v4.6.4-dist/ol-debug.js"></script>
    <script src="lib/jquery-3.1.0.min.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: [12956574, 4853421],//地图中心位置
            //center:[503409, 305653],
            zoom: 15//地图初始层级
        }),
        //添加地图图层
        //这里注销在下面添加新的离线地图图层
        /*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 'taile/_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
            },
            projection: 'EPSG:3857'
        })
    });
    map.addLayer(tileLayer);//添加到map里面

/*    map.addControl(new ol.control.ScaleLine());
    $("#map").click(function (e) {
        //alert('X ; '+ e.clientX  + 'Y: '+e.clientY);
        var t = map.getEventCoordinate(e);
        alert(t);
    })*/
</script>

</body>
</html>

      暂时arcgis离线加载必须按照google切片要求切固定层级上述代码才能使用,自己随便定义的比例尺或分辨率还要调代码。


四、geoserver切片


      目前只做了geoserver栅格切片在线的加载,参考下了,离线的过几天再做下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.1.0.min.js"></script>
    <link rel="stylesheet" href="lib/v4.6.4-dist/ol.css">
    <script src="lib/v4.6.4-dist/ol-debug.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
  /*  var view = new ol.View({
        center: [-8236177, 4976089],
         center: [-8236177, 4976089],
        zoom: 10,
        projection: "EPSG:3857"
    });
    var tiled = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/gwc/service/wmts',
            params: {
                'FORMAT': "image/png",
                'VERSION': '1.1.1',
                tiled: true,
                STYLES: '',
                LAYERS: 'xcy:nyc_roads',
                //tilesOrigin: -124.73142200000001 + "," + 24.955967
            }
        })
    });
    var map = new ol.Map({
        layers: [tiled],
        view: view,
        target: "map",
        logo: false
    });*/

  var projection = ol.proj.get('EPSG:3857');
  var projectionExtent = projection.getExtent();
  var mapExtent =  [492996, 294667,514044, 316533];
  var matrixIds = new Array(7);

  for (var z = 0; z < 20; ++z) {
      matrixIds[z] = "xcy:" + z;
  }

  resolutions = [
      156543.03390625,78271.516953125, 39135.7584765625,19567.87923828125,
      9783.939619140625, 4891.9698095703125, 2445.9849047851562,1222.9924523925781,
      611.4962261962891,305.74811309814453,152.87405654907226,76.43702827453613,
      38.218514137268066,19.109257068634033,9.554628534317017,4.777314267158508,
      2.388657133579254,1.194328566789627,0.5971642833948135,0.2985821416974068
  ];

  bouldersLayerWMTS = new ol.layer.Tile({
      source: new ol.source.WMTS({
          url: 'http://localhost:8080/geoserver/gwc/service/wmts',
          layer: 'xcy:GGBWY2',
          matrixSet: 'xcy',
          format: 'image/png',
          projection: projection,
          tileGrid: new ol.tilegrid.WMTS({
              origin: ol.extent.getTopLeft(projectionExtent),
              resolutions: resolutions,
              matrixIds: matrixIds
          })
      })
  });

  var map = new ol.Map({
      layers: [bouldersLayerWMTS],
      target: 'map',
      view: new ol.View({
          extent: mapExtent,
          projection: projection,
          center: [503406, 305529],
          zoom: 15
      })
  });

</script>
</body>
</html>



      这里geoserver切片不是随便切就能加载的,必须自定义切片方案:设定坐标系,并且添加切片层级,这里一定别设定范围。



      最后在用geoserver切图的时候再设定切图范围,这样切出来的图片才能正常显示。


=====================================================================================

补充:geoserver wms调用,wms与wmts区别是wms每次请求返回一张图片,改图片是根据视图范围后台实时生成的。

<!DOCTYPE html>
<html>

<head>
    <title>wfs demo</title>
    <link rel="stylesheet" href="ol/ol.css">
    <script src="ol/ol-debug.js"></script>

</head>

<body>

<div id="map" style="width:100%;height:100%;"></div>

<script>


var layers = [
    new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/xcy/wms',
            params: {
                'LAYERS': 'xcy:gglayer',
                'TILED': true
            }
        })
    })
];
    var map=new ol.Map({
        layers: layers,
        target:'map',
        view: new ol.View({
            projection: 'EPSG:3857',
            center:[503408,305632],
            zoom: 16
        }),
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        })
    });
</script>

</body>

</html>



五、总结


  • 网络在线地图切片加载;

  • Arcgis服务切片加载与arcgis标准离线切片加载;

  • geoserver的wmts服务加载;

  • geoserver的wms服务加载;





阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xcymorningsun/article/details/79647302
个人分类: GIS
想对作者说点什么? 我来说一句

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

关闭
关闭
关闭