Source是什么
数据来源和格式。简单理解就是在使用layers
(图层)时,不同的图层需要传入不同的数据类型,才能渲染地图。它们需要的数据格式都是通过Source
定义好的,我们只需要把现有的数据,按照规定传入数据源中,就不需要关心其他操作。
Source的一些数据类型
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 的切片数据的图层源。
通过Layer使用Source
ol.source.XYZ 切片数据源
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}'
} )
} )
ol.source.Vector 矢量图层的数据来源
attribution
地图右下角的提示信息,传入字符串。features
地理要素。传入ol.Feature
对象。url
要素数据的地址。format
url
属性设置后,设置url
返回的要素格式。传入ol.format
下的格式。
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)
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
获取的也是这种格式。
因为Source
的数据类型很多,每种都有自己的参数,事件等。就不一一介绍了,后面使用不同图层时会做讲解。 需要记住 source
是 layer
中必须的选项,定义着地图数据的来源。而且source
是支持多种数格式。