OpenLayers开篇： Hello OpenLayers
作为整个项目的一部分，要学习openlayers的基础知识，在此写下学习openlayers的基本思路，希望一起努力！ 1、什么是openlayer OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。除此之外，OpenLayers实现访问地理空间数据的方法都符合行业标准。OpenLayers 支持Open GIS 协会制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等网络服务规范，可以通过远程服务的方式，将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行显示。OpenLayers采用面向对象方式开发，并使用来自Prototype.js和Rico中的一些组件。 2、OpenLayers学习网站 http://openlayers.org 3、开始我们的第一个openlayers程序 3.1、直接复制一下代码保存为index.html，用浏览器打开
<span style="font-family: Arial, Helvetica, sans-serif;"></span>
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="http://openlayers.org/en/v3.15.1/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.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
</pre><p></p><p>3.2 显示一个map地图应用，应该做如下三件事情</p><p><span style="white-space:pre"><span style="white-space:pre"></span>1）包含openlayers</span></p><p><span style="white-space:pre"><span style="white-space:pre"></span></span><span style="white-space: pre; background-color: rgb(240, 240, 240);"><script src="http://openlayers.org/en/v3.15.1/build/ol.js" type="text/javascript"></script></span></p><p><span style="white-space:pre"><span style="white-space:pre"><span style="white-space:pre"></span>2</span>)<div>标签包含一个map</span></p><p><span style="white-space:pre"><span style="white-space:pre"></span></span><span style="white-space:pre; background-color:rgb(240,240,240)"><div id="map" class="map"></div></span></p><p><span style="white-space:pre"></span>用css显示map大小，高400px，宽全屏</p><p><span style="white-space:pre"></span></p><p><pre name="code" class="plain"> <style>
.map {
height: 400px;
width: 100%;
}
</style>
3）用javascript创建一个map
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.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
<span style="font-family: Arial, Helvetica, sans-serif;">target：‘map’将map余div链接起来</span>
效果如图