鑫的第七章
前端工程师
获得徽章 6
- #每天一个知识点#
openlayers 中 source 和 layer 的关系：
每有一个 source，都要有一个 layer 与其相对应，也就是两者是一对一的关系。
上次说过数据源可以归纳为三类，瓦片、矢量和图片。
所以我们就以 ol.layer.Tile，ol.layer.Vector，ol.layer.Image 三种图层方式去加载数据源来看下代码实现：
// XYZ栅格地图瓦片
var rasterLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: '
example.com{z}/{x}/{y}.png'
})
})
这种使用 XYZ 数据源来加载地图是最常见的方式，Tile 图层中可以加载 XYZ 这种数据源。
// KML矢量数据
var vectorLayer = ol.layer.Vector({
source: ol.source.Vector({
url: 'example.com',
format: new ol.format.KML()
})
})
这种 KML 数据源（同类型 GeoJSON 也比较常见），在 echarts 地图中会常见些，主要信息就是地图轮廓。
// XYZ图片地图瓦片
var imageLayer = new ol.layer.Image({
source: ol.source.ImageStatic({
url: 'example.com',
imageExtent: [xmin, ymin, xmax, ymax]
})
})
这种 ImageStatic 数据源就是用来加载静态图片，比如一些动物园的全景图，可以单独加载，也可以加载到地图中的某个范围内。
只要记住图层和数据源是一一对应关系，就可以了，使用时就可以根据数据源格式，去官方 API 查看加载方式。展开赞过 11
![[呲牙]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
example.com
example.com