openlayers基础（一)——Map

红太狼 2024-04-08 11:13 60阅读 0赞

openlayers是一个开源免费的js库，用于在网页中实现地图的动态显示和交互。一起看看官方对openlayers的介绍。

> OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector  
> data and markers loaded from any source. OpenLayers has been developed to further the use of  
> geographic information of all kinds. It is completely free, Open Source JavaScript.

需要注意的是openlayers2（以下简称ol）和ol3以上的版本有很大的差异，以最新版5.2.0为例，展开对ol的学习。  
为了方便，下载[ol 5.2.0][],将ol.js和ol.css解压出来。

首先，引用ol.css和ol.js，因为我们已经下载了ol库，所以使用ol的本地路径就行了，如果网络方便，可以直接在从ol网站获取。

##### 1.Map的创建 #####

首先从一个例子入手：

<!doctype html>
    <html lang="en">
      <head>
        <link rel="stylesheet" href="js/ol/ol.css" type="text/css">
        <style>
          .map {
            height: 400px;
            width: 100%;
          }
        </style>
        <script src="js/ol/ol.js"></script>
        <title>OpenLayers 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.OSM()
              })
            ],
            view: new ol.View({
            center: ol.proj.fromLonLat([103.73,36.03]),
            zoom: 8,
            minZoom:5,
            maxZoom:12
          })
          });
        </script>
      </body>
    </html>

关于这段代码：

1.  这段代码的作用是在网页是显示一个地图；
2.  和leaflet一样，地图必须显示在一个div中，因此首先创建一个div；
3.  `target:'map'` 指定了地图要显示在id为map的div中；
4.  `new ol.layer.Tile({ source: new ol.source.OSM() })` 定义了一个图层,数据来源是OpenStreetMap提供的切片数据；
5.  `new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 4 })` 定义了地图的中心位置，范围和层级。
6.  `ol.proj.fromLonLat([37.41, 8.82])` 是将一个经纬度坐标转换成当前地图投影的坐标；
    
    fromLonLat(coordinate, opt\_projection)  
    coordinate:经纬度坐标  
    projection：目标投影，默认Web Mercator, 即 ‘EPSG:3857’
7.  一个`Map`，必须有target,layers和view。

上面涉及的地图组成部分有：

*  地图(Map)，对应的类是ol.Map ， 它就是第一个入口。
 *  图层(Layer)，对应的类是ol.layer，ol5有多种多样用于不同业务的图层，每一种图层在实现上都对应于一个类，放在包ol.layer下面，的ol.layer.Tile就是其中的一种。多个layer可以重叠在一起，相互之间互不干扰。layer相当于一个放置数据的容器，一个Map中可以有0-n个layer，Map类中有一个layers的成员变量并且它适用于此容器，为渲染的地图提供数据。
 *  视图(View)，对应的类是ol.View， 控制地图显示的中心位置，范围，层级等。一个Map只能有0或1个View。
 *  数据源(Source)，它是和图层一一对应的，ol 5存在多种不同的数据源，每一种在实现上也对应于一个具体的类，它们都放在包ol.source下面，ol.source.OSM就是其中的一种。ol5支持多种多样在线或离线的数据源；可以是静态图或者瓦片图；也可以是栅格化的或者矢量的。如果你想在地图上加载某种格式的数据，或者某种服务提供的数据，都可以优先查看一下ol 5是否已经支持了。详情可以在官网查看Source和Layer。

对比leaflet显示一个地图的过程，两者的代码确实有比较大的差异，但是其思路是一样的：  
1.创建放置地图的div；  
2.从某个数据源获得数据创建layer；  
3.确定地图的中心位置，层级；  
4.创建map，将数据渲染到网页中。

##### 2.Map的属性和方法 #####

###### 2.1 Map的常见属性 ######

*  controls 地图控件；
 *  target 地图容器；
 *  layers 图层；
 *  view 视图
 *  overlays 叠加图层

###### 2.2 Map的常见方法 ######

*  add/sControl()添加控件
 *  addLayer()添加图层
 *  addOverlay()添加叠加图层
 *  getEventCoordinate（）触发事件的坐标
 *  getEventPixel（）触发事的像素位置
 *  getTarget()得到Map所有的容器
 *  getLayers()、getOverlys()、getControls()、getView()
 *  setView()、setTarget()
 *  removeLayer()、removeOverlay()、removeControl()

##### 3 Map的事件 #####

*  click 点击事件，双击将两个触发该事件
 *  dblclick 双击事件
 *  moveend 地图被移动后触发
 *  movestart 地图开始移动时触发
 *  postrender 地图被渲染后触发
 *  singleclick 单击事件

监听地图事件：on(type,listener)

只监听一次：once(type,listener)

注销监听：un(type,listener)

如果要在上面地图中实现单击显示经纬度功能：

map.on('click',function (e) {
        var coor=e.coordinate
        var lonlat=ol.proj.transform(coor,'EPSG:3857',"EPSG:4326")
        alert("lon:"+lonlat[0].toFixed(2)+",lat:"+lonlat[1].toFixed(2));
    })

[ol 5.2.0]: https://openlayers.org/download/