openlayers是一个非常大而复杂，强大和灵活的JS框架。
在OpenLayers一个主要的概念就是Map，Map可以包含一些图层，这些图层可以是矢量的也可以使栅格的。
每个图层的数据源可以是图片，也可以是kml文件等。当然Map也包含一些控件，主要是交互所用的，比如 平移 缩放，要素的选择等等。
现在我们开始学习OpenLayers的使用。
1.创建一个简单的电子地图应用。
你要创建一个电子地图应用，首先要创建一个地图。本教程将引导你创建一个简单的电子地图应用。
当然一些必要的基础知识是需要的，比如 HTML，CSS ，Javascript 等是要学习的，OpenLayers是主要是通过HTML和Javascript编写的，所以我们得有一个编辑器。
这里我们使用EditPlus ，当然你可以选择更好的一些编辑器，他们会高亮显示语法和自动提示功能。
2.我们首先下载openlayers的源码，下载地址：://github.com/openlayers/openlayers/releases/download/v4.1.1/v4.1.1-dist.zip，解压里面的内容。
3.下面创建一个 空的index.html文件。
写入如下代码：
<!doctype html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/ol.css" type="text/css"> <link rel="stylesheet" href="css/main.css" type="text/css"> <script src="js/jquery1.8.3.min.js" type="text/javascript"></script> <!-- <script src="js/ol.js" type="text/javascript"></script> --> <script src="js/ol-debug.js" type="text/javascript"></script> <script src="js/main.js" type="text/javascript"></script> <title>OpenLayers example</title> </head> <body> <h2>Map Test</h2> <div id="map"></div> </body> </html>
4.在index.html目录下创建一个css和js文件夹，分别放入ol.css、ol.js和ol-debug.js和jquery.js,在css目录中另外创建main.css以及在js文件下创建main.js。用文本编辑器分别打开main.css和main.js，在main.css写入：
.map {
position:absolute;
height: 600px;
width: 100%;
border: 1px red solid;
}
以及在main.js中写入:
$(function(){
var view = new ol.View({
center: ol.proj.fromLonLat([114.42, 30.52]),
zoom: 9,
maxZoom:18,
minzoom:2
});
var mapquest = new ol.layer.Tile({
source: new ol.source.OSM(),
visible:true,
name:'mapquest'
});
var map = new ol.Map({
target: 'map',
controls:ol.control.defaults().extend([
new ol.control.ScaleLine(),
new ol.control.ZoomSlider()
]),
layers: [mapquest],
view: view
});
})
5.用浏览器打开index.html，就可以看到刚才创建的地图了。
0 条评论。