快速启动
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: [newol.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创建了一个缩放至非洲东海岸的地图。可能在这里出问题：下面以行代码创建了一个地图对象，仅仅靠他自己是不行的，必须有图层匹配或者容器才可以。
varmap =newol.Map({ ... });
把地图对象绑定到<div>容器上，地图对象通过target属性制定容器，target的值为div元素的id：
target: 'map'layers: [ ... ]数组用于定义地图中可获取的图层。示例中第一个也是唯一个图层为瓦片图层：
layers: [newol.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），我们可以重投影在地图上使其拥有正确的坐标。
扫一扫
5003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
