还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；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+】 |
### 文章目录
- @[toc]
- 一、Sources的一些数据类型
- ol/layer/Tile 可加载的数据源
- ol/layer/Image可加载的数据源
- ol/layer/Vector 可加载的数据源
- 二、关于数据源的一些方法
- 三、示例
- 加载开源地图瓦片
- 加载网络地图服务瓦片
- 加载矢量数据源
- 加载单幅图像 WMS 服务
- 加载静态图像
- 四、Openlayers 入门教程 -系列文章列表
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){}
三、示例
加载开源地图瓦片
示例：
加载网络地图服务瓦片
示例
加载矢量数据源
示例
加载单幅图像 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 等交互