openlayers是一个按照面向对象原则设计的一个开发库,里面的一切都是对象。
(JAVA C++ PHP C# JS等 特点:封装、继承、多态)
核心组件:ol.Map (WebGIS前端 一切皆地图,ol中几乎所有的类都与Map之间有着直接或者间接的关系)
①controls:一个Map中可以包含很多个控件,map类中有个属性controls(控件数组)。
②interactions:交互行为,一个map中只能有一个交互行为数组([]),但这个数组中可以包含多个交互行为,或者没有交互行为。
③layers:一个map可能没有或者有多个图层,由图层的集合类管理(图层数组),多个图层逗号分开存储,ol.layer.Base即为基类图层。
④overlays:查看某个要素的属性,弹出属性框即为overlay;在地图上放置div图标,通过创建overlay,把html元素绑定给ol.overlay,再放到overlays的集合里面。
上面四个都通过ol.collection集合展示
⑤view:一个view只能绑定在一个view上(中心、投影、缩放等)
以下为使用上述类来构建map组件的示例代码,包括地图视图(view)、地图图层(layers)、地图控件(controls)、地图悬浮物(overlays)、交互控件(interactions)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="ol.css">
<style>
html,body{
width: 100%;
height: 100%;
}
.map{
width: 80%;
height: 80%;
margin: auto;
margin-top: 50px;
border: red;
border-style: double;
}
.beijing{
width: 50px;
height: 30px;
background: url("timg.jpg") center center no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="map" id="map"></div>
<div class="beijing" id="beijing"></div>
<script src="ol.js"></script>
<script>
//创建一个地图图层
var osmLayer = new ol.layer.Tile({
source:new ol.source.OSM()
});
//创建一个地图控件 全屏展示
var control = new ol.control.FullScreen();
//创建一个地图视图,再创建地图视图之前需要确定中心点
var beijing = ol.proj.transform([116.399669,39.921354],"EPSG:4326","EPSG:3857"); //经纬度投影代码为4326,转为墨卡托投影坐标系,代码为3857(坐标,源,目标)
var view = new ol.View({
center:beijing,
zoom:5,
maxZomm:10,
minZoom:3
});
//创建一个交互控件
var interaction = new ol.interaction.DragRotateAndZoom();
var interactions = new ol.interaction.defaults().extend([interaction]);
//创建一个悬浮控件 需要设置参数 用大括号
var overlay = new ol.Overlay({
position:beijing,
element:document.getElementById("beijing")
});
//创建地图
var map = new ol.Map({
target:"map",
view:view,
layers:[osmLayer],
interactions:interactions,
controls:[control],
overlays:[overlay]
});
</script>
</body>
</html>