三丶openlayer之source和layer

最新推荐文章于 2024-12-12 09:28:24 发布
原创 最新推荐文章于 2024-12-12 09:28:24 发布 · 1.3k 阅读 · 21 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #gis #openlayer

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

1.source和layer的概念

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

首先需要明白的一点是，Source和Layer是一对一的关系，有一个Source，必然需要一个Layer，然后把这个Layer添加到Map上，就可以显示出来了。通过官网的API搜索ol.source可以发现有很多不同的Source，但归纳起来共三种：ol.source.Tile，ol.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则不一样，由于一些历史问题，多个服务提供商，多种标准等诸多原因，导致要支持世界

最低0.47元/天 解锁文章
Openlayers Source基础及重点内容讲解
大剑师兰特的GIS世界
07-22 479
Source按照字面意思就是数据源。在Openlayer中，简单理解就是在使用layers(图层)时，不同的图层需要传入不同的数据类型，才能渲染地图。它们需要的数据格式都是通过Source定义好的，我们只需要把现有的数据，按照规定传入数据源中，就不需要关心其他操作。
【openlayers-5】地图点、线、面等要素添加
WXG1011的博客
01-01 3186
openlayers点、线、面等要素添加
OpenLayers 3的Layer和Source
大树
12-21 1533
Layer和Source 一、Map、Layer和Source 图层Layer与地图源Source是一对一的关系。 当创建了一个图层Layer，相应的需要给图层添加地图源Source，然后将图层Layer添加到地图Map上，就可以得到我们想要的地图了。 二、地图源Source 地图源Source分类： 分类 描述 ol.source.Tile 瓦片数据源，现在网页地图服务中，绝大多数都是使用的瓦片地图 ol.source.Image 图片地图源，不像瓦片那样很多张图，从而无需切片，也
OpenLayers - Source简介 （四）
小小的前端
02-20 1693
Source是什么 数据来源和格式。简单理解就是在使用layers(图层)时，不同的图层需要传入不同的数据类型，才能渲染地图。它们需要的数据格式都是通过Source定义好的，我们只需要把现有的数据，按照规定传入数据源中，就不需要关心其他操作。 Source的一些数据类型 ol.source.BingMaps Bing 地图图块数据的图层源。 ol.source.CartoDB CartoDB Maps API 的图层源。 ol.source.Cluster 聚簇矢量数据。 ol.source.Vect
openlayers [五] 地图图层数据来源source 详解
爱玩亚索的程序员
01-17 2048
gml、EsriJSON、geojson、gpx、igc、kml、osmxml、ows、polyline、topojson、wfs、wkt、wms capabilities（兼容 wms 的格式）、 wms getfeatureinfo、 wmts capabilities、xlink、xsd。是 的重要组成部分。clear，当 source 的 clear 方法调用时候触发；这两种方法中都会指定数据来源格式， 矢量数据源支持的格式包含很多。addfeature，当一个要素添加到 source 中触发；
Source和Layer
weixin_30326745的博客
10-06 234
首先需要明白的一点是，Source和Layer是一对一的关系，有一个Source，必然需要一个Layer，然后把这个Layer添加到Map上，就可以显示出来了。通过官网的API搜索ol.source可以发现有很多不同的Source，但归纳起来共三种：ol.source.Tile，ol.source.Image和ol.source.Vector。 ol.source.Tile对应的是瓦片数据源...
openLayers6系列理论基础——Layer数据源source篇
happy81997的博客
04-27 2035
openLayers6系列理论基础——Layer数据源source篇 source是Layer重要组成部分，表示的图层的来源，指定了数据的服务地址。 一、使用 实例化时候通过构造函数生成 通过layer.setSource(source)稍后指定 二、分类 ol.source.BingMaps ，必应地图的切片数据，继承自ol.source.TileImage； ol.source.C...
1.（openlayer篇）openlayer接入天地图（经纬度投影）.zip
03-01
source: new ol.source.Tianditu({ layer: 'img_c', // 影像图层 attribution: '天地图' }), visible: true }); map.addLayer(tiandituImage); ``` 步骤4：处理坐标投影 如果需要在OpenLayers上显示其他基于...
OpenLayer学习之自定义测量控件
10-14
在这个"OpenLayer学习之自定义测量控件"的主题中，我们将探讨如何利用OpenLayers创建自定义的测量工具，以满足特定的地理测量需求。 首先，自定义控件在OpenLayers中是通过继承基类`ol.control.Control`来实现的。...
openLayer4实现动态改变标注图标
10-14
var vectorLayer = new ol.layer.Vector({ source: vectorSource }); map.addLayer(vectorLayer); } ``` 在`select.on('select', function(e) {...})`回调函数中，当用户点击地图上的标注时，会触发选择事件。在...
Openlayer：学习笔记之Source和Layer
KaiSarH
11-13 3026
学习笔记之Source和Layer
Openlayers 图层切换源（Source）函数setSource()
最新发布
ganggun的博客
12-12 640
layer.setSource(source) 是 OpenLayers 中用于更改图层数据源的方法。你可以使用它来动态更新图层的内容，例如切换瓦片图层的服务地址或重新加载矢量图层数据。轻松实现图层的动态切换和更新。
openlayers入门教程3《Source的使用》
qq_40795662的博客
01-24 1083
在我们日常工作中，经常会用到百度地图、高德地图，其实他们的地图源都归属为瓦片地图，甚至我们想做某个精细化地区，地级市的业务时我们可能还会根据自己的地图服务器生成我们更加个性化的地图。显示是不能的，所以openlayers 为了应对这种情况 提供了更加通用的加载地图的api。瓦片地图 就像名字一样，有一张很大的地图，分别切割成无数的小的固定地图，由各个小的地图拼接到页面上形成一张完整的地图。这样我们就实现了一个最近基本的图层切换功能，可能看到这里会有一些疑问，对于这些操作地图的api我们是在哪里找到呢？
OpenLayers地图基本概念（Map、View、Layer、Source四种基本类型）和背景介绍，OpenLayers官方文档翻译，OpenLayers官方中文教程，OpenLayers中文指南
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
10-13 7044
本文翻译自OpenLayers7官方文档，用于阐述OpenLayers地图基本概念。Vue+OpenLayers中文教程推荐，不同于OpenLayers官方文档使用html+js原生原生教程，博主专栏包含大量vue整合案例和实际开发案例，非常适合地图开发小白快速入门。
【ol3】layer与source类图
Tuling2020的博客
11-09 165
http://anzhihun.coding.me/ol3-primer/ch05/index.html layer类图： source类图： 转载于:https://www.cnblogs.com/CESC4/p/7809965.html
openlayers摸爬滚打 3.图层layer和feature的学习和简单例子
优快云已弃用
03-16 2800
使用openlayers创建地图使用new ol.Map({...}); 其中有参数layers：地图图层，openlayers允许有多个图层，且可重叠在一起，上面的图层覆盖下面的图层，具体的layer的分类和参数请自行查阅api 创建layer的方式： （1）创建layer后，将layer放在map的layers[]中 var myLayer = new ol.layer.Vec...
Openlayer中的source数据源
09-02 1136
通过layer获取数据源 layer.getSource() 给source添加单个feature source.addFeature(feature) 给source添加多个feature source.addFeatures([feature1,feature2,xxx]) 通过source获取所有属性 source.getProperties()
三、OpenLayer常用图层介绍
qq_39330397的博客
08-18 1705
3、ImageLayer 影像图层 它是基于图片的图层类型，适用于一次性加载一张完整的图片来显示地图数据。wmts有些参数比较复杂，需要自己去看服务元数据的参数，比如矩阵也就是切片层级的名称，瓦片层级等。2、VectorLayer 矢量图层，这个图层主要是添加自己的绘制的一些要素。1、TileLayer 瓦片图层。一般加载切片图层（wmts,wms）是三种常见的图层类型，它们在加载和显示地图数据的方式上有一些区别。VectorLayer使用比较灵活，可以自定义样式，图层要素等。
OpenLayers API整理
diaoyanbian8143的博客
05-07 2806
整理的Openlayers 的知识笔记，随着运用不断加深理解，也会不断更新。 本文链接：Openlayers API整理 作者：狐狸家的鱼 GitHub：八至 一、创建地图 1、地图Map 创建地图底图：需要用new ol.Map({}) 地图map是由图层layers、一个可视化视图view、用于修改地图内容的交互interaction以及使用UI...
openlayer中source
08-31
在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格式的数据。需要记住source是layer中必须的选项，定义着地图数据的来源，而且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 ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值