layer

作者: 扶不起的蝌蚪 | 来源:发表于2020-04-18 00:01 被阅读0次

原理

Source和Layer是一对一的关系,有一个Source,必然需要一个Layer,然后把这个Layer添加到Map上,就可以显示出来了。通过官网的API搜索ol.source可以发现有很多不同的Source,但归纳起来共三种:ol.source.Tileol.source.Image,ol.source.Vector
+ol.source.Tile对应的是瓦片数据源,现在网页地图服务中,绝大多数都是使用的瓦片地图,而OpenLayers 3作为一个WebGIS引擎,理所当然应该支持瓦片。

  • ol.source.Image对应的是一整张图,而不像瓦片那样很多张图,从而无需切片,也可以加载一些地图,适用于一些小场景地图。
  • ol.source.Vector对应的是矢量地图源,点,线,面等等常用的地图元素(Feature),就囊括到这里面了。

从复杂度来分析,ol.source.Imageol.source.Vector都不复杂,其数据格式和来源方式都简单。而ol.source.Tile则不一样,由于一些历史问题,多个服务提供商,多种标准等诸多原因,导致要支持世界上大多数的瓦片数据源,就需要针对这些差异提供不同的Tile数据源支持。在更进一步了解之前,我们先来看一下OpenLayers 3现在支持的Source具体有哪些:

ol.source.Tile叶子节点类有很多,大致可以分为几类:

  1. 在线服务的Source,包括ol.source.BingMaps(使用的是微软提供的Bing在线地图数据),ol.source.MapQuest(使用的是MapQuest提供的在线地图数据)(注: 由于MapQuest开始收费,ol v3.17.0就移除了ol.source.MapQuest),ol.source.OSM(使用的是Open Street Map提供的在线地图数据),ol.source.Stamen(使用的是Stamen提供的在线地图数据)。没有自己的地图服务器的情况下,可直接使用它们,加载地图底图。
  2. 支持协议标准的Source,包括ol.source.TileArcGISRestol.source.TileWMSol.source.WMTSol.source.UTFGridol.source.TileJSON。如果要使用它们,首先你得先学习对应的协议,之后必须找到支持这些协议的服务器来提供数据源,这些服务器可以是地图服务提供商提供的,也可以是自己搭建的服务器,关键是得支持这些协议。
  3. ol.source.XYZ,这个需要单独提一下,因为是可以直接使用的,而且现在很多地图服务(在线的,或者自己搭建的服务器)都支持xyz方式的请求。国内在线的地图服务,高德,天地图等,都可以通过这种方式加载,本地离线瓦片地图也可以,用途广泛,且简单易学,需要掌握。

总结概括呢就是如果你没有地图服务器,那么你要加载地图就只能调用地图商发布的在线服务,包括在线服务的Source:ol.source.BingMaps,ol.source.OSM等地图;还有一种是ol.source.XYZ格式的在线服务地图,包括国内的一些在线服务地图,高德、百度、天地图等。如果你有自己的地图服务器,那么你就可以发布地图服务然后在OpenLayers中调用自己发布的服务了,例如我们常见的几种发布的服务:ol.source.TileArcGISRest---ArcGIS发布的服务还有Geoserver发布的服务等等。

加载在线地图

//ESRI
var esriMapLayer= new ol.layer.Tile({
            source: new ol.source.XYZ({
            url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
            }),
            title:"ESRI影像"
    });
//OSM地图
var osmLayer = new ol.layer.Tile({
        source: new ol.source.OSM(),
        title:"OSM影像"
    });
//天地图
var tiandituSatelliteLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
        url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=008a8816d2eee25a677670273eaee891",
        crossOrigin: "anonymous"
        }),
        title:"天地图影像"
    });
//高德地图
var gaodeMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url:'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
        })
    });



 var map=new ol.Map({
      // 在地图上添加上面创建的四个图层,图层顺序自下而上,依次是ESRI地图,OSM地图,天地图和高德地图
        layers: [esriMapLayer, osmLayer, tiandituSatelliteLayer,gaodeMapLayer],
        view: new ol.View({
            center: [120.374,36.073],
             projection: 'EPSG:4326',
            zoom: 10
        }),
        target: 'map'
        
  });

加载Geoserver地图

var untiled = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          
          url: 'http://"你的服务器ip"+/geoserver/airtraffic/wms',
          params: {'FORMAT': 'image/png',
                   'VERSION': '1.1.1',  
                STYLES: '',
                LAYERS: 'airtraffic:china',
          }
        })
      });
      var tiled = new ol.layer.Tile({
        visible: false,
        source: new ol.source.TileWMS({
          url: 'http://"你的服务器ip"+/geoserver/airtraffic/wms',
          params: {'FORMAT': 'image/png', 
                   'VERSION': '1.1.1',
                   tiled: true,
                STYLES: '',
                LAYERS: 'airtraffic:china',
             tilesOrigin: 73.62004852302096 + "," + 3.8378885148431436
          }
        })
      });
      var projection = new ol.proj.Projection({
          code: 'EPSG:4326',
          units: 'degrees'
      });
      var map = new ol.Map({
        target: 'map',
        layers: [
          untiled,
          tiled
        ],
        view: new ol.View({
           projection: projection
        })
      }); 
 map.getView().fit([73.62004852302096, 3.8378885148431436,
                    134.7684631352655, 53.553741455004214], map.getSize());

在这里加载了一副中国的矢量地图,细心的大家可以看到我在代码中是放了两个Layer的,一个是Image格式的,一个是Tile格式的,只不过Tile格式的Layer我没有让他显示,Visible属性设置的false,大家自己在写的时候可以试一下加载Tile的效果。

矢量地图加载

矢量图使用直线和曲线来描述图形,这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等,它们都是通过数学公式计算获得的。由于矢量图形可通过公式计算获得,所以矢量图形文件体积一般较小。矢量图形最大的优点是无论放大、缩小或旋转等不会失真。在地图中存在着大量的应用,是地图数据中非常重要的组成部分。

为了便于存储,传递,使用,矢量地图会按照一定的格式来表达,比如常见的GeoJSONTopoJSONGMLKMLShapeFile等等。

var map = new ol.Map({
        layers: [
            // 底图用Open Street Map 地图
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            // 再加载一个geojson的矢量地图
            new ol.layer.Vector({
                source: new ol.source.Vector({
                    url: 'img/china.json',     // 地图来源
                    format: new ol.format.GeoJSON()    // 解析矢量地图的格式化类
                })
            })
        ],
        view: new ol.View({ 
            center: [-72.980624870461128, 48.161307640513321],
            zoom: 8,
            projection: 'EPSG:4326'
        }),
        target: 'map'
    });

图层的显示隐藏--setVisible(boolean)

<input type="checkbox" checked="checked" οnclick="checkERSI(this);" />加载ArcGIS地图

// 隐藏显示esri图层
  function checkERSI(elem) {
      map.getLayers[0].setVisible(elem.checked);
  }

图层的顺序

function upAmap(elem) {
      if (elem.checked) {
          gaodeMapLayer.setZIndex(3);
          esriMapLayer.setZIndex(esriMapLayer.getZIndex()-1);
          osmLayer.setZIndex(osmLayer.getZIndex()-1);
           tiandituSatelliteLayer.setZIndex(tiandituSatelliteLayer.getZIndex()-1);
      }
  }

相关文章

网友评论

      本文标题:layer

      本文链接:https://www.haomeiwen.com/subject/wdspvhtx.html