OPENLAYERS的基本概念
目录
在OPENLAYERS中，地图对象是一系列图层和各种交互操作、控制操作的集合，一个地图对象一般由: 地图声明、地图风格、地图初始化三部分组成，下面是一个地图程序的示例代码：
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<title>OpenLayers 3 example</title>
<script src="ol3/ol.js" type="text/javascript"></script>
</head>
<body>
<h1>My Map</h1>
<div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
</body>
</html>
该程序包括三个部分：
1. 地图标签
地图标签是一个单一的document元素，如下：<div id=”map”></div>，div>元素将作为一个地图展示的容器，这里我们使用<div> 元素，但其实我们可以用任何block-level元素。并且，我们赋给容器一个ID属性，我们以后可以用ID来引用和操作地图对象。
2. 地图样式
OpenLayers 自带默认的地图样式，我们可以在HTML页面中包含该样式信息表，方法如下：
(<linkrel=”stylesheet”href=”ol3/ol.css”type=”text/css”>)
OpenLayers 不会默认指定地图的大小，因此在引入默认地图样式之后，我们需要添加至定义的样式来设定地图的大小，具体做法如下：
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
这里，我们使用地图容器的ID #map来作为CSS的选择符。我们指定该地图的大小为512px和256px。这个样式声明可以直接写到网页的<head>标签中，但在正规大型项目中一般是以单独的CSS样式引入到网页里。
3. 地图初始化
下面是生成并初始化地图对象，在HTML<body>标签的底部添加如下<script>元素来实现功能。
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
以上代码具体作用是创建一个具有指定参数属性的ol.Map对象，其中：
1) target:’map’ 是指使用<div id=”map”>来展示它。这里我们使用了ID值，您也可以使用document.getElementById(“map”))等方法直接指定对应的显示元素。
2) 下面这部分代码是为地图对象加载指定的图层。
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
3) 下面这部分代码是定义地图显示，我们指定了地图的中心（CENTER）和ZOOM（缩放）值，我们还指定了maxResolution以避免OPELAYERS的请求超出GeoWebCache能处理的范围。
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
至此，你就已经成功的完成了你的第一个WEBGIS程序的编写。
注意：
在添加脚本之前必须做好如下准备工作：
1) 必须先在<head>标签里导入OpenLayers的库，做法：<script src=”ol3/ol.js”></script>.
2) 必须添加地图标签作为地图的容器，做法：<div id=”map”></div>
地图数据转换器：https://blog.csdn.net/qq_35582643/article/details/79461426
如果您对编程不是很熟悉，您可以使用【WEBGIS前端自动生成工具】：https://blog.csdn.net/qq_35582643/article/details/81868972 来自动生成相应的程序。
转载自：https://blog.csdn.net/qq_35582643/article/details/79444811
