WebGIS最基础的工作就是将所需要的地图数据加载出来，然后才有后面和业务相关的操作。工作中常常数据是多种多样的，像KML、GeoJSON这类文件类型，栅格瓦片的WMTS服务类型，还有公共网络的地图服务，如百度地图，天地图等。
# 1. 简介
数据源类型
在WebGIS开发中，通常是调用地图服务器上发布的地图服务来加载数据，如 ArcGIS Server发布的动态地图服务、瓦片地图服务和要素地图服务等或是GeoServer发布的WMS、WMTS、WFS服务等。除了地图服务的形式外，还有加载地图矢量要素文件的形式，如GeoJSON、shapefile、KML等。
# 2. 矢量数据
矢量数据属于客户端图层，确切的说是在客户端渲染的矢量图层。
数据通过数据源Source和解析器format或features的方式加载，再用ol.Feature要素类进行组织，设置Feature中的style属性配置矢量图层的样式，最后通过Layer渲染显示。矢量数据源通过ol.source.Vector (opens new window)类加载，数据源的加载方式有如下两种：
url+format方式：通过设置矢量数据url和相应数据格式的解析器加载数据- 在loader函数中添加 feature 的方式：设置features参数静态的加载矢量数据或调用
addFeature()或addFeatures()进行动态加载。
示例：
//方式一
/**
*ol.layer.Vector
*主要属性：
* source:指定数据源
* opacity:不透明度,[0,1]0是完全透明，1是不透明
* visible:可见性，
* extent:渲染边界，边界外的将不被渲染
* zIndex:在渲染图层时，会先按zIndex的值进行排序。如果未定义，在添加到map的图层集合时，ol会自动分配一个zIndex
* map:设置该图层为叠加层，不在map的图层集合中管理，将被放置在top的位置（掉setMap()方法）
*/
//加载 GeoJSON 矢量数据Vector服务图层
new ol.layer.Vector({
source:new ol.source.Vector({
url:'data/geojson/countries.geojson',
format:new ol.format.GeoJSON()
}),
name:"国界(JSON格式的矢量图层)",
id:"GeoJsonData"
}),
//加载KML矢量数据Vector服务图层
new ol.layer.Vector({
source:new ol.source.Vector({
url:'data/kml/2012_Earthquakes_Mag5.kml',
format:new ol.format.KML({
extractStyles:false
})
}),
name:"点(KML格式的矢量图层)",
id:"kmlData"
}),
//加载gpx矢量数据Vector服务图层
new ol.layer.Vector({
source:new ol.source.Vector({
url:'data/gpx/fells_loop.gpx',
format:new ol.format.GPX()
}),
name:"GPX数据",
id:"gpxData"
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//方式二
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<link rel="stylesheet" href="css/ol.css" type="text/css">
<script src="lib/ol.js"></script>
<title>Layer</title>
</head>
<body>
<h2>矢量数据加载的第二种方式：在loader函数中添加 feature 的方式</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var shenzhen = [113.958334, 22.535640];
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function (extent, resolution, projection) {
var proj = projection.getCode();
var url = 'http://gisserver.tianditu.gov.cn/TDTService/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=LRRL&' +
'outputFormat=application/json&srsname=' + proj + '&' +
'bbox=' + extent.join(',') + ',' + proj;
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
var onError = function () {
vectorSource.removeLoadedExtent(extent);
}
xhr.onerror = onError;
xhr.onload = function () {
if (xhr.status == 200) {
vectorSource.addFeatures(
vectorSource.getFormat().readFeatures(xhr.responseText));
} else {
onError();
}
}
xhr.send();
},
strategy: ol.loadingstrategy.bbox
})
var map = new ol.Map({
target: "map",
//地图容器中加载的图层
layers: [
new ol.layer.Vector({
source: vectorSource,
name: "天地图中的道路数据",
id: "load"
}),
],
view: new ol.View({
center: ol.proj.fromLonLat(shenzhen),
zoom: 8,
})
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
以上两种方式是从已有的数据文件或服务中加载的，当用户客户端绘制几何图形的时候，我们也是将这些几何图形用ol.Feature组织，放到数据源ol.source.Vector中用于创建矢量图层，显示数据。
var pointFeature = new ol.Feature({
geometry: new ol.geom.Point([12703928.421,2575539.521]),
name: '点要素'
});
var pointLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features:[pointFeature]
}),
id:"pointLayer"
});
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 3 栅格数据
栅格数据主要是在地图服务器上根据请求的范围和分辨率渲染生成的单张图片（包括影像）或是根据请求的瓦片级别和行列号，响应回来的按照特定切图策略裁剪形成的缓存图片集即瓦片地图。
由于地图数据的供应商或GIS平台不同，会有不同的数据格式。在Web端通常以数据服务的形式提供数据，有的是标准的OGC服务，也有的是平台自定义的数据服务。
ol帮我们封装了一些平台的常用的瓦片地图服务的数据源，如ArcGIS的ol.source.TileArcGISRest、开源地图OpenStreetMap的ol.source.SOM、微软必应Bing的ol.source.BingMaps。对于常规的在线瓦片地图服务提供ol.source.XYZ类来加载。
示例：
var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer';
var onlineTileUrl = 'http://server.arcgisonline.com/arcgis/rest/services/USA_Topo_Maps/MapServer/tile/{z}/{y}/{x}'
var bingKey = 'AmosL5A0GtVryl4sXNZm6U5EQMD6brAd5E8AJPGJf8AUU1saDYXDkb5CwQFijans';
var map = new ol.Map({
target:"map",
//地图容器中加载的图层
layers:[
//加载OSM瓦片图层
new ol.layer.Tile({
source:new ol.source.OSM(),
name:"世界地图(OSM瓦片)",
id:"osm"
}),
//加载ArcGIS MapServer瓦片服务图层
/**
* ol.layer.Tile
* 主要属性：
* source:指定数据源
* opacity:不透明度,[0,1]0是完全透明，1是不透明
* visible:可见性，
* z-index:
* proload:预加载低层级的瓦片数据，默认值为0，表示不预加载
* map:设置该图层为叠加层，不在map的图层集合中管理，将被放置在top的位置（掉setMap()方法）
*/
new ol.layer.Tile({
// extent:[-13884991, 2870341, -7455066, 6338219],
source:new ol.source.TileArcGISRest({
url:url
}),
name:"ArcGIS瓦片服务",
id:"arcgis_tile"
}),
/**
* 加载ArcGIS online地图
* extent:渲染边界，边界外的将不被渲染
*/
new ol.layer.Tile({
// extent:[-13884991, 2870341, -7455066, 6338219],
source:new ol.source.XYZ({
url:onlineTileUrl
}),
name:"ArcGIS online瓦片服务",
id:"arcgis_online"
}),
// bing地图的imagery：Aerial、AerialWithLabelsOnDemand、RoadOnDemand、CanvasDark
new ol.layer.Tile({
source:new ol.source.BingMaps({key:bingKey,imagerySet:"Aerial"}),
name:"BingMaps(Aerial)",
id:"bing_Aerial"
}),
new ol.layer.Tile({
source:new ol.source.BingMaps({key:bingKey,imagerySet:"AerialWithLabelsOnDemand"}),
name:"BingMaps(AerialWithLabelsOnDemand)",
id:"bing_AerialWithLabelsOnDemand"
}),
new ol.layer.Tile({
source:new ol.source.BingMaps({key:bingKey,imagerySet:"RoadOnDemand"}),
name:"BingMaps(RoadOnDemand)",
id:"bing_RoadOnDemand"
}),
new ol.layer.Tile({
source:new ol.source.BingMaps({key:bingKey,imagerySet:"CanvasDark"}),
name:"BingMaps(CanvasDark)",
id:"bing_CanvasDark"
})
],
view:new ol.View({
center: [-10997148, 4569099],
zoom: 4
})
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
当需要加载单张图片的数据时，面对不同的服务类型使用相应的数据源和渲染器。如:
WMS服务使用ol.source.ImageWMS和ol.layer.Image，加载调用GetMap接口返回的单张图片；
new ol.layer.Image({
source:new ol.source.ImageWMS({
url:'http://localhost:8081/geoserver/shenzhen/wms',
params: {
//WIDTH, HEIGHT, BBOX and CRS (SRS for WMS version < 1.3.0) 将被动态设置.
'LAYERS': 'shenzhen:ShenzhenLSWI_2016_S2L1C',
'VERSION':'1.1.1'//默认1.3.0
},
//远程WMS服务器的类型
serverType: 'geoserver',
})
}),
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12