OpenLayers 学习--快速入门

概述

本入门教程向您展示如何在网页上放置一个简单的地图。

在页面上放置地图
创建一个新文件,复制以下内容,然后在浏览器中打开:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/build/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([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

了解发生了什么

要加载地图需要三个步骤:

  1. 引用OpenLayers 库
    第一部分包括JavaScript库。出于本教程的目的,这里我们仅指向openlayers.org网站以获取整个库。在生产环境中,我们将构建一个自定义版本的库,其中仅包含应用程序所需的模块。
    若要兼容较老版本的浏览器需要添加js引用
  1. 创建
    作为地图的加载容器
    应用程序中的地图包含在
    HTML元素中。通过此
    ,可以通过CSS控制地图属性(如宽度,高度和边框)。
  2. 编写js脚本实例化一个Map。
  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([37.41, 8.82]),
      zoom: 4
    })
  });

使用此JavaScript代码,将创建一个地图对象,并在非洲东海岸上缩放一个OSM图层。让我们分解一下: 下一行创建一个OpenLayers Map对象。就其本身而言,这没有任何作用,因为没有附加的层或交互

var map = new ol.Map({ ... });

要将地图对象附加到

,地图对象会将一个target作为参数。该值是
的ID:

  target: 'map'

layers:[…]数组用于定义地图中可用图层的列表。现在的第一个也是唯一的一层是tiled层:

layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ]

OpenLayers中的图层为(Image,Tile或Vector),通过source属性设定地图数据。Map对象的下一部分是View。View允许指定地图的中心,分辨率和旋转度。定义视图的最简单方法是定义中心点和缩放级别。请注意,缩放级别0被缩小了

view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })

您会注意到指定的中心是经度/纬度坐标(EPSG:4326)。由于我们使用的唯一图层是球形墨卡托投影(EPSG:3857),因此我们可以即时对其进行重新投影,以便能够在正确的坐标上缩放地图。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值