三丶openlayer之source和layer

本文介绍了OpenLayers中的Source(数据源)和Layer(图层)概念,重点讲解了Tile、Image和Vector三种主要类型的Source,以及如何通过在线服务、协议支持和本地瓦片加载地图。Layer的使用相对简单,是地图显示的基础。

1.source和layer的概念

在前面的例子中,已经对SourceLayer有所了解了,我们用天地图为底图加载出来东西,但是这个世界上的地图不仅仅是有天地图一种类型,比如Google地图,高德地图,百度地图等,如果OpenLayers支持的地图来源越多,就会越适用,越强大。除了加载基本的地图之外,GIS还需要加载很多其他的信息,比如街道名称,商店名称,公交站点,道路等等。那么在OpenLayers 中,具体该如何把这些添加在地图上呢?

首先需要明白的一点是,SourceLayer是一对一的关系,有一个Source,必然需要一个Layer,然后把这个Layer添加到Map上,就可以显示出来了。通过官网的API搜索ol.source可以发现有很多不同的Source,但归纳起来共三种:ol.source.Tileol.source.Image和ol.source.Vector

  • ol.source.Tile对应的是瓦片数据源,现在网页地图服务中,绝大多数都是使用的瓦片地图,而OpenLayers作为一个WebGIS引擎,理所当然应该支持瓦片。
  • ol.source.Image对应的是一整张图,而不像瓦片那样很多张图,从而无需切片,也可以加载一些地图,适用于一些小场景地图。
  • ol.source.Vector对应的是矢量地图源,点,线,面等等常用的地图元素(Feature),就囊括到这里面了。这样看来,只要这两种Source就可以搞定80%的需求了

从复杂度来分析,ol.source.Image和ol.source.Vector都不复杂,其数据格式和来源方式都简单。而ol.source.Tile则不一样,由于一些历史问题,多个服务提供商,多种标准等诸多原因,导致要支持世界

OpenLayers中,source是指地图数据的来源,可以是各种不同的数据格式。其中,通过layer获取数据源可以通过`layer.getSource()`来实现。可以通过`source.addFeature(feature)`来给source添加单个feature,也可以通过`source.addFeatures([feature1,feature2,xxx])`来给source添加多个feature。通过`source.getProperties()`可以获取source的所有属性。判断source的类型可以使用`if (source instanceof VectorSource){}`。GeoJSON是一种常用的数据格式,用于编码各种地理数据结构。可以通过url获取GeoJSON格式的数据。需要记住sourcelayer中必须的选项,定义着地图数据的来源,而且source支持多种数据格式。可以使用函数创建要素数据,也可以使用GeoJSON格式数据。在OpenLayers中,可以使用`ol.source.Vector`来创建矢量图层的source,通过`features`参数传入使用`ol.format.GeoJSON().readFeatures(geojsonObject)`获取的要素数据。然后可以创建一个`ol.layer.Vector`图层,将该source设置为图层的source,并定义样式。最后,可以通过`map.addLayer(vectorLayer)`将该图层添加到地图中。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Openlayer中的source数据源](https://blog.youkuaiyun.com/qq_40323256/article/details/120063007)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [OpenLayers - Source简介 (四)](https://blog.youkuaiyun.com/yy729851376/article/details/123031013)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值