openlayers基础（一)——Map_put a map on a page"openlayer 的代码

作者：笔触狂放9 | 2024-05-20 00:17:20

踩

put a map on a page"openlayer 的代码

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网站获取。

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css">
1
2

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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

关于这段代码：

这段代码的作用是在网页是显示一个地图；
和leaflet一样，地图必须显示在一个div中，因此首先创建一个div；
target:'map' 指定了地图要显示在id为map的div中；
new ol.layer.Tile({ source: new ol.source.OSM() }) 定义了一个图层,数据来源是OpenStreetMap提供的切片数据；
new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 4 }) 定义了地图的中心位置，范围和层级。
ol.proj.fromLonLat([37.41, 8.82]) 是将一个经纬度坐标转换成当前地图投影的坐标；

fromLonLat(coordinate, opt_projection)
coordinate:经纬度坐标
projection：目标投影，默认Web Mercator, 即 ‘EPSG:3857’
一个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));
})
1
2
3
4
5

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】