• openlayer笔记2图层与数据源简介


    openlayer~layer(图层)

    一、图层类型

    1、ol/layer/Tile

    瓦片图层,不同缩放层级会有不同的精度

    缩放前图片边界范围

    https://b.tile.openstreetmap.org/2/3/1.png

    img

    缩放后图片边界范围

    https://c.tile.openstreetmap.org/3/6/3.png

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3k1bCnla-1576547314765)(https://c.tile.openstreetmap.org/3/6/3.png)]

    从上面坐标可以明显看出,二者的大小不是一个数量级的,浏览器会监视我们的缩放与平移,openlayer会判断当前的缩放层级调整请求参数,获取合适分辨率的图片,一般为png。

    瓦片地图可加载的图层:
    在这里插入图片描述

    上述为ol/layer/Tile 可加载的数据源。其中 :

    数据源说明
    TileDebug 不从服务器获取资源,使用canvas绘图;
    TileDebugUTFGrid 加载tileJSON格式数据
    BingMaps Bing数据,需申请key
    TileArcGISRest ArcGIS Server 发布rest服务,后缀为mapserver
    TileJSON 加载TileJSON格式数据
    TileWMS 加载WMS服务数据
    WMTS 加载WMTS服务数据
    CartoDB 加载CartoDB数据
    OSM 加载OSM数据
    Stamen 加载Stamen数据格式
    Zoomify 加载Zoomify格式的文件

    2、ol/layer/Image

    在这里插入图片描述

    上述为ol/layer/Image可加载的数据源。其中 :

    数据源说明
    ImageArcGISRest ArcGIS Rest services无瓦片结构,适用于小型地图
    ImageCanvas canvas格式的数据源
    ImageMapGuide Mapguide服务数据
    ImageStatic 静态图片
    ImageWMS WMS服务数据,无瓦片结构
    Raster 栅格数据源,多需要转换

    TileArcGISRest与ImageArcGISRest相比,前者是将若干(有限个)缩放级别的地图切割成小块,后者是对于任何缩放级别都适用,返回的是视口内一整张地图,小型地图。

    二者的渲染速度如何呢,现以南通市地图为例,

    在这里插入图片描述

    发布TileArcGISRest服务后,调用的结果为

    在这里插入图片描述

    四张切片同时加载,平均时间为11ms

    发布ImageArcGISRest服务后,调用的结果为

    在这里插入图片描述

    加载整个地图的时间为74ms,相比切片地图要速度慢很多,这也是各大地图采用切片地图的原因,速度快。既然切片图层速度快这么多,那么为什么还要用Image图层呢? 原因在与Image数据源比较轻便,不像切片图层需要在数据库存储那么多的切片数据,如果是数据量比较小的情况下,采用Image数据源比较好,毕竟相差几百毫米其实并不明显。

    3、ol/layer/Vector

    矢量图层加载的数据源为

    ol/source/Vector

    ol/source/Cluster 更改矢量数据的疏密度,继承于上一数据源

    加载的数据源为Vector,Vector数据源有很多格式,openlayer所支持的矢量格式:

    在这里插入图片描述

    **EsriJSON: ** esri推出的要素格式

    {
    
    "geometryType": "points",
    // points, polylines, polygons, envelopes and multi-points.
    "spatialReference":{ "wkid" : 4326 },
    // 使用EPSG编号
    "features":{"x":-122.43, "y":49.2, "spatialReference":{"wkid":4326}}
    // 要素对象
    }
    

    GeoJSON

    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [125.6, 10.1]
      },
    //Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon.
      "properties": {
        "name": "Dinagat Islands"
      }
    }
    

    TopoJSON: GeoJSON 按拓扑学编码后的扩展形式

    TopoJSON与GeoJSON可互相转换

    将上面geojson格式转换可得:

    {
        "type": "Topology", 
        "arcs": [ ], 
        "objects": {
            "test": {
                "type": "GeometryCollection", 
                "geometries": [
                    {
                        "type": "Point", 
                        "coordinates": [
                            125.6, 
                            10.1
                        ], 
                        "properties": {
                            "name": "Dinagat Islands"
                        }
                    }
                ]
            }
        }
    }
    

    MVT: 矢量瓦片数据编码格式 ,多用于MapBox

    IGC:飞行记录文件,*.igc

    Polyline :google推出的矢量有损压缩格式,将要素转为字符串

    Points: (38.5, -120.2), (40.7, -120.95), (43.252, -126.453)
    可转为:

    _p~iF~ps|U_ulLnnqC_mqNvxq`@
    

    WKT(well-known text):

    POLYGON ((35 10, 45 45, 15 40, 10 20, 35 10),
    (20 30, 35 35, 30 20, 20 30))
    

    GML2( Geography Markup Language):

         <gml:Polygon>
             <gml:outerBoundaryIs>
             		<gml:LinearRing>
                     <gml:coordinates>0,0 100,0 100,100 0,100 0,0</gml:coordinates>
                     </gml:LinearRing>
            </gml:outerBoundaryIs>
         </gml:Polygon>
         <gml:Point>
            <gml:coordinates>100,200</gml:coordinates>
         </gml:Point>
         <gml:LineString>
            <gml:coordinates>100,200 150,300</gml:coordinates>
         </gml:LineString>
    

    GML3:

    GML1.0和GML2.0支持的数据格式有:

    • Point
    • LineString
    • Polygon

    GML3.0增加描述覆盖信息的结构,如遥感影像

    GPX: 通用GPS数据格式

    <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
    
    <gpx xmlns="http://www.topografix.com/GPX/1/1" xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3" xmlns:gpxtpx="http://www.garmin.com/xmlschemas/TrackPointExtension/v1" creator="Oregon 400t" version="1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd">
      <metadata>
        <link href="http://www.garmin.com">
          <text>Garmin International</text>
        </link>
        <time>2009-10-17T22:58:43Z</time>
      </metadata>
      <trk>
        <name>Example GPX Document</name>
        <trkseg>
          <trkpt lat="47.644548" lon="-122.326897">
            <ele>4.46</ele>
            <time>2009-10-17T18:37:26Z</time>
          </trkpt>
          <trkpt lat="47.644548" lon="-122.326897">
            <ele>4.94</ele>
            <time>2009-10-17T18:37:31Z</time>
          </trkpt>
          <trkpt lat="47.644548" lon="-122.326897">
            <ele>6.87</ele>
            <time>2009-10-17T18:37:34Z</time>
          </trkpt>
        </trkseg>
      </trk>
    </gpx>
    

    KML( Keyhole Markup Language ): google地理标记语言,多用于google earth

    <kml xmlns=“http://www.opengis.net/kml/2.2”>
    <Folder>
      <name>Folder.kml</name>
      <open>1</open>
      <description>
        A folder is a container that can hold multiple other objects
      </description>
      <Placemark>
        <name>Folder object 1 (Placemark)</name>
        <Point>
          <coordinates>-122.377588,37.830266,0</coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Folder object 2 (Polygon)</name>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <coordinates>
                -122.377830,37.830445,0
                -122.377576,37.830631,0
                -122.377840,37.830642,0
                -122.377830,37.830445,0
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <name>Folder object 3 (Path)</name>
        <LineString>
          <tessellate>1</tessellate>
          <coordinates>
            -122.378009,37.830128,0 -122.377885,37.830379,0
          </coordinates>
        </LineString>
      </Placemark>
    </Folder>
    </kml>
    

    OSMXML: osm提供的xml矢量标记文件

    <?xml version="1.0" encoding="UTF-8"?>
    <osm version="0.6" generator="CGImap 0.0.2">
     <bounds minlat="54.0889580" minlon="12.2487570" maxlat="54.0913900" maxlon="12.2524800"/>
     <node id="298884269" lat="54.0901746" lon="12.2482632" user="SvenHRO" uid="46882" visible="true" version="1" changeset="676636" timestamp="2008-09-21T21:37:45Z"/>
     <node id="261728686" lat="54.0906309" lon="12.2441924" user="PikoWinter" uid="36744" visible="true" version="1" changeset="323878" timestamp="2008-05-03T13:39:23Z"/>
     <node id="1831881213" version="1" changeset="12370172" lat="54.0900666" lon="12.2539381" user="lafkor" uid="75625" visible="true" timestamp="2012-07-20T09:43:19Z">
      <tag k="name" v="Neu Broderstorf"/>
      <tag k="traffic_sign" v="city_limit"/>
     </node>
     ...
     <node id="298884272" lat="54.0901447" lon="12.2516513" user="SvenHRO" uid="46882" visible="true" version="1" changeset="676636" timestamp="2008-09-21T21:37:45Z"/>
     <way id="26659127" user="Masch" uid="55988" visible="true" version="5" changeset="4142606" timestamp="2010-03-16T11:47:08Z">
      <nd ref="292403538"/>
      <nd ref="298884289"/>
      ...
      <nd ref="261728686"/>
      <tag k="highway" v="unclassified"/>
      <tag k="name" v="Pastower Straße"/>
     </way>
     <relation id="56688" user="kmvar" uid="56190" visible="true" version="28" changeset="6947637" timestamp="2011-01-12T14:23:49Z">
      <member type="node" ref="294942404" role=""/>
      ...
      <member type="node" ref="364933006" role=""/>
      <member type="way" ref="4579143" role=""/>
      ...
      <member type="node" ref="249673494" role=""/>
      <tag k="name" v="Küstenbus Linie 123"/>
      <tag k="network" v="VVW"/>
      <tag k="operator" v="Regionalverkehr Küste"/>
      <tag k="ref" v="123"/>
      <tag k="route" v="bus"/>
      <tag k="type" v="route"/>
     </relation>
     ...
    </osm>
    

    WFS(web feature service):

    <?xml version="1.0"?>
    <wfs:FeatureCollection
       timeStamp="2010-08-01T22:47:02"
       numberMatched="4" numberReturned="4"
       xmlns:myns="http://www.someserver.example.com/myns"
       xmlns:wfs="http://www.opengis.net/wfs/2.0"
       xmlns:gml="http://www.opengis.net/gml/3.2"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.someserver.example.com/myns ./myns.xsd
                           http://www.opengis.net/wfs/2.0
                           http://schemas.opengis.net/wfs/2.0.0/2.0/wfs.xsd
                           http://www.opengis.net/gml/3.2
                           http://schemas.opengis.net/gml/3.2.1/gml.xsd">
          <wfs:member>
             <myns:Feature gml:id="1"></myns:Feature>
          </wfs:member>
          <wfs:member>
             <myns:Feature gml:id="2"></myns:Feature>
          </wfs:member>
          <wfs:member>
             <myns:Feature gml:id="3"></myns:Feature>
          </wfs:member>
          <wfs:member>
             <myns:Feature gml:id="4">
                <myns:Property1><myns:Property1>
                <myns:Property2><myns:Property2>
                <myns:Property3 xlink:href="#2"/>
                <myns:Property4>
                   <myns:Feature gml:id="5"></myns:Feature>
                </myns:Property4>
             </myns:Feature>
          </wfs:member>
    </wfs:FeatureCollection>
    

    WMSGetFeatureInfo: 通过wms影像服务获取矢量数据

    myns:Property2myns:Property2
    <myns:Property3 xlink:href="#2"/>
    myns:Property4
    <myns:Feature gml:id=“5”>

    </myns:Feature>
    </myns:Property4>
    </myns:Feature>
    </wfs:member>
    </wfs:FeatureCollection>

    
    **WMSGetFeatureInfo**: 通过wms影像服务获取矢量数据
    
    
    
    
  • 相关阅读:
    AndroidStudio小技巧--依赖库
    仿iOS Segmented Control样式"
    Metaweblog在Android上使用
    正则表达式使用技巧
    flask中gunicorn的使用
    Git用法小记
    指定GPU训练模型
    python中grpc的使用示例
    如何用LaTex编辑数学公式
    keras使用多进程
  • 原文地址:https://www.cnblogs.com/asdlijian/p/13514178.html
Copyright © 2020-2023  润新知