还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

---

Source按照字面意思就是数据源。在Openlayer中，简单理解就是在使用layers(图层)时，不同的图层需要传入不同的数据类型，才能渲染地图。 它们需要的数据格式都是通过Source定义好的，我们只需要把现有的数据，按照规定传入数据源中，就不需要关心其他操作。

一、Sources的一些数据类型

ol/layer/Tile 可加载的数据源

• ol.source.BingMaps Bing 地图图块数据的图层源。
• ol.source.CartoDB CartoDB Maps API 的图层源。
• ol.source.MapQuest MapQuest 提供的切片数据。
• ol.source.Stamen Stamen 提供的地图切片数据。
• ol.source.Tile 提供被切分为网格切片的图片数据。
• ol.source.TileVector 被切分为网格的矢量数据。
• ol.source.TileDebug 并不从服务器获取数据。
• ol.source.TileImage 提供切分成切片的图片数据。
• ol.source.TileUTFGrid TileJSON 格式 的 UTFGrid 交互数据。
• ol.source.TileJSON TileJSON 格式的切片数据。
• ol.source.TileArcGISRest ArcGIS Rest 服务提供的切片数据。
• ol.source.WMTS WMTS 服务提供的切片数据。
• ol.source.Zoomify Zoomify 格式的切片数据。
• ol.source.OSM OpenStreetMap 提供的切片数据。
• ol.source.XYZ 具有在 URL 模板中定义的一组 XYZ 格式的 URL 的切片数据的图层源。

ol/layer/Image可加载的数据源

• ol.source.Image 提供单一图片数据的类型。
• ol.source.ImageCanvas 数据来源是一个 canvas 元素，其中的数据是图片。
• ol.source.ImageMapGuide Mapguide 服务器提供的图片地图数据。
• ol.source.ImageStatic 提供单一的静态图片地图。
• ol.source.ImageVector数据来源是一个 canvas 元素，但是其中的数据是矢量来源。
• ol.source.ImageWMS WMS 服务提供的单一的图片数据。

ol/layer/Vector 可加载的数据源

• ol.source.Cluster 聚簇矢量数据。
• ol.source.Vector 提供矢量图层数据。

二、关于数据源的一些方法

通过layer获取数据源

layer.getSource()

给source添加单个feature

source.addFeature(feature)

清空source内容

source.clear()

给source添加多个feature

source.addFeatures([feature1,feature2,xxx])

通过source获取所有属性

source.getProperties()

判断source类型

if (source instanceof VectorSource){}

三、示例

加载开源地图瓦片

示例：加载OpenStreetMap地图

加载网络地图服务瓦片

示例：加载XYZ地图

加载矢量数据源

示例：加载中国边界JSON数据

加载单幅图像 WMS 服务

示例：通过geoserver发布，加载单图的wms数据

加载静态图像

示例：加载静态图片，变成地图一部分

四、Openlayers 入门教程 -系列文章列表

• openlayers 入门教程（一）：应该如何学习openlayers
• openlayers 入门教程（二）：Map 篇
• openlayers 入门教程（三）：View 篇
• openlayers 入门教程（四）：Layers 篇
• openlayers 入门教程（五）：Sources 篇
• openlayers 入门教程（六）：Controls篇
• openlayers 入门教程（七）：Interactions篇
• openlayers 入门教程（八）：Geom 篇
• openlayers 入门教程（九）：Overlay 篇
• openlayers 入门教程（十）：Style 篇
• openlayers 入门教程（十一）：Formats篇
• openlayers 入门教程（十二）：定位与轨迹
• openlayers 入门教程（十三）：动画
• openlayers 入门教程（十四）：第三方插件
• openlayers 入门教程（十五）：与 canvas、echart，turf 等交互