ol.source.BingMaps Bing 地图图块数据的图层源。
ol.source.CartoDB CartoDB Maps API 的图层源。
ol.source.Cluster 聚簇矢量数据。
ol.source.Vector 提供矢量图层数据。
ol.source.Image 提供单一图片数据的类型。
ol.source.ImageCanvas 数据来源是一个 canvas 元素,其中的数据是图片。
ol.source.ImageMapGuide Mapguide 服务器提供的图片地图数据。
ol.source.ImageStatic 提供单一的静态图片地图。
ol.source.ImageVector 数据来源是一个 canvas 元素,但是其中的数据是矢量来源。
ol.source.ImageWMS WMS 服务提供的单一的图片数据。
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 的切片数据的图层源。
var layerTile = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
})
})
常用属性
使用features加载数据。
var polygon = new ol.geom.Polygon([
[
[37, 19],
[43, 19],
[43, 3],
[37, 3],
[37, 19]
]
])
polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'))
// 多边形要素
var polygonFeature = new ol.Feature(polygon)
// 矢量图层
var source = new ol.source.Vector({ features: [polygonFeature] })
var vectorLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
//线样式
color: '#ffcc33',
width: 2
})
})
})
map.addLayer(vectorLayer)
// GeoJSON 格式数据
const geojsonObject = {
type: 'FeatureCollection',
crs: {
type: 'name',
properties: {
name: 'EPSG:3857'
}
},
features: [
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[
[-5e6, 6e6],
[-5e6, 8e6],
[-3e6, 8e6],
[-3e6, 6e6],
[-5e6, 6e6]
]
]
}
},
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[
[-2e6, 6e6],
[-2e6, 8e6],
[0, 8e6],
[0, 6e6],
[-2e6, 6e6]
]
]
}
},
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[
[1e6, 6e6],
[1e6, 8e6],
[3e6, 8e6],
[3e6, 6e6],
[1e6, 6e6]
]
]
}
},
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[
[-2e6, -1e6],
[-1e6, 1e6],
[0, -1e6],
[-2e6, -1e6]
]
]
}
}
]
}
// 矢量图层
var source = new ol.source.Vector({ features: new ol.format.GeoJSON().readFeatures(geojsonObject) })
var vectorLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
//线样式
color: '#ffcc33',
width: 2
})
})
})
map.addLayer(vectorLayer)
GeoJSON 是一种用于编码各种地理数据结构的格式。也是我们最常用的数据格式。
一般使用url获取的也是这种格式。