快速启动
1.在网页上放置一个地图
下面是一个完整的例子。创建一个新的JSP或者html文件,将下面的代码拷贝到你新建的文件中,在浏览器中访问你的页面:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet"href="http://openlayers.org/en/v3.4.0/css/ol.css"type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="http://openlayers.org/en/v3.4.0/build/ol.js"type="text/javascript"></script>
<title>OpenLayers 3 example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map"class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
</script>
</body>
</html>
2.了解发生了什么
你需要一下三步来创建一个带有地图的网页:
1)引入openlayers类库
<scriptsrc="http://openlayers.org/en/v3.4.0/build/ol.js"type="text/javascript"></script>
首先就是上面这样引入openlayers的类库. 在本教程中,我们简单的引用了openlayers.org网站的整个类库。在生产环境中,我们将建立一个本地类库,该类库只包括我们的应用程序所需的模块。
2)创建一个<div>作为地图容器
<divid="map"class="map"></div>
应用程序中的地图包含在一个<div>的html元素里面。在<div>元素中,可以通过CSS来控制整个地图的高度、宽度与边框等属性。本实例中,地图的高度为400个像素,宽度与浏览器相同。
<style>
.map{
height:400px;
width:100%;
}
</style>
3)用javascript编写一个地图
varmap =
newol.Map({
target:
'map',
layers: [
new
ol.layer.Tile({
source:
newol.source.MapQuest({layer:
'sat'})
})
],
view:
newol.View({
center: ol.proj.transform([
37.41,
8.82],
'EPSG:4326',
'EPSG:3857'),
zoom:
4
})
});
这段javascript代码,通过MapQuest创建了一个缩放至非洲东海岸的地图。可能在这里出问题:下面以行代码创建了一个地图对象,仅仅靠他自己是不行的,必须有图层匹配或者容器才可以。
var
map =
newol.Map({ ... });
把地图对象绑定到<div>容器上,地图对象通过target属性制定容器,target的值为div元素的id:
target:
'map'
layers: [ ... ]数组用于定义地图中可获取的图层。示例中第一个也是唯一个图层为瓦片图层:
layers: [
new
ol.layer.Tile({
source:
newol.source.MapQuest({layer:
'sat'})
})
]
在Openlayers3中,图层分为三类,分别为瓦片图层、图片图层与矢量图层。Source是地图通过图层获取瓦片的一个协议。
地图的下一个组成部分就是view。view允许指定的中心,分辨率,和地图的旋转。定义一个视图的最简单的方法是定义一个中心点和缩放级别。值得注意的是,变焦0级放大。
view:
newol.View({
center: ol.proj.transform([
37.41,
8.82],
'EPSG:4326',
'EPSG:3857'),
zoom:
4
})
你会注意到指定的中心是一个纬度/经度坐标(EPSG:4326)。虽然我们使用的是球形墨卡托投影(EPSG:3857),我们可以重投影在地图上使其拥有正确的坐标。