openlayers

OpenLayers Demo

by giser · 2019-04-03

目录

在地图上放置一张地图

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.2/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://openlayers.org/en/v4.6.2/build/ol.js" type="text/javascript"></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([114.3,30.60]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

要包含一个网页的地图，你将需要3件事情：

包括OpenLayers
<div> 地图容器
JavaScript来创建一个简单的地图

包括OpenLayers

  <script src="https://openlayers.org/en/v4.6.2/build/ol.js" type="text/javascript"></script>

`<div>` 包含地图

  <div id="map" class="map"></div>

应用程序中的地图包含在<div>HTML元素中。通过这个<div>，可以通过CSS控制宽度，高度和边界等地图属性。这里是CSS元素，用于使地图高400像素和浏览器窗口一样宽。

  <style>
    .map {
      height: 400px;
      width: 100%;
    }
  </style>

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([114.3,30.60]),
      zoom: 4
    }) 
  });

转载自：https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/78748578.jpg

相关推荐

Tags: openlayers

You may also like...